TypeScript 中的函数与类重载

TypeScript 中的函数与类重载

在 TypeScript 中，函数和类的重载允许我们根据不同的参数类型和数量来调用相同的函数或构造函数。这种特性使得代码更加灵活和可读。本文将详细介绍如何在 TypeScript 中实现函数和类的重载。

1. 普通函数重载

示例

以下是一个普通函数重载的简单示例：

function abc(a: string): string;
function abc(a: number): number;

function abc(a: unknown) {
  return a;
}

console.log(abc("3231423sdfdsf")); // 输出: 3231423sdfdsf
console.log(abc(23423423)); // 输出: 23423423

// 不允许，会报错
// console.log(abc(false)); // Type 'boolean' is not assignable to parameter of type 'string | number'.

在这个例子中，我们定义了两个重载签名，分别处理字符串和数字类型的参数。实现函数接受一个 unknown 类型的参数，这样可以处理所有重载情况。

普通函数重载写法 2

我们还可以使用类型别名定义重载的方法：

const myfn1: {
  (a: string): string;
  (a: number): number;
} = function (a: any) {
  return a;
}

console.log(myfn1("3231423sdfdsf")); // 输出: 3231423sdfdsf
console.log(myfn1(23423423)); // 输出: 23423423

这种方式和前一种方式类似，定义了一个函数类型的对象，并实现对应的逻辑。

2. 接口与联合类型

在 TypeScript 中，我们可以使用接口和联合类型来组合不同的对象类型。例如：

interface ccc {
  a?: string;
  c: string;
}

interface ddd {
  b?: number;
}

const obj: ccc | ddd = {
  a: "3231423sdfdsf",
  b: 23423423
}

在上述代码中，obj 可以是 ccc 或 ddd 类型之一，但不能同时包含两者的属性。

3. 构造函数的重载示例

类的构造函数也可以重载，以下是一个示例：

class PersonTest {
  name: string;
  age: number;

  // 定义重载签名
  constructor(name: string);
  constructor(name: string, age: number);

  // 实现构造函数
  constructor(name: string, age?: number) {
    this.name = name;
    this.age = age ?? 0; // 如果未提供age，默认为0
  }

  display(): string {
    return `${this.name}, Age: ${this.age}`;
  }
}

// 调用示例
const personTest1 = new PersonTest("Alice");
console.log(personTest1.display()); // 输出: Alice, Age: 0

const personTest2 = new PersonTest("Bob", 30);
console.log(personTest2.display()); // 输出: Bob, Age: 30

在这个例子中，PersonTest 类可以通过不同的构造函数参数数量来创建对象。

4. 类内部普通函数的重载示例

最后，我们还可以在类中实现方法的重载：

class Display {
  show(value: number): void;
  show(value: string): void;

  show(value: number | string): void {
    console.log(`Displaying: ${value}`);
  }
}

// 调用示例
const display = new Display();
display.show(100); // 输出: Displaying: 100
display.show("Hello!"); // 输出: Displaying: Hello!

在这个例子中，Display 类的 show 方法根据不同类型的参数执行不同的逻辑。

总结

TypeScript 的函数和类重载特性使得我们能够写出更加灵活和可维护的代码。通过合理地使用重载，可以让函数和类的接口更加清晰，提升代码的可读性与可用性。希望本篇博客能帮助你更好地理解 TypeScript 中的重载机制！