While the code works perfectly in the ts file and resolves the variable first to the string type, things get a bit complicated when trying to implement it under Vue3's Composition API. The types end up being merged, forcing me to specify the type manually.
What steps do I need to take to ensure it is 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>