技术文档中心
首页
React
Vue
TypeScript
Kotlin
React Native
Electron
Android
首页
React
Vue
TypeScript
Kotlin
React Native
Electron
Android
  • 基础入门

    • TypeScript 学习指南
    • 基础类型
    • 函数
    • 接口
    • 类
  • 进阶内容

    • 泛型
    • 高级类型
    • 工具类型
    • 装饰器
    • 模块
  • 实战应用

    • 配置文件
    • 实战应用

类

基础类

class Person {
  name: string;
  age: number;

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

  greet(): void {
    console.log(`Hello, I'm ${this.name}`);
  }
}

let person = new Person('John', 25);
person.greet();

访问修饰符

public

class Person {
  public name: string; // 默认 public
  
  constructor(name: string) {
    this.name = name;
  }
}

private

class Person {
  private age: number;
  
  constructor(age: number) {
    this.age = age;
  }
  
  getAge(): number {
    return this.age;
  }
}

let person = new Person(25);
// person.age; // 错误
person.getAge(); // 正确

protected

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

class Employee extends Person {
  private department: string;
  
  constructor(name: string, department: string) {
    super(name);
    this.department = department;
  }
  
  getInfo(): string {
    return `${this.name} - ${this.department}`; // 可以访问 name
  }
}

只读属性

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

let person = new Person('John');
// person.name = 'Jane'; // 错误

参数属性

class Person {
  constructor(
    public name: string,
    private age: number,
    protected email: string
  ) {}
}

// 等价于
class Person {
  public name: string;
  private age: number;
  protected email: string;
  
  constructor(name: string, age: number, email: string) {
    this.name = name;
    this.age = age;
    this.email = email;
  }
}

存取器

class Person {
  private _age: number = 0;
  
  get age(): number {
    return this._age;
  }
  
  set age(value: number) {
    if (value < 0) {
      throw new Error('年龄不能为负数');
    }
    this._age = value;
  }
}

let person = new Person();
person.age = 25;
console.log(person.age);

静态成员

class Grid {
  static origin = { x: 0, y: 0 };
  
  static calculateDistance(point: { x: number; y: number }): number {
    let xDist = point.x - Grid.origin.x;
    let yDist = point.y - Grid.origin.y;
    return Math.sqrt(xDist * xDist + yDist * yDist);
  }
}

console.log(Grid.origin);
console.log(Grid.calculateDistance({ x: 10, y: 10 }));

抽象类

abstract class Animal {
  abstract makeSound(): void;
  
  move(): void {
    console.log('移动中...');
  }
}

class Dog extends Animal {
  makeSound(): void {
    console.log('汪汪汪');
  }
}

let dog = new Dog();
dog.makeSound();
dog.move();

继承

class Animal {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }
  
  move(distance: number = 0): void {
    console.log(`${this.name} 移动了 ${distance}米`);
  }
}

class Dog extends Animal {
  bark(): void {
    console.log('汪汪汪');
  }
}

let dog = new Dog('旺财');
dog.bark();
dog.move(10);

实现接口

interface Printable {
  print(): void;
}

class Document implements Printable {
  print(): void {
    console.log('打印文档');
  }
}

类类型

class Greeter {
  greeting: string;
  
  constructor(message: string) {
    this.greeting = message;
  }
  
  greet(): string {
    return `Hello, ${this.greeting}`;
  }
}

let greeterMaker: typeof Greeter = Greeter;
let greeter: Greeter = new greeterMaker('world');
最近更新: 2026/2/6 15:39
Contributors: hailong
Prev
接口