⼀分钟带你搞清楚ts中interface和type的概念和⽤法（较全）
⽂章⽬录
前⾔
提⽰：刚学习TS 的新⼿看到type 和 interface 会分不清楚什么场景下怎么使⽤，所以写⼀篇⽂章总结⼀下
⼀、概念
type : 类型别名
概念：可以给⼀个或多个数据类型（string、number、…）取⼀个别名；
举例：
type dataType=number (给⼀个)
type dataType=number | string | turple
interface：接⼝
概念：定义参数或⽅法的数据类型；
⼆、两者的异同
1.相同点
1. 都可以描述⼀个对象或者函数
interface
interface User {
name: string;
age: number;
}
interface SetUser {
(name: string, age: number):void;
}
type
type User ={
name: string;
age: number
}
typeof的用法type SetUser =(name: string, age: number):void;
2、interface和type都可以拓展，并且两者并不是互相独⽴的，也就是说interface可以extends type, type也可以extends interface. 虽然效果差不多，但是语法不同。
interface extends interface
interface Name {
name: string;
}
interface User extends Name {
age: number;
}
type extends type
type Name ={
name: string;
}
type User = Name &{ age: number }
interface extends type
type Name ={
name: string;
}
interface User extends Name {
age: number;
}
type extends interface
interface Name {
name: string;
}
type User = Name &{
age: number;
}
2.不同点
1 类型别名可以⽤于其它类型 （联合类型、元组类型、基本类型（原始值）），interface不⽀持
type PartialPointX ={ x: number };
type PartialPointY ={ y: number };
// union(联合)
type PartialPoint = PartialPointX | PartialPointY;
// tuple(元祖)
type Data =[PartialPointX, PartialPointY];
//primitive(原始值)
type Name = Number;
/
/ typeof的返回值
let div = ateElement('div');
type B =typeof div;
2 interface 可以多次定义 并被视为合并所有声明成员 type 不⽀持
interface Point {
x: number;
}
interface Point {
y: number;
}
const point: Point ={ x:1, y:2};
```c
interface User {
name: string;
age: number;
}
interface User {
sex: string;
}
//User接⼝为：
{
name: string;
age: number;
sex: string;
}
3 type 能使⽤ in 关键字⽣成映射类型，但 interface 不⾏。
type Keys ='firstname'|'surname';
type DudeType ={
[key in Keys]: string;
};
const test: DudeType ={
firstname:'Pawel',
surname:'Grzybek',
};
4 默认导出⽅式不同
// inerface ⽀持同时声明，默认导出⽽type必须先声明后导出
export default interface Config {
name: string;
}
// 同⼀个js模块只能存在⼀个默认导出哦
type Config2 ={name: string}
export default Config2
type其他骚操作
type StringOrNumber = string | number;
type Text = string |{ text: string };
type NameLookup = Dictionary<string, Person>;
type Callback<T>=(data: T)=>void;
type Pair<T>=[T, T];
type Coordinates = Pair<number>;
type Tree<T>= T |{ left: Tree<T>, right: Tree<T>};
总结
⼀般来说，能⽤interface实现，就⽤interface，如果不能就⽤type、欢迎补充

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。