2 年前TypeScript3 分钟读完 (大约 466 个字)

TypeScript中type（类型别名）和interface（接口）的区别

type 和 interface 存在着很大的相同点，也存在不同点。

整理一下两者的基本概念、相同点、区别。

type

type就是类型别名，type可以表示基本类型、对象、联合类型、元组、交集。

定义类型别名

// 基本类型
type name = string
type age = number

// 对象类型
type Person = {
    name: string;
    age: number;
}

// 联合类型
type id = string | number

使用类型别名

let p: Person = {
    name: 'wang',
    age: 22,
}

同时，type中的类型也可以是其他已经定义的类型别名。

interface

interface就是接口。

interface只能描述对象的类型。

定义接口

interface Person {
    name: string;
    age: number;
}

同时，interface中的类型也可以是其他已经定义的接口。

相同点

都可以用来描述对象类型。
都可以用来描述函数。

// type描述函数的入参类型和返回值类型
type FunctionType = (a: number, b: number) => number

// interface描述函数的入参类型和返回值类型
interface FunctionInterface {
    (a: numnber, b: number): number
}

都可以实现继承

type可以继承type，interface可以继承interface。
同时，type和interface也可以相互继承。

type通过 & 继承type或者interface。
interface通过 extends 继承type或者interface。

// type继承type
type Person = {
    name: string;
    age: number;
}

type Engineer = Person & {
    occupation: string
}

// interface继承interface
interface Person {
    name: string;
    age: number;
}

interface Engineer extends Person {
   occupation: string
}

// type继承interface
interface Person {
    name: string;
    age: number;
}

type Engineer = Person & {
    occupation: string
}

// interface继承type
type Person = {
    name: string;
    age: number;
}

interface Engineer extends Person {
    occupation: string
}

都可以使用可选属性 [propName] ?: [type]

不同点

type可以基本类型、联合类型、元组类型而interface不可以。

// 描述元组
type Item = [string, number]

定义多个同名的interface可以合并，而定义多个同名的type会报错。

总结

优先用interface。