基本介绍
Type 与 Interface的区别
- 编写方式
- 继承方式
Type 的优势
- Interface只能描述对象，而Type还可以描述其他类型如
string，number，boolean等 - Type可以描述联合类型和Interface不行
- Type在使用Utility Types时更简洁
- Type在使用Tuples时更简洁
- Type可以从其他地方直接抽取类型
- Interface会自动合并，而Type不会
Type 与 Interface的区别
- 编写方式
type UserProps = {
name: string;
age: number;
}
interface UserProps {
name: string;
age: number;
}
- 继承方式
// type 写法
type UserProps = {
name: string;
age: number;
}
type AdminProps = UserProps & {
role: string
}
// interface 写法
interface UserProps {
name: string;
age: number;
}
interface AdminProps extends UserProps {
role: string
}
Type 相较于 Interface的优势
- Interface只能描述对象，而Type还可以描述其他类型如
string，number，boolean等
type Address = string
- Type可以描述联合类型和Interface不行
type Address = string | string[]
- Type在使用Utility Types时更简洁
type UserProps = {
name: string;
age: number;
createAt : Date
}
// 在UserProps的基础上去掉createAt
type GuestProps = Omit<UserProps, "createAt">
// 如果删除多个
type GuestProps = Omit<UserProps, "name" | "age">
// 如果使用interface，将会是：
interface GuestProps extends Omit<UserProps, "name" | "age">
- Type在使用Tuples时更简洁
type Address = [string, number]
// 如果使用interface，将会是：
interface Address extends Array<number | string>{
0: number;
1: string
}
- Type可以从其他地方直接抽取类型
const project = {
title: "Project 1",
specification: {
areaSize: 100,
rooms: 3
}
}
// 抽取全部类型
type Specification = typeof project
// --- 等价于：
type Specification = {
title: string;
specification: {
areaSize: number;
rooms: number;
}
}
// 抽取里边的specification类型
type Specification = typeof project["specification"]
// --- 等价于：
type Specification = {
areaSize: number;
rooms: number;
}
- Interface会自动合并，而Type不会
interface User{
name: string;
age: number;
}
interface User{
role: string;
}
let user:User
// Type不允许声明两个同名的type