一分钟带你搞清楚ts中 interface 和 type 的概念和用法（较全）

2024年4月2日 互联网

文章目录

  • 前言
  • 一、概念
  • 二、两者的异同
    • 1.相同点
    • 2.不同点
  • 总结

前言

提示：刚学习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
}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 typetype 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 = document.createElement('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、欢迎补充

最新文章