当前位置：首页 > article >正文

TypeScript-面向对象（接口、类、对象、泛型）

article 2024/11/15 21:30:04

TypeScript 的接口与类学习总结

1. 接口是什么？

接口（interface）定义了一组抽象方法，即只规定了方法的名称和参数，而不提供实现细节。类可以通过实现接口来定义这些方法的具体实现。

接口是为了定义一种契约，让其他类可以根据这个契约实现特定的功能。TypeScript 的接口不会被编译为 JavaScript，它仅在开发和编译阶段起作用，帮助进行类型检查。

2. 接口的使用

接口定义：

interface IPerson {
    firstName: string;
    lastName: string;
    sayHi: () => string;
}

这个接口规定了对象 IPerson 必须有 firstName、lastName 属性，并实现一个 sayHi 方法。

实现接口：

var customer: IPerson = {
    firstName: "Tom",
    lastName: "Hanks",
    sayHi: (): string => { return "Hi there" }
};
console.log(customer.sayHi()); // 输出: Hi there

3. 联合类型与接口

接口中的属性可以使用联合类型（多个类型的组合），使得接口更加灵活。例如：

interface RunOptions {
    program: string;
    commandline: string[] | string | (() => string);
}

这表示 commandline 属性可以是字符串、字符串数组或一个返回字符串的函数。

4. 接口与数组

接口可以定义数组的索引类型，例如：

interface NameList {
    [index: number]: string;
}

此接口规定数组的索引是数字，元素必须是字符串。

5. 接口继承

接口可以继承其他接口，甚至多个接口：

单接口继承：

interface Person {
    age: number;
}

interface Musician extends Person {
    instrument: string;
}

多接口继承：

interface IParent1 {
    v1: number;
}

interface IParent2 {
    v2: number;
}

interface Child extends IParent1, IParent2 {}

6. TypeScript 类

类定义与实例化：

class Car {
    engine: string;
    constructor(engine: string) {
        this.engine = engine;
    }
    disp(): void {
        console.log("发动机为: " + this.engine);
    }
}

let myCar = new Car("V8");
myCar.disp(); // 输出: 发动机为: V8

类的继承：
TypeScript 支持继承（extends）：

class Shape {
    area: number;
    constructor(a: number) {
        this.area = a;
    }
}

class Circle extends Shape {
    disp(): void {
        console.log("圆的面积: " + this.area);
    }
}

let myCircle = new Circle(223);
myCircle.disp(); // 输出: 圆的面积: 223

静态属性与方法：
静态成员可以通过类直接调用：

class StaticMem {
    static num: number;
    static disp(): void {
        console.log("num 值为: " + StaticMem.num);
    }
}
StaticMem.num = 12;
StaticMem.disp(); // 输出: num 值为: 12

7. 泛型

泛型是一种设计模式，允许我们编写可重用、类型安全的代码。它允许函数、类、接口可以处理不同类型的数据。

泛型函数：

function identity<T>(arg: T): T {
    return arg;
}

let result = identity<string>("Hello");
console.log(result); // 输出: Hello

泛型类：

class Box<T> {
    private value: T;
    constructor(value: T) {
        this.value = value;
    }
    getValue(): T {
        return this.value;
    }
}

let stringBox = new Box<string>("TypeScript");
console.log(stringBox.getValue()); // 输出: TypeScript

泛型约束：
可以通过约束限制泛型的类型：

interface Lengthwise {
    length: number;
}

function logLength<T extends Lengthwise>(arg: T): void {
    console.log(arg.length);
}

logLength("hello"); // 输出: 5