如何对数组类型联合类型执行操作？解决TypeScript类型兼容问题

你的代码里TypeScript报错的核心原因是：当参数x是number[] | string[]联合类型时，TS无法自动关联x.splice(0,1)返回的v和x的具体类型——虽然我们清楚x是数字数组时v肯定是数字数组，x是字符串数组时v是字符串数组，但TS的联合类型推导做不到这种关联，所以会认为v可能和x的元素类型不匹配。

下面是几种可行的解决方式：

方式一：使用泛型约束 #

通过泛型把数组元素类型和函数绑定，让TS能精确推导类型：

type Foo = number[]
type Bar = string[]

function move<T extends number | string>(x: T[]) {
    const v = x.splice(0, 1)
    x.splice(1, 0, ...v)
}

方式二：类型断言明确类型 #

直接断言v的类型和x的元素类型一致：

type Foo = number[]
type Bar = string[]

function move(x: Foo | Bar) {
    const v = x.splice(0, 1) as (typeof x)[0][]
    x.splice(1, 0, ...v)
}

这里(typeof x)[0]会取x数组的元素类型，断言v是该类型的数组，消除类型不匹配的报错。

方式三：函数重载 #

针对两种数组类型分别定义重载签名，让TS根据传入参数匹配对应类型：

type Foo = number[]
type Bar = string[]

function move(x: Foo): void;
function move(x: Bar): void;
function move(x: Foo | Bar) {
    const v = x.splice(0, 1)
    x.splice(1, 0, ...v)
}

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