前端 - 关于 ts 中回调函数参数加上泛型限制后传入联合类型为什么会报错？

Question

相关代码如下，在 use 函数中加入联合类型后就会告诉我 number 和 string 类型不兼容，求教应该怎样解决这个问题，换个写法的话我想要的是保留 use 的泛型

declare function use<T>(data: T, cb: (arg: T) => void): voiddeclare function cb1(arg: string): voiddeclare function cb2(arg: number): voiduse('', cb1) // successuse(1, cb2) // successconst data: string | number = 9const cb: typeof cb1 | typeof cb2 = cb1use(data, cb) // error

Answer 1

你遇到的问题源于 TypeScript 的类型系统。在你的代码中，cb 函数的类型被定义为可以接受 string 或 number 类型的参数。然而，当你尝试将 cb 作为参数传递给 use 函数时，你传入的数据 data 实际上是一个 string 或 number 的联合类型。这就引发了类型不匹配的问题，因为 string 和 number 是两种不同的类型，不能直接相互转换。

解决这个问题的一种方式是使用类型断言。你可以明确地告诉 TypeScript，你确信 data 变量的确切类型就是 string 或 number，这样就可以消除类型不匹配的错误。

下面是一种可能的解决方案：

declare function use<T>(data: T, cb: (arg: T) => void): void;declare function cb1(arg: string): void;declare function cb2(arg: number): void;use('', cb1); // successuse(1, cb2); // successconst data: string | number = 9;const cb: typeof cb1 | typeof cb2 = cb1; // you are sure that cb is either cb1 or cb2// use type assertionuse(data as string | number, cb); // success

在这个解决方案中，我们通过使用类型断言 as 来告诉 TypeScript，我们知道 data 的确切类型是 string | number，所以它应该可以安全地传递给 use 函数。这样，我们就可以保留泛型，同时解决了类型不匹配的问题。