Typescript:为什么可以有几个没有函数体的函数声明

Question

我在这个GitHub版本的react导航库中发现了以下Typescript代码，该库有几个函数声明，但只有最后一个声明包含函数体：

export function navigate(
route:
| { key: string; params?: object }
| { name: string; key?: string; params?: object }
): Action;
export function navigate(name: string, params?: object): Action;
export function navigate(...args: any): Action {
if (typeof args[0] === 'string') {
// implementation details...
} else {
// implementation details...
}
}

这是怎么回事？

Answer 1

这是一个名为函数重载的Typescript功能，这里对此进行了很好的解释。

在参数类型包含条件运算符(如联合类型|(的情况下，可以使用它来避免运行时错误。

如果您只有一个包含函数体的函数声明(而不是其他两个没有函数体的声明(，这将是一项危险的业务，因为any在编译时允许任何操作，并且只有在运行时您才会遇到错误，具体取决于If/else情况：

export function navigate(...args: any): Action {
if (typeof args[0] === 'string') {
// implementation details...
} else {
// implementation details...
}
}

显然，如果开发人员没有另外两个函数声明，那么她/他可能不会使用any。但在Axel Rauschmayer博士的例子中，你可以看到，如果添加条件词作为参数而不是...args: any，实际上会有问题：

export function navigate(
nameOrRoute:
| string
| { key: string; params?: object }
| { name: string; key?: string; params?: object },
params?: object
): any {
if (typeof nameOrRoute === 'string') {
// implementation details...
} else {
// implementation details...
}
}

这将允许在编译时进行多种参数组合，但在运行时的某些情况下会导致错误。