TypeScript 静态属性和方法

注意: 如果您是 TypeScript 新手，请先查看我们的 TypeScript 入门 教程。

在 TypeScript 中，static 关键字用于创建静态属性和方法。

静态属性和方法属于类本身，而不属于类的任何单个实例。换句话说，它们在类的所有实例之间共享。

静态属性和方法对于所有实例都通用的数据或行为很有用。

TypeScript 静态属性

要创建静态属性，我们在属性名之前使用 static 关键字。例如，

class Dog {
    // Declare a static property
    static bark: string = "Woof!";

    constructor(private name: string, private owner: string) {}
    
    dogIntro(): string {
        return `${this.name} loves its owner, ${this.owner}, and says ${Dog.bark}`;
    }
}

// Create instances of Dog class
let dog1 = new Dog("Wolfie", "Jessica");
let dog2 = new Dog("Honey", "James");

console.log(dog1.dogIntro());
console.log(dog2.dogIntro());

// Access the static property outside the class
console.log(`All dogs say ${Dog.bark}`);

输出

Wolfie loves its owner, Jessica, and says Woof!
Honey loves its owner, James, and says Woof!
All dogs say Woof!

在这里，我们在 Dog 类中创建了一个静态属性 bark。因此，bark 的单个副本由所有 Dog 实例共享。

另一方面，每个 Dog 实例都有自己的非静态属性和方法副本，即 name、owner 和 dogIntro()。

使用类名访问静态属性

在前面的示例中，请注意如何在类内部和外部访问静态属性

class Dog {
    ... ... ...

    // Access the static property inside the class    
    dogIntro(): string {
        return `${this.name} loves its owner, ${this.owner}, and says ${Dog.bark}`;
    }
}

... ... ...

// Access the static property outside the class
console.log(`All dogs say ${Dog.bark}`);

通常，我们在类内部使用 this 访问非静态属性，而在类外部使用对象名（dog1 或 dog2）访问这些属性。

但是，我们使用类名来访问静态属性，因为它们属于类本身，而不是类的各个实例。

// Valid way to access static property
Dog.bark

// Invalid ways to access static property (inside class)
this.bark

// Invalid ways to access static property (outside class)
dog1.bark
dog2.bark

注意：您可以使用 this 在静态方法中访问静态属性。

示例 1：TypeScript 静态属性

class Employee {
    static headcount: number = 0; // Static property

    constructor(private name: string, private jobTitle: string) {
        // Increment headcount whenever a new instance is created
        Employee.headcount++;
    }
    
    getInfo(): void {
        console.log(`Employee: ${this.name}`);
        console.log(`Job Title: ${this.jobTitle}\n`);
    }
}

let employee1 = new Employee("John Doe", "Developer");
let employee2 = new Employee("Jane Doe", "Designer");

// Print the employee details
employee1.getInfo();
employee2.getInfo();

// Print the static property
console.log(`Headcount: ${Employee.headcount}`);

输出

Employee: John Doe
Job Title: Developer

Employee: Jane Doe
Job Title: Designer

Headcount: 2

在此程序中，我们创建了一个静态属性 headcount，每次创建 Employee 类的实例时都会增加它。

最初，headcount 的值为 0。

由于我们接着创建了两个 Employee 实例（employee1 和 employee2），因此 headcount 的最终值为 2。

TypeScript 静态方法

与静态属性一样，静态方法属于类本身，而不是各个实例。

要创建静态方法，我们在方法名之前使用 static 关键字。例如，

class Dog {
    private static bark: string = "Woof!";

    constructor(private name: string, private owner: string) {}
    
    dogIntro(): string {
        return `${this.name} loves its owner, ${this.owner}, and says ${Dog.bark}`;
    }

    // Create a static method that returns the static property
    static getBark(): string {
        return Dog.bark;
    }
}

// Create instances of Dog class
let dog1 = new Dog("Wolfie", "Jessica");
let dog2 = new Dog("Honey", "James");

console.log(dog1.dogIntro());
console.log(dog2.dogIntro());

// Access the static method
let dogBark: string = Dog.getBark();

console.log(`All dogs say ${dogBark}`);

输出

Wolfie loves its owner, Jessica, and says Woof!
Honey loves its owner, James, and says Woof!
All dogs say Woof!

在这里，静态方法 getBark() 返回私有静态属性 bark 的值。

在类外部，我们通过使用类名而不是对象 dog1 或 dog2 来访问静态方法。

// Access the static method
let dogBark: string = Dog.getBark();

示例 2：TypeScript 静态方法

class Circle {

    // Static constant
    static readonly PI: number = 3.14159;

    static calculateArea(radius: number): number {
        return Circle.PI * radius * radius;
    }
}

// Access static property
console.log(`Value of PI: ${Circle.PI}`);

// Access static method
let area: number = Circle.calculateArea(5);
console.log(`Area of Circle: ${area}`);

输出

Value of PI: 3.14159
Area of Circle: 78.53975

这里，PI 是一个静态常量，calculateArea() 是一个静态方法。因此，它们都由 Circle 类的所有实例共享。

注意：我们使用 readonly 访问修饰符将类属性声明为常量。另一方面，const 关键字用于将普通变量声明为常量。

class Dog {
    static bark: string = "Woof!";

    constructor(private name: string, private owner: string) {}
    
    dogIntro(): string {
        return `${this.name} loves its owner, ${this.owner}.`;
    }

    // Use 'this' inside a static method
    static getBark(): string {
        return Dog.bark;
    }
}

// Access static property
console.log(`Say ${Dog.bark}`);

// Access static method
let dogBark: string = Dog.getBark();
console.log(`All dogs say ${dogBark}`);

Say Woof!
All dogs say Woof!

// Error: Property 'dogIntro' does not exist on type 'typeof Dog'.
console.log(Dog.dogIntro());

class Dog {
    constructor(private name: string, private owner: string) {}
    
    dogIntro(): string {
        return `${this.name} loves its owner, ${this.owner}.`;
    }
}

let dog1 = new Dog("Wolfie", "Jessica");
let dog2 = new Dog("Honey", "James");

console.log(dog1.dogIntro());
console.log(dog2.dogIntro());

// Output:
// Wolfie loves its owner, Jessica.
// Honey loves its owner, James.

class Dog {
    private static bark: string = "Woof!";

    constructor(private name: string, private owner: string) {}
    
    dogIntro(): string {
        return `${this.name} loves its owner, ${this.owner}.`;
    }

    // Use 'this' inside a static method
    static getBark(): string {
        return this.bark;
    }
}

let dog1 = new Dog("Wolfie", "Jessica");
let dog2 = new Dog("Honey", "James");

console.log(dog1.dogIntro());
console.log(dog2.dogIntro());

let dogBark: string = Dog.getBark();
console.log(`All dogs say ${dogBark}`);

Wolfie loves its owner, Jessica.
Honey loves its owner, James.
All dogs say Woof!

static getBark(): string {
    return this.bark;
}

class Dog {

    // Non-static property
    breed: string;

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

    // Static method
    static getBreed(): void {
    
        // Error because getBreed() is static but breed is not
        console.log(this.breed);
    }
}

class Dog {
    // Declare a static property
    static bark: string = "Woof!";

    constructor(private name: string, private owner: string) {}
    
    // Non-static method that accesses
    // both static and non-static properties
    dogIntro(): string {
        return `${this.name} loves its owner, ${this.owner}, and says ${Dog.bark}`;
    }
}

let dog1 = new Dog("Wolfie", "Jessica");
console.log(dog1.dogIntro());

// Output: Wolfie loves its owner, Jessica, and says Woof!

阅读更多

• TypeScript 抽象类和方法
• TypeScript 类