TypeScript 构造函数|极客教程

TypeScript 构造函数

在 TypeScript 中，构造函数是用来创建和初始化类的实例的特殊方法。构造函数可以包含参数，用来接收外部传入的数据，并对类的属性进行初始化。

构造函数的语法

在 TypeScript 中，构造函数使用 constructor 关键字来声明，语法如下：

class ClassName {
    constructor(parameters) {
        // 构造函数的逻辑
    }
}

构造函数可以包含一些逻辑，比如初始化类的属性，执行一些操作等。

构造函数的参数

构造函数的参数可以用来接收外部传入的数据，进而在构造函数中进行初始化操作。参数可以设置默认值，也可以在类中定义成员属性来接收参数。

class Person {
    name: string;

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

let person = new Person("Alice");
console.log(person.name); // 输出 "Alice"

在上面的示例中，构造函数接收一个 name 参数，并将其赋值给类的 name 属性。

构造函数的重载

在 TypeScript 中，构造函数支持重载，可以根据传入的参数个数或类型不同来调用不同的构造函数。

class Point {
    constructor(x: number, y: number);
    constructor(z: number);
    constructor(x: number, y?: number) {
        // 根据参数个数选择构造函数逻辑
        if (y !== undefined) {
            // 构造函数的逻辑
        } else {
            // 构造函数的逻辑
        }
    }
}

let point1 = new Point(1, 2);
let point2 = new Point(3);

在上面的示例中，Point 类有两个构造函数重载，分别接收两个参数和一个参数。

super 关键字

在 TypeScript 中，如果子类的构造函数中使用了 super 关键字，表示调用父类的构造函数进行初始化操作。子类的构造函数中必须调用 super，并将参数传递给父类的构造函数。

class Animal {
    name: string;

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

class Dog extends Animal {
    age: number;

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

let dog = new Dog("旺财", 2);
console.log(dog.name, dog.age); // 输出 "旺财 2"

在上面的示例中，Dog 类继承自 Animal 类，子类的构造函数中调用了 super(name) 来调用父类的构造函数。

静态成员和构造函数

在 TypeScript 中，静态成员可以在构造函数中初始化，这些静态成员属于类本身，而不是实例。静态成员在类中只会被初始化一次。

class MathHelper {
    static PI: number;

    constructor() {
        MathHelper.PI = 3.14;
    }
}

let mathHelper = new MathHelper();
console.log(MathHelper.PI); // 输出 3.14

在上面的示例中，MathHelper 类中的 PI 是一个静态成员，在构造函数中对其进行了初始化操作。

可选构造函数和 readonly 属性

在 TypeScript 中，可以通过在构造函数参数后面加上 ? 来表示可选参数。可选参数可以不传，默认值为 undefined。

class Person {
    readonly name: string;

    constructor(name?: string) {
        this.name = name || "Unknown";
    }
}

let person1 = new Person("Alice");
let person2 = new Person();
console.log(person1.name); // 输出 "Alice"
console.log(person2.name); // 输出 "Unknown"

在上面的示例中，Person 类中的 name 属性是 readonly 只读属性，构造函数中的 name? 表示可选参数。

构造函数的调用顺序

在 TypeScript 中，当创建一个类的实例时，先执行父类的构造函数，然后再执行子类的构造函数。构造函数的调用顺序是基于类的继承结构的。

class A {
    constructor() {
        console.log("A");
    }
}

class B extends A {
    constructor() {
        console.log("B");
        super();
    }
}

let b = new B();