Search code examples
typescriptvue.jsvuejs3webstorm

TypeScript's type inference for Promise.all fails in Vue on WebStorm2023.1

In this code, everything works fine in the ts file, and the variable first is correctly resolved to the string type.

But when I tried to use it under Vue3's Composition API, all types were merged. This causes me to have to force the type to be specified.

What do I have to do to get it recognized correctly even in Vue files?

TypeScript version: 5.0.4

// in .ts file
// type () => Promise<string>
const fun1 = () => Promise.resolve('A')
const fun2 = () => Promise.resolve([1])
const b = 1 + 1 === 2
Promise.all([fun1(), b ? fun2() : null]).then((res) => {
  // res type [string, number[] | null]

  // string
  const first = res[0]

  // number[]|null
  const second = res[1]
})

// in .vue file
<script setup>
// type () => Promise<Awaited<string>>
const fun1 = () => Promise.resolve('A')
const fun2 = () => Promise.resolve([1])
const b = 1 + 1 === 2
Promise.all([fun1(), b ? fun2() : null]).then((res) => {
  // res type Awaited<string | number[] | null>[]

  // type string|number[]|null
  const first = res[0]

  // type string|number[]|null
  const second = res[1]
})
</script>
Solution

  • this will be fixed in WebStorm 2023.2, you can try this in the EAP version that is generally available right now. Here's a link to the related announcement https://blog.jetbrains.com/webstorm/2023/05/webstorm-2023-2-eap2/

    I also personally tested it in the latest EAP Version and it seems to work in my opinion. enter image description here