函数和类，初窥 TypeScript 的基本构造块

2024-01-14 16:29:05

好的，以下是关于 TypeScript 入门（三）函数和类的文章。

函数

函数是 TypeScript 中的基本构建块之一，用于将代码组织成可重用模块。函数允许我们对代码进行分组，以便在需要时轻松调用和执行。

1. 定义函数

在 TypeScript 中，函数使用 function 来定义。函数的基本语法如下：

function functionName(parameters): returnType {
  // 函数体
}

例如：

function sum(a: number, b: number): number {
  return a + b;
}

在这个例子中，我们定义了一个名为 sum 的函数，它接受两个数字参数 a 和 b，并返回它们的和。

2. 可选参数

TypeScript 允许函数具有可选参数。可选参数使用问号 (?) 来表示。当调用函数时，可以省略可选参数。

例如：

function greet(name?: string): void {
  if (name) {
    console.log("Hello, " + name + "!");
  } else {
    console.log("Hello, world!");
  }
}

在这个例子中，我们定义了一个名为 greet 的函数，它接受一个可选的 name 参数。当调用 greet 函数时，如果提供了 name 参数，则函数将打印出 "Hello, " + name + "!"。否则，函数将打印出 "Hello, world!"。

3. 默认值

TypeScript 允许函数参数具有默认值。默认值使用等于号 (=) 来指定。当调用函数时，如果没有提供参数值，则使用默认值。

例如：

function calculateArea(width: number, height: number = 10): number {
  return width * height;
}

在这个例子中，我们定义了一个名为 calculateArea 的函数，它接受两个参数：width 和 height。height 参数具有默认值 10。当调用 calculateArea 函数时，如果只提供了一个参数，则函数将使用默认值 10 来计算面积。

4. 剩余参数

TypeScript 允许函数具有剩余参数。剩余参数使用三个点 (...) 来表示。剩余参数可以接收任意数量的参数。

例如：

function sumAll(...numbers: number[]): number {
  let total = 0;
  for (let number of numbers) {
    total += number;
  }
  return total;
}

在这个例子中，我们定义了一个名为 sumAll 的函数，它接受任意数量的数字参数。函数将这些数字相加并返回总和。

5. 重载

TypeScript 允许函数重载。函数重载是指函数可以具有相同的名称，但具有不同的参数列表。当调用函数时，TypeScript 会根据参数列表来确定调用哪个函数。

例如：

function greet(name: string): void;
function greet(name: string, age: number): void;

function greet(name: string, age?: number): void {
  if (age) {
    console.log("Hello, " + name + "! You are " + age + " years old.");
  } else {
    console.log("Hello, " + name + "!");
  }
}

在这个例子中，我们定义了一个名为 greet 的函数，它具有两个重载。第一个重载接受一个字符串参数，第二个重载接受一个字符串参数和一个数字参数。当调用 greet 函数时，TypeScript 会根据参数列表来确定调用哪个函数。

类

类是 TypeScript 中的另一个基本构建块。类允许我们创建具有共同属性和行为的对象。

1. 写法

在 TypeScript 中，类使用关键字 class 来定义。类的基本语法如下：

class ClassName {
  // 属性
  // 方法
}

例如：

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
  }
}

在这个例子中，我们定义了一个名为 Person 的类。Person 类具有两个属性：name 和 age。Person 类还具有一个构造函数，用于初始化这些属性。Person 类还具有一个名为 greet 的方法，用于向用户打招呼。

2. 继承

TypeScript 支持类继承。继承允许我们创建一个新类，该新类继承了父类的属性和行为。

例如：

class Employee extends Person {
  salary: number;

  constructor(name: string, age: number, salary: number) {
    super(name, age);
    this.salary = salary;
  }

  getSalary() {
    return this.salary;
  }
}

在这个例子中，我们定义了一个名为 Employee 的类，它继承了 Person 类。Employee 类具有三个属性：name、age 和 salary。Employee 类还具有一个构造函数，用于初始化这些属性。Employee 类还具有一个名为 getSalary 的方法，用于获取员工的薪水。

3. 修饰符

TypeScript 提供了多种修饰符来控制类的访问权限和行为。最常用的修饰符包括：

public：属性或方法可以在类内部和外部访问。
protected：属性或方法只能在类内部和派生类内部访问。
private：属性或方法只能在类内部访问。

例如：

class Person {
  public name: string;
  protected age: number;
  private salary: number;

  constructor(name: string, age: number, salary: number) {
    this.name = name;
    this.age = age;
    this.salary = salary;
  }

  public greet() {
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
  }

  protected calculateSalary() {
    return this.salary * 12;
  }

  private getBonus() {
    return this.salary * 0.1;
  }
}

在这个例子中，我们使用 public、protected 和 private 修饰符来控制类的访问权限。name 属性是公共的，因此可以在类内部和外部访问。age 属性是受保护的，因此只能在类内部和派生类内部访问。salary 属性是私有的，因此只能在类内部访问。

4. 存取器

TypeScript 允许我们定义存取器来获取和设置类的属性值。存取器使用关键字 get 和 set 来定义。

例如：

class Person {
  private _name: string;

  public get name(): string {
    return this._name;
  }

  public set name(value: string) {
    this._name = value;
  }
}

在这个例子中，我们定义了一个名为 name 的属性，它具有一个私有字段 _name。我们使用 get 和 set 存取器来获取和设置 name 属性的值。

5. 抽象类

TypeScript 允许我们定义抽象类。抽象类不能被实例化，但它可以被其他类继承。抽象类通常用于定义公共接口或行为，供其他类实现。

例如：

abstract class Shape {
  abstract area(): number;
}

class Rectangle extends Shape {
  width: number;
  height: number;

  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }

  area(): number {
    return this.width * this.height;
  }
}

class Circle extends Shape {
  radius: number;

  constructor(radius: number) {
    this.radius = radius;
  }

  area(): number {
    return Math.PI * this.radius ** 2;
  }
}