在使用ts的type 和 interface时
两者作用(简单案例)
interface只能定义对象数据结构类型。
// 简单案例1
interface User {
name: string;
age: number;
sex?: string;
}
let user: User = {
name: '',
age: 233
};
// 简单案例2
interface User1<T> {
name: string;
age: number;
sex?: string;
details?: T;
}
const userObj: User1<{
hobby: string;
}> = {
name: '',
age: 233,
details: {
hobby: '爱好吃饭',
}
};
type侧重于直接定义类型
type 可用于 string、number、bool、undefined、null,而 interface 只能描述对象(含数组、函数、包装对象、元组)
type 还可以给一个或多个类型起一个新名称(当变量用)
type Demo = string | number; // 赋值
let test1: Demo = 1;
let test2: Demo = '';
type当然也能定义对象类型
type Demo = {
[propname: string]: any
};
type Demo<T> = {
[propname: string]: T;
};
type 和 interface 相同点
相同1:type 和 interface都支持扩展
// type 扩展
type myObj = {
name: string;
}
// &符号
type myObjPlus = myObj & { age: number };
const newObj: myObjPlus = {
name: '',
age: 233
};
// interface 扩展
interface myObj {
name: string;
};
// extends继承扩展
interface myObjPlus extends myObj {
age: number;
};
const newObj: myObjPlus = {
name: '',
age: 233
};
// 当然两者都支持互相交叉扩展
// 情况1
type myObj = {
name: string;
};
interface myObjPlus extends myObj {
age: number;
};
const newObj: myObjPlus = {
name: '',
age: 233
};
// 情况2
interface user {
age: number;
};
type myUser = {
name: string;
} & user;
const newObj: myUser = {
name: '',
age: 233
};
type 和 interface 不同点
区别1: type 可以为基本类型,联合类型 或 元组 甚至any等等 赋值定义别名,interface 明显办不到
type A = string;
type B = string | unknown;
type C = B | [ 1, 2 ,3 ,4]; // 赋值当变量用
let test: C = '';
区别2: interface 定义重名了会合并属性,type 办不到(会报错提醒 重复定义)
// interface 定义重名了会合并属性,很多库ts源码里面都用到过类似方法作为扩展
interface A {
name: string;
}
interface A {
age: number;
}
const aObj: A = {
name: '', // 必须
age: 233 // 必须
};
使用场景
type 的一般使用场景
- 一般定义基本或联合类型
- 一般定义元组类型
- 一般定义函数类型
- 定义映射类型
interface 的使用场景
- 需要interface 重名会自动合并属性扩展的
- 定义对象数据结构(不使用type时)
总结
除了使用场景区别,type 声明的算是类型别名,而 interface 声明的是一个新类型。
(PS:其实自己确实可以想怎么定义就怎么定义,但为了标准化 最好还是得规范点)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。