难以理解的打字稿泛型函数重载

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 也没有函数重载，因为没有类型，每种类型的对象都可以作为参数传入函数。

在您的情况下，函数重载只是声明，不能根据实现自动检测错误。 它只能检测基于Types Specified 的错误。

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;
}

这不会给出任何错误的原因是，JavaScript 可以接受字符串输入的任何对象，因为它最终会将所有对象转换为字符串，因此在这种情况下它不会给出错误的实现错误。 只要没有明确指定这两个参数。

为了好玩如果您打开 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; }"