如何在TypeScript中使用函数重载？

Question

给出以下TypeScript代码

class NumberChecker { }
class StringChecker { }
class Component {}
class ComponentChecker { }
class Grid { }
class GridChecker { }

function check(element: number): NumberChecker;
function check(element: string): StringChecker;
function check(element: Grid): GridChecker;
function check(element: Component): ComponentChecker {
    if (typeof element === 'number') {
        return new NumberChecker();
    }
    if (typeof element === 'string') {
        return new StringChecker();
    }
    if (element instanceof Component) {
        return new ComponentChecker();
    }
    if (element instanceof Grid) {
        return new GridChecker();
    }
}

const a = check(2); // a is NumberChecker
const b = check('sdf'); // b is StringChecker
const c = check(new Component()); // c is GridChecker
const d = check(new Grid()); // d is GridChecker

为什么c和d都是GridChecker ？ 我期待c成为ComponentChecker 。

链接到游乐场

Answer 1

实际实现的签名需要涵盖所有选项，在您的情况下，它应该是：

function check(element: number): NumberChecker;
function check(element: string): StringChecker;
function check(element: Grid): GridChecker;
function check(element: Component): ComponentChecker;
function check(element: number | string | Grid | Component) {
    // ...
}

那么类型为：

const c = check(new Component());

是ComponentChecker 。

但同样，只有不同的类不具有相同的结构。