Type issues for AppLoading example (Asset)

🐛 Bug Report

Environment

Expo CLI 3.19.2 environment info: System: OS: macOS 10.15.4 Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.16.2 - ~/.nvm/versions/node/v12.16.2/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.4 - ~/.nvm/versions/node/v12.16.2/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman IDEs: Android Studio: 3.6 AI-192.7142.36.36.6392135 Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild npmPackages: expo: ^37.0.0 => 37.0.8 react: 16.9.0 => 16.9.0 react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4 npmGlobalPackages: expo-cli: 3.19.2

Managed workflow focus iOS

Steps to Reproduce

Follow the example published here: https://docs.expo.io/versions/latest/sdk/app-loading/ shows how to setup AppLoading with Asset to load assets before the main UI is shown for snappines and better UX. This works just fine in plain Javascript as .js or .jsx, but not in TypeScript .tsx.

Expected Behavior

No typescript issues

Actual Behavior

Typescript overload error:

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<{ startAsync?: () => Promise<void>; onError?: (error: Error) => void; onFinish?: () => void; autoHideSplash?: boolean; }> | Readonly<{ startAsync: null; onError: null; onFinish: null; }>): AppLoading', gave the following error.
    Type '() => Promise<void[]>' is not assignable to type '() => Promise<void>'.
      Type 'Promise<void[]>' is not assignable to type 'Promise<void>'.
        Type 'void[]' is not assignable to type 'void'.
  Overload 2 of 2, '(props: Props, context?: any): AppLoading', gave the following error.
    Type '() => Promise<void[]>' is not assignable to type '() => Promise<void>'.ts(2769)

It seems to me that

https://github.com/expo/expo/blob/fc280efd289febd34d7bced59e9a3a5982403044/packages/expo/src/launch/AppLoading.tsx#L8

Is referencing Promise<void>, while the example in the docs: https://github.com/expo/expo/blob/sdk-37/docs/pages/versions/v37.0.0/sdk/app-loading.md is returning a Promise<void[]> as it is returning a promise of a map.

  async _cacheResourcesAsync() {
    const images = [require('./assets/snack-icon.png')];

    /* @info Read more about <a href='../guides/preloading-and-caching-assets.html'>Preloading and Caching Assets</a> */
    const cacheImages = images.map(image => {
      return Asset.fromModule(image).downloadAsync();
    }); /* @end */

    return Promise.all(cacheImages);
  }

Reproducible Demo

https://snack.expo.io/@aldegoeij/apploading-typescript-issue

I’m just a beginner in TypeScript, would it make sense to change the Promise<void> to Promise<void | void[]>?

I can do a PR if this is acceptable change?

[brentvatne]

you don’t need to return anything, just add await Promise.all(cacheImages)

[aldegoeij]

yup that seems to do the trick, I also managed to silence it with Promise<any> as return type for _cacheResourcesAsync(), but as you say changing to await without return also worked.

I’ll do a PR to the docs 💪