typescript - 难以理解的 typescript 泛型函数重载

Question

在学习 TypeScript 时，我注意到一个奇怪的行为。

function concat5<T>(strs: T, strs2: T): T;
function concat5(strs: string, strs2: string) {
    return strs + strs2;
}

concat5(123, 12);
concat5({a:1}, {b:2});

我认为这段代码是一个错误。 但是，IDE 中没有出现错误。

为什么？

Answer 1

TypeScript 与 Java/C# 不同，Type 是运行时的一部分，JavaScript 没有运行时类型限制，没有转换错误，没有类型转换错误，TypeScript 中的所有类型只停留在编辑器中在编译器中，编译后，所有类型都会消失。 JavaScript 也没有函数重载，因为没有类型，每种类型的对象都可以作为参数传递到函数中。

就您而言，函数重载只是声明，无法根据实现自动检测错误。它只能检测基于指定类型的错误。

function concat5<T>(strs: T, strs2: T): T;只告诉 strs和strs2应该是相同类型，没有限制 T可。

以下错误结果表明实现与声明不匹配。

function concat5<T>(strs: T, strs2: number): T;
function concat5(strs: string, strs2: string) {
    return strs + strs2;
}

让我们看看这个例子，

function concat5<T extends number>(strs: T, strs2: T): T;
function concat5(strs: string, strs2: string) {
    return strs + strs2;
}

function concat5<T1 extends number, T2>(strs: T1, strs2: T2): T1;
function concat5(strs: string, strs2: string) {
    return strs + strs2;
}

The reason this does not give any error is, JavaScript can accept any object for string input as it will eventually convert all objects to string, so it does not give wrong implementation error in this case. As long as both parameters are are not explicitly specified.

为了好玩 如果您打开 Chrome 的控制台并输入 {} + {} ，你会看到结果 [object Object][object Object] 。 JavaScript 允许连接任意两种类型，它们会被转换为字符串。

>{} + 2
< 2
>2 + {}
<"2[object Object]"
>null + 2
<2
>2 + undefined
<NaN
>2 + (function(){ return 3; })
<"2function(){ return 3; }"