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 = radius;
    }
}

const circle = new Circle(5);
// circle.radius = 10; // Error: Cannot assign to 'radius' because it is a read-only property.

只读数组

readonly关键字也可以应用于数组类型，创建一个只读数组。只读数组不允许添加、删除或修改元素。

let numbers: readonly number[] = [1, 2, 3];
numbers.push(4); // Error: Property 'push' does not exist on type 'readonly number[]'.
numbers.pop();   // Error: Property 'pop' does not exist on type 'readonly number[]'.

只读索引签名

你甚至可以在索引签名中使用readonly关键字，这样就可以创建一个只读的索引类型。

interface ReadonlyDictionary<T> {
    readonly [key: string]: T;
}

const dictionary: ReadonlyDictionary<string> = { key: "value" };
dictionary.key = "new value"; // Error: Cannot assign to 'key' because it is a read-only or constant property.

只读属性的使用场景

只读属性在以下场景中特别有用：

• 当你希望某些数据在对象创建后保持不变时，比如配置或常量。
• 当你想要保证数据的不可变性，以提高程序的并发安全性。
• 当你想要防止不小心修改数据，尤其是在复杂的代码库中，这有助于避免潜在的bug。

额外属性

在TypeScript中，接口（interface）的额外属性检查（Excess Property Checking）是一种类型检查机制，它确保对象没有包含接口定义中不存在的额外属性。这有助于保持代码的健壮性和一致性，避免因无意中向对象添加不必要的属性而导致的潜在问题。

额外属性检查的规则

当一个对象被赋值给一个期望特定接口类型的变量或参数时，TypeScript编译器会检查对象是否包含接口中定义的所有必需属性，并且不允许对象包含任何额外的属性，除非这些属性被明确地允许。

默认情况下不允许额外的属性

假设我们有一个简单的接口定义：

interface SquareConfig {
    color?: string;
    width?: number;
}

如果我们尝试将一个具有额外属性的对象赋值给期望SquareConfig类型的变量，TypeScript将发出错误：

let config: SquareConfig = {
    color: "blue",
    width: 100,
    extra: true // 错误: Object literal may only specify known properties, and 'extra' does not exist in type 'SquareConfig'.
};

允许额外的属性

要允许对象具有超出接口定义的额外属性，可以使用索引签名或者使用特殊的never类型来覆盖默认的检查行为。

使用索引签名

通过在接口中添加一个索引签名，你可以指定额外属性的类型：

interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any; // 允许任何额外属性
}

使用never类型

另一种方法是在接口中定义一个返回never类型的索引签名，然后在使用该接口的地方添加一个额外的类型，该类型允许额外的属性：

interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: never; // 默认情况下禁止额外属性
}

function createSquare(config: SquareConfig): { color: string; area: number } {
    // ...
}

// 使用类型断言来允许额外属性
const configWithExtraProps: SquareConfig & { extra: boolean } = {
    color: "blue",
    width: 100,
    extra: true
};

createSquare(configWithExtraProps); // 不会报错

函数类型接口

接口（interface）不仅可以用来定义对象的形状，包括它们应该拥有的属性和方法，还可以用来定义函数类型。通过接口来描述函数类型，可以确保函数具有预期的参数类型和返回类型，从而提高代码的健壮性和可维护性。

基本的函数类型接口

当你想要定义一个函数类型时，可以在接口中直接描述该函数的参数和返回值的类型。函数类型的接口通常不包含属性，而是直接包含一个或多个函数签名。

interface SearchFunc {
    (source: string, subString: string): boolean;
}

// 使用函数类型接口
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string): boolean {
    return source.search(subString) !== -1;
};

// 或者使用箭头函数
mySearch = (source: string, subString: string): boolean => {
    return source.includes(subString);
};

// 直接赋值给变量时，TypeScript 可以自动推断类型，但接口提供了显式声明
let anotherSearch: SearchFunc = (src, sub) => src.includes(sub);

在这个例子中，SearchFunc接口定义了一个函数类型，该函数接受两个字符串参数source和subString，并返回一个布尔值。任何符合这个签名的函数都可以被赋值给mySearch变量。

可索引的类型

接口（interface）的可索引类型（Indexed Types）允许你定义对象的索引签名，这些索引签名描述了当使用索引（如数组索引或对象的键）访问对象时，应该返回什么类型的值。这种类型定义对于数组、字典（对象字面量作为映射）或其他类似的集合非常有用。

基本语法

可索引类型通过[key: Type]: ValueType;的形式来定义，其中key是索引的类型（如number或string），ValueType是当访问索引时返回值的类型。

数组类型

虽然你通常不会直接为数组类型定义一个接口（因为TypeScript已经内置了数组类型），但了解可索引类型如何与数组类似的结构一起工作是有帮助的。

interface NumberArray {
    [index: number]: number;
}

let myArray: NumberArray = [1, 2, 3];
// 正确，因为数组的每个元素都是数字

// myArray = ['a', 2, 3]; // 错误，因为数组中有非数字元素

注意：在实际应用中，你通常会直接使用number[]或Array<number>来表示数字数组，而不是定义一个具有可索引签名的接口。

字符串索引的映射

对于对象（通常用作字典或映射），你可以使用字符串作为索引的类型。

interface StringMap {
    [key: string]: any; // 注意：这里使用any作为示例，但在实际应用中，最好指定更具体的类型
}

let myMap: StringMap = {
    'name': 'Alice',
    'age': 30,
    'city': 'New York'
};

// 访问和设置值
console.log(myMap['name']); // 输出: Alice
myMap['country'] = 'USA';

类类型

在TypeScript中，接口（interface）的类类型（Class Types）并不是指接口本身直接定义了一个类，而是指接口可以被用来描述一个类的实例应该具有哪些属性和方法。这种描述方式允许你定义一种契约（contract），任何实现了这个契约的类（即其实例符合接口定义的类）都可以被当作该接口类型的实例来使用。

基本用法

当你使用接口来描述一个类类型时，你实际上是在定义该类的实例必须遵守的形状（shape）。这意味着类的实例必须包含接口中声明的所有属性和方法。

interface Point {
    x: number;
    y: number;
    moveTo(x: number, y: number): void;
}

class SomePoint implements Point {
    x: number;
    y: number;

    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }

    moveTo(x: number, y: number): void {
        this.x = x;
        this.y = y;
    }
}

let point: Point = new SomePoint(1, 2);
point.moveTo(3, 4);

在这个例子中，Point接口定义了一个点应该具有x和y两个属性，以及一个moveTo方法。SomePoint类通过实现Point接口，明确表明其实例将具有这些属性和方法。因此，SomePoint的实例可以被赋值给Point类型的变量。

类的静态部分和实例部分

需要注意的是，接口只能描述类的实例部分，即类的属性和方法（不包括构造函数）的形状。接口不能描述类的静态部分，即那些直接附加到类本身而不是其实例上的属性和方法。

如果你需要描述一个包含静态成员的类的形状，你可能需要使用类型别名（Type Aliases）配合typeof关键字来创建一个类型，该类型描述了类的静态部分。但是，这通常不是通过接口来实现的。

类的构造函数

虽然接口不能直接描述类的构造函数，但你可以通过定义一个包含构造函数签名的接口来间接地描述它。然而，这种方法并不常见，因为TypeScript通常通过类本身或类型别名来处理构造函数类型。

不过，你可以使用接口来定义一个构造函数签名，并通过实现该接口的类来间接地实现这个构造函数签名。但是，这通常是通过在类上定义一个静态方法来模拟的，因为TypeScript不允许直接通过接口来强制实现特定的构造函数。

泛型接口与类

接口还可以与泛型一起使用，以定义能够工作于多种类型上的类的形状。这使得接口更加灵活和强大。

interface GenericIdentityFn<T> {
    (arg: T): T;
}

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

let myIdentity: GenericIdentityFn<number> = identity;

在这个例子中，GenericIdentityFn是一个泛型接口，它描述了一个接受一个类型参数T的函数，该函数接受一个T类型的参数并返回相同类型的值。然后，我们定义了一个泛型函数identity，它实现了GenericIdentityFn接口（对于任何类型T）。最后，我们创建了一个GenericIdentityFn<number>类型的变量myIdentity，并将其初始化为identity函数的一个实例（这里我们隐式地指定了T为number）。

接口的继承

在TypeScript中，interface支持继承，这是一种非常强大的特性，它允许你创建新的interface，这些interface会继承现有interface的属性和方法。继承在interface中的工作方式与类的继承相似，但有一些关键的不同点，尤其是interface可以多重继承，而类不可以。

继承单一interface

你可以从一个interface继承来扩展或覆盖已有的类型定义。假设你有两个interface，一个描述了一个简单的Shape，另一个描述了一个更具体的Rectangle：

interface Shape {
    color: string;
}

interface Rectangle extends Shape {
    width: number;
    height: number;
}

let rect: Rectangle = { color: "blue", width: 10, height: 5 };

在这个例子中，Rectangle interface从Shape interface继承了color属性，并添加了自己的width和height属性。

多重继承

interface的一个强大特性是它们可以继承多个interface。这意味着你可以组合多个不同特性的interface到一个新的interface中：

interface Labelled {
    label: string;
}

interface Sized {
    size: number;
}

interface LabelledSized extends Labelled, Sized {
    // 新的接口包含label和size属性
}

let box: LabelledSized = { label: "Box", size: 100 };

添加新成员

在继承interface时，你可以添加新的成员，也可以覆盖已有的成员，但不能改变成员的类型签名。例如，你不能在继承的interface中改变一个方法的参数列表或返回类型。

interface Printable {
    print(): void;
}

interface EnhancedPrintable extends Printable {
    print(format: string): void; // 错误：不能改变已有成员的类型签名
}

正确的做法是添加一个重载，或者创建一个新方法：

interface EnhancedPrintable extends Printable {
    print(format?: string): void;
}

与类的交互

interface可以被类实现（implements），这样类就必须提供interface中所有成员的实现。同样，interface可以继承自类的公共成员，但不能继承其实现细节：

class Base {
    public baseMethod(): void {
        // ...
    }
}

interface DerivedFromBase extends Base {
    derivedMethod(): void;
}

class DerivedClass implements DerivedFromBase {
    baseMethod(): void {
        // 实现baseMethod
    }
    derivedMethod(): void {
        // 实现derivedMethod
    }
}

在上面的例子中，DerivedFromBase interface继承了Base类的baseMethod方法签名，然后DerivedClass实现了这两个方法。

接口继承类

在TypeScript中，接口（Interface）继承类（Class）的概念并不是直接的继承关系，而是指接口可以“借用”类的公共成员（属性和方法）来扩展自身的定义。这在TypeScript中被称为“从类中提取接口”，或者说是“从类中继承接口”。

从类中继承接口

当你想从一个类中提取公共的成员定义到接口中，以便其他类可以共享这些成员的签名，你可以创建一个接口并使用类名作为接口定义的一部分。TypeScript会自动分析类的公共成员并将它们添加到接口中。注意，只有类的公共（public）、受保护（protected）和声明的（declare）成员会被包含在接口中。

示例：

假设你有一个如下的类：

class BaseClass {
    public prop: string;
    protected method(): void {
        // 方法实现
    }
}

你可以在另一个文件或同一文件中定义一个接口，该接口将“继承”或“借用”BaseClass的公共和受保护成员：

interface DerivedFromBaseClass extends BaseClass {}

现在，DerivedFromBaseClass接口将包含prop属性和method方法的签名。然后，你可以使用这个接口来定义新的类，这些类将自动拥有BaseClass的公共和受保护成员的签名：

class NewClass implements DerivedFromBaseClass {
    prop: string;
    method(): void {
        // 实现方法
    }
}

注意点

1. 实现与继承的区别：

   • 当一个类实现一个接口时，它必须提供接口中所有成员的具体实现。
   • 类的继承关系中，子类可以继承父类的实现，而不仅仅是签名。

2. 成员访问修饰符：

   • 接口中的成员默认是公共的，即使在类中它们可能是受保护的或私有的。
   • 如果类中的成员是私有的（private），它们不会被包含在从类中提取的接口中。

3. 静态成员：

   • 类的静态成员不会被包含在从类中提取的接口中，因为接口主要用于描述对象的结构，而静态成员不属于对象实例。

4. 构造函数：

   • 类的构造函数不会被包含在从类中提取的接口中，因为接口不能描述构造函数签名。