typescript学习笔记——（二）接口：打牢基础，轻松驾驭TypeScript

2023-10-31 23:12:49

TypeScript接口

TypeScript中，接口用于为类型命名和为代码或第三方代码定义契约或约束。接口类似于C#或Java中的接口，但TypeScript中的接口更灵活，因为它允许定义可选和只读属性。

什么时候该使用接口呢？

我们先看下面的一个示例。

function printName(name: string): void {
  console.log(name);
}

printName("John");
printName(10); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

在这个例子中，我们定义了一个函数printName()，它接收一个字符串参数并将其打印到控制台。如果我们不小心将一个数字传递给printName()函数，TypeScript编译器会报错，因为数字不能赋值给字符串类型。

为了防止这种情况发生，我们可以使用接口来定义函数的参数类型。

interface Person {
  name: string;
}

function printName(person: Person): void {
  console.log(person.name);
}

printName({ name: "John" }); // OK
printName({ age: 30 }); // Error: Argument of type '{ age: number; }' is not assignable to parameter of type 'Person'.

现在，当我们尝试将一个数字传递给printName()函数时，TypeScript编译器会报错，因为数字不符合Person接口的定义。

接口的定义

接口的定义与类或枚举类似，可以使用interface。接口可以包含属性、方法和事件的定义。

interface Person {
  name: string;
  age: number;

  greet(): void;
}

这个接口定义了一个Person类型，它具有两个属性name和age，以及一个方法greet()。

接口的应用场景

接口可以用于多种场景，包括：

类型别名：接口可以用于创建类型别名，这有助于提高代码的可读性和可维护性。
继承：接口可以用于定义继承关系，这有助于创建更具组织性和可重用的代码。
组合：接口可以用于组合多个接口，这有助于创建更复杂的类型。
扩展：接口可以用于扩展其他接口，这有助于添加新的属性或方法到现有的接口。
命名空间：接口可以用于创建命名空间，这有助于组织和分组相关的类型。

深入解析TypeScript接口

1. 类型别名

接口可以用于创建类型别名，这有助于提高代码的可读性和可维护性。

type Person = {
  name: string;
  age: number;
};

const person: Person = {
  name: "John",
  age: 30
};

在这个例子中，我们使用type关键字创建了一个Person类型别名，它具有两个属性name和age。然后，我们使用这个类型别名来定义了一个person变量，它是一个Person类型的值。

2. 继承

接口可以用于定义继承关系，这有助于创建更具组织性和可重用的代码。

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

const dog: Dog = {
  name: "Spot",
  breed: "Golden Retriever"
};

在这个例子中，我们定义了一个Animal接口，它具有一个属性name。然后，我们定义了一个Dog接口，它继承了Animal接口，并添加了一个新的属性breed。最后，我们使用Dog接口定义了一个dog变量，它是一个Dog类型的值。

3. 组合

接口可以用于组合多个接口，这有助于创建更复杂的类型。

interface Person {
  name: string;
}

interface Employee {
  id: number;
  salary: number;
}

interface Manager extends Person, Employee {
  department: string;
}

const manager: Manager = {
  name: "John",
  id: 12345,
  salary: 100000,
  department: "Sales"
};

在这个例子中，我们定义了三个接口：Person、Employee和Manager。Manager接口继承了Person和Employee接口，并添加了一个新的属性department。最后，我们使用Manager接口定义了一个manager变量，它是一个Manager类型的值。

4. 扩展

接口可以用于扩展其他接口，这有助于添加新的属性或方法到现有的接口。

interface Person {
  name: string;
}

interface Person {
  age: number;
}

const person: Person = {
  name: "John",
  age: 30
};

在这个例子中，我们首先定义了一个Person接口，它具有一个属性name。然后，我们使用interface关键字来扩展Person接口，并添加了一个新的属性age。最后，我们使用扩展后的Person接口定义了一个person变量，它是一个Person类型的值。

5. 命名空间

接口可以用于创建命名空间，这有助于组织和分组相关的类型。

namespace MyNamespace {
  export interface Person {
    name: string;
  }

  export interface Employee {
    id: number;
    salary: number;
  }
}

const person: MyNamespace.Person = {
  name: "John"
};

const employee: MyNamespace.Employee = {
  id: 12345,
  salary: 100000
};

在这个例子中，我们创建了一个命名空间MyNamespace，并在其中定义了两个接口：Person和Employee。然后，我们使用export关键字将这两个接口导出到全局作用域。最后，我们使用命名空间的名称来访问这两个接口，并定义了两个变量：person和employee。

总结

TypeScript接口是一种强大的类型定义工具，它可以帮助开发者创建更具结构和可读性的代码。本文深入探讨了TypeScript接口的定义、使用场景以及如何将接口用于类型别名、继承、组合、扩展和命名空间。通过学习本教程，开发者将对TypeScript接口的应用有更深入的理解，并能够将其应用于实际项目中。