TypeScript 怎么用函数重载实现不同参数对应不同返回值？

Question

仓乃文 · Accepted Answer

一个函数根据参数类型返回不同类型的值（如传字符串返回对象，传数组返回数组），用联合类型标注返回值会丢失精确性。函数重载为每种参数组合定义独立的签名，调用时自动推导对应返回类型。

基本重载：
```typescript
function parse(input: string): object;
function parse(input: string[]): object[];
function parse(input: string | string[]): object | object[] {
  if (typeof input === "string") {
    return JSON.parse(input);
  }
  return input.map(s => JSON.parse(s));
}

const obj = parse("{\"a\":1}");     // 类型：object
const arr = parse(["{}", "{}"]);  // 类型：object[]
```

实用场景：createElement：
```typescript
function createElement(tag: "div"): HTMLDivElement;
function createElement(tag: "span"): HTMLSpanElement;
function createElement(tag: string): HTMLElement {
  return document.createElement(tag);
}

const div = createElement("div");   // HTMLDivElement
const span = createElement("span"); // HTMLSpanElement
```

补充说明：
- 重载签名写在前面，实现签名写在最后（实现签名对外不可见）
- 实现签名必须兼容所有重载签名
- 调用时 TypeScript 只看重载签名，不看实现签名
- 重载顺序影响推导：更具体的签名放前面
- 也可以用条件类型替代部分重载场景