时间戳

首页 > 解决方案 > .map() 上的联合类型的字符串 [] | string[][] 导致错误

typescript - .map() 上的联合类型的字符串 [] | string[][] 导致错误

问题描述

interface Props {
    data: string[] | string[][];
}

function Component({ data }: Props) {
    return data.map(v => v);
}

map() 抛出错误：此表达式不可调用。联合类型的每个成员 '((callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any) => U[]) | ((callbackfn: (value: string[], index: number, array: string[][]) => U, thisArg?: any) => U[])' 有签名，但这些签名都不兼容彼此。(2349)

为什么会这样，我该如何解决？

TypeScript Playground 中的代码

标签： typescriptunion-types

解决方案

这是 TypeScript 的限制。如果您有两个数组的并集：

string[] | number[]

你不能在它上面调用任何方法。你需要先脱离工会。

解决方案一

interface Props {
    data: string[] | string[][];
}

function isString(arg: any): arg is string {
    return typeof arg === 'string'
}

function isStringArray(arg: any): arg is string[] {
    return Array.isArray(arg) && arg.every(isString);
}

function Component({ data }: Props) {
    if (isStringArray(data)) {
        data.map(str => str)
    } else {
        data.map(strArr => strArr);
    }
}

解决方案二

尝试通用版本。

interface Props<T> {
    data: T[];
}

function Component<T extends string | string[]>({ data }: Props<T>) {
    return data.map(v => v);
}

推荐阅读