TypeScript函数两个返回分支为何自动补全仅展示数组方法

问题原因 #

TypeScript 默认并不会基于函数入参的字面量值自动推导对应返回分支的具体类型，核心逻辑如下：

• 你的mode参数仅标注了基础的boolean类型，没有声明入参值和返回值类型的映射关系，TS 会自动合并所有返回分支的类型，将函数的返回值推断为number[] | "mike"联合类型，无论你传入true还是false，返回值的默认类型都是这个联合类型。
• 关于自动补全仅提示数组方法的问题：正常情况下联合类型只会提示所有成员共有的属性和方法，如果你遇到只提示数组方法的情况，通常是编辑器自动补全的排序策略导致，或者是旧版本 TypeScript 的兼容问题，你尝试访问字符串独有的方法时，TS 依然会抛出类型错误。

解决方案 #

如果想要实现传入true返回数组类型、传入false返回字符串类型的效果，有两种常用实现方式：

1. 函数重载

// 先声明不同入参对应的返回类型
function toto(mode: true): number[]
function toto(mode: false): "mike"
// 再写函数实现
function toto(mode: boolean) {
    if (mode) {
        return [42]
    } else {
        return "mike"
    }
}

const test = toto(true) // 类型自动推导为 number[]
const test2 = toto(false) // 类型自动推导为 "mike"

2. 泛型+条件类型

function toto<T extends boolean>(mode: T): T extends true ? number[] : "mike" {
    if (mode) {
        return [42] as any
    } else {
        return "mike" as any
    }
}

如果你不想修改原函数定义，也可以在使用时手动做类型收窄，就能触发对应类型的自动补全：

const test = toto(true)
if (Array.isArray(test)) {
    // 此处会自动提示数组相关方法
    test.push(123)
} else {
    // 此处会自动提示字符串相关方法
    test.toUpperCase()
}

内容的提问来源于stack exchange，提问作者pom421