TypeScript中的type和interface的区别

2023-09-20 03:08:47

TypeScript 中的 type 和 interface 都可以用于定义类型，但两者之间有一些关键区别。Type 可以定义简单的类型，例如数字、字符串和布尔值，而 interface 则可以定义更复杂的类型，例如对象、数组和函数。

语法： type使用 type 来声明，而 interface 使用 interface 关键字来声明。

// 使用 type 定义一个数字类型
type MyNumber = number;

// 使用 interface 定义一个对象类型
interface Person {
  name: string;
  age: number;
}

类型别名与新类型： type是TypeScript中创建别名的语法糖，而interface则创建的是一个全新的类型。使用type创建的类型别名，本質上還是原始類型，而interface創建的是一個interface類型。这意味着 interface 具有更多的功能，例如可以扩展其他接口并定义可选属性。

// 使用 type 创建一个数字类型的别名
type MyNumber = number;

// 使用 interface 创建一个新类型
interface Person {
  name: string;
  age: number;
}

// MyNumber 和 number 是同一个类型
console.log(typeof MyNumber === typeof number); // true

// Person 是一个新类型
console.log(typeof Person === typeof Object); // false

可扩展性和可重用性： interface 支持继承和组合，可以很容易地扩展和重用。Type 别名不可以继承和组合，因此不太适合定义复杂类型。

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

// 定义一个 Student 接口，继承 Person 接口
interface Student extends Person {
  studentId: number;
}

// 创建一个 Student 对象
const student: Student = {
  name: "John Doe",
  age: 20,
  studentId: 123456
};

// Person 接口可以使用 Student 类型
const person: Person = student;

类型推断： 在TypeScript中，类型推断是一种自动推断变量或表达式的类型，type别名不能进行类型推断，只能用于显式地声明类型。而interface可以进行类型推断，有助于简化代码。

// 使用 type 定义一个数字类型的别名
type MyNumber = number;

// 使用 interface 定义一个对象类型
interface Person {
  name: string;
  age: number;
}

// 使用 type 别名定义一个变量
let myNumber: MyNumber = 10;

// 使用 interface 定义一个变量
let person: Person = {
  name: "John Doe",
  age: 20,
};

// TypeScript 可以自动推断出 person 的类型为 Person
console.log(person.name); // "John Doe"