探索TypeScript中的interface和type：入门指南

前端

2023-11-21 13:37:46

TypeScript中interface和type是强大的类型系统，有助于开发人员创建可维护和可扩展的应用程序。interface和type都允许定义对象类型，但它们在语法和语义上存在差异。

1. interface和type的区别

语法差异：

interface: 定义语法为interface InterfaceName { ... }。
type: 定义语法为type TypeName = ...。

语义差异：

interface: 是一种引用类型 ，可以被其他类型继承或扩展，实现代码重用和接口契约的实现。
type: 是一种值类型 ，无法被其他类型继承，但可以被其他类型使用。

2. 常见场景

interface 常用于：

定义对象类型，允许类型之间具有层级关系，实现代码的扩展和重用。
定义函数类型，函数的参数和返回值类型，以便代码具有良好的可读性和可维护性。

type 常用于：

定义简单的对象类型，例如键值对或元组类型。
定义联合类型，表示多个可能的类型。
定义字面量类型，指定精确的值。

3. 综合示例

以下是一个综合示例，展示了interface和type的用法：

// 定义一个接口Person对象
interface Person {
  name: string;
  age: number;
}

// 定义一个类型别名描述Address对象
type Address = {
  street: string;
  city: string;
  state: string;
}

// 定义一个Person类型的变量
const person: Person = {
  name: "John Doe",
  age: 30
};

// 定义一个Address类型的变量
const address: Address = {
  street: "123 Main Street",
  city: "Anytown",
  state: "CA"
};

// 使用接口和类型别名定义一个函数
function greet(person: Person, address: Address) {
  console.log(`Hello, ${person.name}! You live at ${address.street}.`);
}

// 调用greet函数
greet(person, address);