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

定义接口

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

1. interface Person {  
2.     name: string;  
3.     age: number;  
4.     greet: (greeting: string) => void;  
5. }  
6.   
7. let person: Person = {  
8.     name: "Alice",  
9.     age: 30,  
10.     greet: function(greeting: string) {  
11.         console.log(greeting + ", " + this.name);  
12.     }  
13. };  
14.   
15. person.greet("Hello"); // 输出: Hello, Alice

复制代码

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

interface的可选属性是一个非常有用的特性，它答应你在定义接口时指定某些属性不是必须存在的。可选属性可以让你的接口更加机动，实用于多种差别的应用场景，尤其是在处理大概缺少某些属性的对象时。

1. interface Person {
2.     name: string;
3.     age?: number; // 可选属性
4.     address?: string; // 可选属性
5. }

复制代码

利用可选属性

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

1. const alice: Person = {
2.     name: "Alice"
3. };
5. const bob: Person = {
6.     name: "Bob",
7.     age: 30
8. };
10. const charlie: Person = {
11.     name: "Charlie",
12.     age: 25,
13.     address: "123 Elm Street"
14. };

复制代码

访问可选属性

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

1. alice.age; // 编译器警告：可能为 undefined
2. alice.age = 22; // 错误：不能给可选属性赋值，除非已经确定它存在
4. if (alice.age) {
5.     console.log(`Alice is ${alice.age} years old.`);
6. }
8. // 或者使用可选链操作符（?.）
9. console.log(alice?.age); // 如果 alice.age 不存在，则输出 undefined 而不是抛出错误

复制代码

只读属性

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

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

1. interface Point {
2.     readonly x: number;
3.     readonly y: number;
4. }
6. const point: Point = { x: 10, y: 20 };
7. point.x = 5; // Error: Cannot assign to 'x' because it is a read-only property.

复制代码

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

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

1. class Circle {
2.     readonly radius: number;
4.     constructor(radius: number) {
5.         this.radius = radius;
6.     }
7. }
9. const circle = new Circle(5);
10. // circle.radius = 10; // Error: Cannot assign to 'radius' because it is a read-only property.

复制代码

只读数组

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

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

复制代码

只读索引签名

你乃至可以在索引签名中利用readonly关键字，这样就可以创建一个只读的索引范例。

1. interface ReadonlyDictionary<T> {
2.     readonly [key: string]: T;
3. }
5. const dictionary: ReadonlyDictionary<string> = { key: "value" };
6. 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编译器会检查对象是否包罗接口中定义的所有必需属性，并且不答应对象包罗任何额外的属性，除非这些属性被明确地答应。
默认情况下不答应额外的属性

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

1. interface SquareConfig {
2.     color?: string;
3.     width?: number;
4. }

复制代码

如果我们实验将一个具有额外属性的对象赋值给盼望SquareConfig范例的变量，TypeScript将发堕落误：

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

复制代码

答应额外的属性

要答应对象具有超出接口定义的额外属性，可以利用索引签名大概利用特殊的never范例来覆盖默认的检查活动。
利用索引签名

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

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

复制代码

利用never范例

另一种方法是在接口中定义一个返回never范例的索引签名，然后在利用该接口的地方添加一个额外的范例，该范例答应额外的属性：

1. interface SquareConfig {
2.     color?: string;
3.     width?: number;
4.     [propName: string]: never; // 默认情况下禁止额外属性
5. }
7. function createSquare(config: SquareConfig): { color: string; area: number } {
8.     // ...
9. }
11. // 使用类型断言来允许额外属性
12. const configWithExtraProps: SquareConfig & { extra: boolean } = {
13.     color: "blue",
14.     width: 100,
15.     extra: true
16. };
18. createSquare(configWithExtraProps); // 不会报错

复制代码

函数范例接口

接口（interface）不仅可以用来定义对象的形状，包罗它们应该拥有的属性和方法，还可以用来定义函数范例。通过接口来形貌函数范例，可以确保函数具有预期的参数范例和返回范例，从而进步代码的结实性和可维护性。
根本的函数范例接口

当你想要定义一个函数范例时，可以在接口中直接形貌该函数的参数和返回值的范例。函数范例的接口通常不包罗属性，而是直接包罗一个或多个函数签名。

1. interface SearchFunc {
2.     (source: string, subString: string): boolean;
3. }
5. // 使用函数类型接口
6. let mySearch: SearchFunc;
7. mySearch = function(source: string, subString: string): boolean {
8.     return source.search(subString) !== -1;
9. };
11. // 或者使用箭头函数
12. mySearch = (source: string, subString: string): boolean => {
13.     return source.includes(subString);
14. };
16. // 直接赋值给变量时，TypeScript 可以自动推断类型，但接口提供了显式声明
17. let anotherSearch: SearchFunc = (src, sub) => src.includes(sub);

复制代码

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

接口（interface）的可索引范例（Indexed Types）答应你定义对象的索引签名，这些索引签名形貌了当利用索引（如数组索引或对象的键）访问对象时，应该返回什么范例的值。这种范例定义对于数组、字典（对象字面量作为映射）或其他类似的集合非常有用。
根本语法

可索引范例通过[key: Type]: ValueType;的情势来定义，此中key是索引的范例（如number或string），ValueType是当访问索引时返回值的范例。
数组范例

固然你通常不会直接为数组范例定义一个接口（由于TypeScript已经内置了数组范例），但了解可索引范例怎样与数组类似的结构一起工作是有资助的。

1. interface NumberArray {
2.     [index: number]: number;
3. }
5. let myArray: NumberArray = [1, 2, 3];
6. // 正确，因为数组的每个元素都是数字
8. // myArray = ['a', 2, 3]; // 错误，因为数组中有非数字元素

复制代码

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

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

1. interface StringMap {
2.     [key: string]: any; // 注意：这里使用any作为示例，但在实际应用中，最好指定更具体的类型
3. }
5. let myMap: StringMap = {
6.     'name': 'Alice',
7.     'age': 30,
8.     'city': 'New York'
9. };
11. // 访问和设置值
12. console.log(myMap['name']); // 输出: Alice
13. myMap['country'] = 'USA';

复制代码

类范例

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

当你利用接口来形貌一个类范例时，你实际上是在定义该类的实例必须服从的形状（shape）。这意味着类的实例必须包罗接口中声明的所有属性和方法。

1. interface Point {
2.     x: number;
3.     y: number;
4.     moveTo(x: number, y: number): void;
5. }
7. class SomePoint implements Point {
8.     x: number;
9.     y: number;
11.     constructor(x: number, y: number) {
12.         this.x = x;
13.         this.y = y;
14.     }
16.     moveTo(x: number, y: number): void {
17.         this.x = x;
18.         this.y = y;
19.     }
20. }
22. let point: Point = new SomePoint(1, 2);
23. point.moveTo(3, 4);

复制代码

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

必要注意的是，接口只能形貌类的实例部门，即类的属性和方法（不包罗构造函数）的形状。接口不能形貌类的静态部门，即那些直接附加到类本身而不是其实例上的属性和方法。
如果你必要形貌一个包罗静态成员的类的形状，你大概必要利用范例别名（Type Aliases）共同typeof关键字来创建一个范例，该范例形貌了类的静态部门。但是，这通常不是通过接口来实现的。
类的构造函数

固然接口不能直接形貌类的构造函数，但你可以通过定义一个包罗构造函数签名的接口来间接地形貌它。然而，这种方法并不常见，由于TypeScript通常通过类本身或范例别名来处理构造函数范例。
不外，你可以利用接口来定义一个构造函数签名，并通过实现该接口的类来间接地实现这个构造函数签名。但是，这通常是通过在类上定义一个静态方法来模拟的，由于TypeScript不答应直接通过接口来强制实现特定的构造函数。
泛型接口与类

接口还可以与泛型一起利用，以定义可以或许工作于多种范例上的类的形状。这使得接口更加机动和强大。

1. interface GenericIdentityFn<T> {
2.     (arg: T): T;
3. }
5. function identity<T>(arg: T): T {
6.     return arg;
7. }
9. 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：

1. interface Shape {
2.     color: string;
3. }
5. interface Rectangle extends Shape {
6.     width: number;
7.     height: number;
8. }
10. let rect: Rectangle = { color: "blue", width: 10, height: 5 };

复制代码

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

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

1. interface Labelled {
2.     label: string;
3. }
5. interface Sized {
6.     size: number;
7. }
9. interface LabelledSized extends Labelled, Sized {
10.     // 新的接口包含label和size属性
11. }
13. let box: LabelledSized = { label: "Box", size: 100 };

复制代码

添加新成员

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

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

复制代码

精确的做法是添加一个重载，大概创建一个新方法：

1. interface EnhancedPrintable extends Printable {
2.     print(format?: string): void;
3. }

复制代码

与类的交互

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

1. class Base {
2.     public baseMethod(): void {
3.         // ...
4.     }
5. }
7. interface DerivedFromBase extends Base {
8.     derivedMethod(): void;
9. }
11. class DerivedClass implements DerivedFromBase {
12.     baseMethod(): void {
13.         // 实现baseMethod
14.     }
15.     derivedMethod(): void {
16.         // 实现derivedMethod
17.     }
18. }

复制代码

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

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

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

假设你有一个如下的类：

1. class BaseClass {
2.     public prop: string;
3.     protected method(): void {
4.         // 方法实现
5.     }
6. }

复制代码

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

1. interface DerivedFromBaseClass extends BaseClass {}

复制代码

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

1. class NewClass implements DerivedFromBaseClass {
2.     prop: string;
3.     method(): void {
4.         // 实现方法
5.     }
6. }

复制代码

注意点

• 实现与继承的区别：
  
  
  
  • 当一个类实现一个接口时，它必须提供接口中所有成员的详细实现。
    
  • 类的继承关系中，子类可以继承父类的实现，而不仅仅是签名。
    
  
  
• 成员访问修饰符：
  
  
  
  • 接口中的成员默认是公共的，纵然在类中它们大概是受保护的或私有的。
    
  • 如果类中的成员是私有的（private），它们不会被包罗在从类中提取的接口中。
    
  
  
• 静态成员：
  
  
  
  • 类的静态成员不会被包罗在从类中提取的接口中，由于接口重要用于形貌对象的结构，而静态成员不属于对象实例。
    
  
  
• 构造函数：
  
  
  
  • 类的构造函数不会被包罗在从类中提取的接口中，由于接口不能形貌构造函数签名。
    
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。