[TypeScript] 第1522天 在TypeScript中的类与JavaScript类有什么不同？

[haizhilin2013]

trafficstars

第1522天 在TypeScript中的类与JavaScript类有什么不同？

3+1官网

我也要出题

[wuxin0011]

1. 类型声明 : ts 中需要提前声明变量类型 ，js 不用
2. 使用接口: ts中可以使用接口，js中不能
3. 修饰符: ts 中 可以使用 private、public 和 protected 对方法或者成员变量修饰，js 中默认是 public

[llccing]

TypeScript 和 JavaScript 的类有许多相似之处，因为 TypeScript 是基于 JavaScript 的超集，并且遵循 ES6（ECMAScript 2015）标准。然而，TypeScript 为类添加了一些额外的功能和类型安全机制，使其更适合于大型项目和复杂应用程序开发。以下是 TypeScript 类与 JavaScript 类之间的一些主要区别：

1. 类型注解

TypeScript 允许在类的属性、方法参数和返回值中使用类型注解，从而提供静态类型检查和更好的开发工具支持。

class Person {
    name: string;
    age: number;

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

    greet(): string {
        return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
    }
}

在 JavaScript 中没有类型注解：

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
    }
}

2. 访问修饰符

TypeScript 提供了 public、private 和 protected 修饰符来控制类成员的可访问性。这些修饰符在 JavaScript 中是不可用的。

class Person {
    public name: string;   // 公开属性
    private age: number;   // 私有属性

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

    public greet(): string {
        return `Hello, my name is ${this.name}`;
    }

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

3. 抽象类和抽象方法

TypeScript 支持抽象类和抽象方法，允许你定义不能直接实例化的类，必须在派生类中实现抽象方法。JavaScript 没有内置的抽象类和方法概念。

abstract class Shape {
    abstract getArea(): number;

    describe(): void {
        console.log(`This shape has an area of ${this.getArea()} square units.`);
    }
}

class Circle extends Shape {
    constructor(private radius: number) {
        super();
    }

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

4. 接口

TypeScript 允许使用接口来定义类的结构和行为。这种机制有助于强制实现类遵循特定的契约，并提供更强的类型检查。

interface Greetable {
    greet(): string;
}

class Person implements Greetable {
    constructor(public name: string) {}

    greet(): string {
        return `Hello, my name is ${this.name}`;
    }
}

5. 只读属性

TypeScript 提供了 readonly 修饰符，用于声明只读属性。这些属性只能在初始化或构造函数中赋值，之后不能再修改。JavaScript 没有直接的只读属性概念。

class Person {
    readonly name: string;

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

const person = new Person("Alice");
// person.name = "Bob"; // 错误: 不能修改只读属性

6. 静态类型检查

TypeScript 编译器在编译时进行静态类型检查，帮助开发者捕获潜在的类型错误并提高代码质量。而 JavaScript 是动态类型语言，没有静态类型检查机制。

class Person {
    name: string;
    age: number;

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

    greet(): string {
        return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
    }
}

const person = new Person("Alice", 30);
// person.age = "thirty"; // 错误: 不能将类型 "string" 分配给类型 "number"

总结

TypeScript 类在 JavaScript 类的基础上引入了类型注解、访问修饰符、抽象类和方法、接口、只读属性以及静态类型检查等特性。这些特性使得 TypeScript 在开发大型和复杂应用程序时具有更强的类型安全性和代码可维护性。以下是一个综合示例，展示了 TypeScript 类的这些特性：

interface Greetable {
    greet(): string;
}

abstract class Shape {
    abstract getArea(): number;

    describe(): void {
        console.log(`This shape has an area of ${this.getArea()} square units.`);
    }
}

class Circle extends Shape {
    constructor(private radius: number) {
        super();
    }

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

class Person implements Greetable {
    public name: string;
    private age: number;
    readonly id: number;

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

    greet(): string {
        return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
    }

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

const circle = new Circle(5);
circle.describe(); // 输出: This shape has an area of 78.53981633974483 square units.

const person = new Person("Alice", 30, 1);
console.log(person.greet()); // 输出: Hello, my name is Alice and I am 30 years old.
// person.id = 2; // 错误: 不能修改只读属性