跳转到主要内容
eLearner.app
模块 4 · 第 1 课(共 2)课程中的7/14~15 min
模块课程(1/2)

类和修饰符

TypeScript extends standard ES6 classes with powerful Object-Oriented Programming (OOP) features, such as static typing, access modifiers, and shorthand parameter properties.

Classes and Access Modifiers

In TypeScript, you can control the visibility of class members, properties, and methods using three main keywords:

  • public (default): the member is accessible from anywhere.
  • private: the member is accessible only within the class that defines it.
  • protected: the member is accessible within the class and its subclasses (inheritance).
TS
class Animal {
  public name: string;
  private age: number;

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

  public getAge(): number {
    return this.age;
  }
}

Parameter Properties

TypeScript offers a shorthand syntax to declare and initialize a class member directly in the constructor. By prefixing a constructor parameter with an access modifier, the property is automatically created and assigned:

TS
// This syntax does exactly the same as the previous example!
class Animal {
  constructor(
    public name: string,
    private age: number,
  ) {}
}

Implementing Interfaces

A class can implement one or more interfaces using the implements keyword. This ensures the class adheres to a specific contract by defining all required methods and properties:

TS
interface Flyable {
  fly(altitude: number): void;
}

class Bird implements Flyable {
  constructor(public name: string) {}

  fly(altitude: number): void {
    console.log(`${this.name} is flying at ${altitude} meters.`);
  }
}

Inheritance and super

TypeScript fully supports class inheritance. A class can extend another class using the extends keyword. If the subclass defines a constructor, it must call the base class constructor using the super() function before accessing this:

TS
class Person {
  constructor(public name: string) {}
}

class Student extends Person {
  constructor(
    name: string,
    public grade: number,
  ) {
    super(name); // Calls the Person constructor
  }
}

Try it yourself

Exercise 1: Car Class and Private Modifier

锻炼#ts.m4.l1.e1
尝试:0加载中...

Declare a class named Car. It must have a readonly model property (string) defined in the constructor, a private mileage property (number) initialized to 0, a public method drive(miles: number): void that increments mileage by miles, and a getter or method getMileage(): number that returns mileage.

正在加载编辑器...
显示提示

Use private mileage: number = 0; to make the variable private, and constructor(public readonly model: string) {} as shorthand.

3 次尝试后可用的解决方案

Exercise 2: Shape Interface and Circle Class

锻炼#ts.m4.l1.e2
尝试:0加载中...

Complete the code by implementing the Circle class which implements the Shape interface. The class must have a readonly radius property (number) set via constructor, and implement getArea(): number (returning Math.PI * radius * radius).

正在加载编辑器...
显示提示

Use implements Shape on the Circle class and define the getArea(): number method.

3 次尝试后可用的解决方案

Exercise 3: Abstract Vehicle Class and Motorcycle Subclass

锻炼#ts.m4.l1.e3
尝试:0加载中...

Declare a class named Motorcycle that extends the abstract class Vehicle. It must implement the start() method to return the string 'Motorcycle ' followed by the make (this.make) and ' started'.

正在加载编辑器...
显示提示

Use class Motorcycle extends Vehicle and implement the start(): string method that returns the correct string.

3 次尝试后可用的解决方案

Exercise 4: Parameter Properties and Inheritance

锻炼#ts.m4.l1.e4
尝试:0加载中...

Create a class named Employee that defines a readonly property id (number) and a public property name (string) using the constructor shorthand. Then, create a class Developer that extends Employee and adds a public property department (string) via the constructor.

正在加载编辑器...
显示提示

Use super(id, name) in the Developer constructor and use public department to define the property via the constructor.

3 次尝试后可用的解决方案