TypeScript 中,interface 和 type 的区别

目录
  1. 相同点
  2. 区别

TypeScript 中,interfacetype 主要用于类型的声明,它们的相同点以及区别如下:

相同点

✅ 都可以描述一个对象或者函数

1
2
3
4
5
6
7
8
9
/* interface */
interface User {
name: string
age: number
}

interface SetUser {
(name: string, age: number): string
}
1
2
3
4
5
6
7
8
9
/* type */
type User = {
name: string
age: number
}

type SetUser = {
(name: string, age: number): string
}

✅ 都可以进行拓展

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
interface User {
name: string
age: number
}
type VipUserType = {
readonly vip: boolean
}

interface ProUser extends User {
email: string
}

/* interface 和 type 拓展*/
interface VipUserInterfce extends VipUserType {
member: boolean
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
type User = {
name: string
age: number
}

type ProUser = User & {
email: string
}

interface VipUserInterface {
readonly vip: boolean
}

/* type 与 interface 拓展 */
type VipUserType = VipUserInterface & {
member: boolean
}

区别

⚠️type 可以声明基本类型别名,联合类型,元组类型,而 interface 不可以

1
2
3
4
5
6
7
8
9
10
11
12
/* 基本类型 */
type Name = string

/* 联合类型 */
interface Dog {}
interface Cat {}

type Pet = Dog | Cat

/* 元组类型 */

type PetList = [Dog, Cat]

⚠️interface 可以进行类型合并,而 type 不可以

关于 declaration-merging

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
interface Cloner {
clone(animal: Animal): Animal
}

interface Cloner {
clone(animal: Sheep): Sheep
}

interface Cloner {
clone(animal: Dog): Dog
clone(animal: Cat): Cat
}

// 以上三个 interface 会被合并成一个声明
interface Cloner {
clone(animal: Dog): Dog
clone(animal: Cat): Cat
clone(animal: Sheep): Sheep
clone(animal: Animal): Animal
}

问题讨论区

上次更新 2019-07-18