TypeScript中Interface接口的深度探索与实践

定义接口

在TypeScript中，interface是一个强有力的概念，它用于定义类型签名，特别是对象的结构。接口可以用来描述对象应该有哪些属性、方法，以及这些成员的类型。它们是实现类型系统中“鸭子类型”（duck typing）的关键，这意味着如果一个对象“看起来像鸭子，走起路来像鸭子”，那么就可以认为它是一只鸭子——即如果一个对象满足某种结构，那么就可以用作那种结构的对象。

interface Person {
   
     
    name: string;  
    age: number;  
    greet: (greeting: string) => void;  
}  
  
let person: Person = {
   
     
    name: "Alice",  
    age: 30,  
    greet: function(greeting: string) {
   
     
        console.log(greeting + ", " + this.name);  
    }  
};  
  
person.greet("Hello"); // 输出: Hello, Alice

在这个例子中，Person接口定义了三个成员：两个属性name和age，以及一个方法greet。实现（或说“符合”）这个接口的对象必须包含这三个成员。

可选属性

interface的可选属性是一个非常有用的特性，它允许你在定义接口时指定某些属性不是必须存在的。可选属性可以让你的接口更加灵活，适用于多种不同的应用场景，尤其是在处理可能缺少某些属性的对象时。

interface Person {
   
   
    name: string;
    age?: number; // 可选属性
    address?: string; // 可选属性
}

使用可选属性

alice 没有任何可选属性，bob 有 age 属性，而 charlie 则包含了所有的属性。

const alice: Person = {
   
   
    name: "Alice"
};

const bob: Person = {
   
   
    name: "Bob",
    age: 30
};

const charlie: Person = {
   
   
    name: "Charlie",
    age: 25,
    address: "123 Elm Street"
};

访问可选属性

当你访问一个可能不存在的可选属性时，TypeScript 会认为该属性可能为 undefined。这意味着你必须处理这种可能性，要么使用可空联合类型，要么使用可选链操作符（?.）

alice.age; // 编译器警告：可能为 undefined
alice.age = 22; // 错误：不能给可选属性赋值，除非已经确定它存在

if (alice.age) {
   
   
    console.log(`Alice is ${
   
   alice.age} years old.`);
}

// 或者使用可选链操作符（?.）
console.log(alice?.age); // 如果 alice.age 不存在，则输出 undefined 而不是抛出错误

只读属性

在TypeScript中，interface的只读属性（read-only properties）是一种特殊类型的属性，它限制了属性在初始化后不能被再次赋值。只读属性在定义时使用readonly关键字进行标记，这可以确保对象的某些部分在创建后保持不变，从而有助于维护数据的完整性。

基本用法

定义只读属性的基本语法是在属性名称前加上readonly关键字：

interface Point {
   
   
    readonly x: number;
    readonly y: number;
}

const point: Point = {
   
    x: 10, y: 20 };
point.x = 5; // Error: Cannot assign to 'x' because it is a read-only property.

在这个例子中，Point接口定义了两个只读属性x和y。当你尝试修改这些属性的值时，TypeScript编译器会报错，因为这些属性被声明为只读。

初始化只读属性

只读属性必须在创建对象时被初始化，或者在声明时给出默认值。如果在接口或类中声明只读属性而没有给出初始值，那么它必须在构造函数中初始化。

class Circle {
   
   
    readonly radius: number;

    constructor(radius: number) {
   
   
        this.radius