1、引言
在平时写项目的时候经会碰见一些ts内置的关键字,一眼看上去非常陌生,因为不清楚其用法所以一看见心情就比较暴躁,心血来潮,打开某度疯狂搜索,把看到的搬到大家眼前,再加上一些自己写的例子,希望能让和我一样的你能看懂。
2、常用类型
type 类型别名 用于给类型起一个新名字
type value = string;
const v:Value = '1';
interface 接口 用于声明类型
interface Obj {
name: string;
age: number;
}
type 和 interface的区别
1、type可以定义单个变量类型、联合类型、交叉类型、对象,interface只能定义对象; 2、type不可以重复声明,interface可以重复声明(声明合并);
// 单个变量类型
type Value2 = number;
// 联合类型
type Value3 = number | string | boolean | undefined | null;
// 对象
type Obj7 = {
name: string;
age: number;
}
// 交叉类型
1、交叉类型的功能类似于接口继承
2、用于组合多个类型为一个类型(常用于对象类型)
例子1、
interface Person { name: string }
interface People { sex: string }
type PersonMan = Person & People
// name和sex都必须有
let obj: PersonMan = {
name: '小丑',
sex: '男'
}
例子2、
interface Ia {
fn: (value: number) => string
}
interface Ib {
fn: (value: string) => string
}
// 不能将类型“(value: number) => string”分配给类型“(value: string) 上面Ia会报错
interface Ia extends Ib {
}
// 用联合类型可以解决上面的报错问题
type Ic = Ia & Ib
let c: Ic = {
fn(value: number | string) {
return ''
}
}
// 重复声明
interface Obj8 {
name: string;
age: number;
}
interface Obj8 {
address: string;
}
const Obj8: Obj8 = {
name: 'dx',
age: 1,
address: '杭州'
}
Record 可以获得根据 K 中所有可能值来设置 key 以及 value 的类型
interface UserInfo {
id: string;
name: string;
}
type CurRecord = Record<'a' | 'b' | 'c', UserInfo>; // { a: UserInfo; b: UserInfo; c: UserInfo; }
keyof:可以获取一个对象接口的所有,key值。
type Obj = { a: string; b: number }
type Foo = keyof Obj;
// 应用场景
1、获取对象所有属性的类型
type ObjType = Obj[keyof Obj];
//得到的结果
type ObjeType = string | number;
2、约束范型参数的范围
1、extends的在这里的用法 k必须能分配给传进来T的key T对K进行了约束 只能是“a”/“b”
2、如果没有这个约束,`{ [P in K]: T[P] }` 则会报错。
type MyPick<T, K extends keyof T> = { [P in K]: T[P] };
type P3 = MyPick<Obj, 'a' | 'b'>
// 得到的结果
type P3 = {
a: string;
b: number;
}
in 其实就像是遍历一样 遍历类型
type Keys = 'a' | 'b' | 'c';
type obj2 = {
[T in Keys]: string;
}
// 得到的结果
type obj2 = {
a: string;
b: string;
c: string;
}
typeof 用于获取某个变量的具体类型
const Obj4 = { name: 'dx', age: 18 };
type SelfIntroduction = typeof Obj4;
得到的结果
type SelfIntroduction = {
name: string;
age: number;
}
用法
const obj5: SelfIntroduction = {
name: 'hc',
age: 3,
}
Pick 用于在定义好的类型中取出特性的类型
interface UserInfo {
id: string;
name: string;
}
type NewUserInfo = Pick<UserInfo, 'name'>; // {name: string;}
infer用于提取属性,具体的返回类型是依据三元表达式的返回而定
1、extends的作用是:判断一个类型是不是可以分配给另一个类型 2、infer可以看作一个占位符号
type myInter<T> = T extends Array<infer U> ? U : T
Partial、DeepPartial、Required
Partial 1、Partial 功能是将类型的属性变成可选 2、Partial只支持处理第一层的属性,如果想要处理多层,可以使用DeepPartial,使用方法与Partial相同这里就不举例了
interface UserInfo {
id: string
name: string
}
const machinist: UserInfo = {
name: 'machinist'
}
// error 类型 "{ name: string; }" 中缺少属性 "id",但类型 "UserInfo" 中需要该属性。ts(2741)
type NewUserInfo2 = Partial<UserInfo>;
const machinist2: NewUserInfo = {
name: 'machinist'
}
Required功能与Partial相反,将类型的属性变成必选
interface UserInfo2 {
id?: string
name?: string
}
type newUserInfo = Required<UserInfo>
const machinist3: newUserInfo = {
id: "111"
}
// error 类型 "{ id: string; }" 中缺少属性 "name",但类型 "Required<UserInfo>" 中需要该属性。ts(2741)
Readonly将类型字段的值修改为只读属性,禁止修改
type Obj10 = {
readonly id: number;
}
const obj10: Obj10 = {
id: 11111
}
obj10.id = 8888; // 无法分配到 "id" ,因为它是只读属性。
3、总
这些常用关键字,都是一些比较常见的,真正要做到运用,还得靠撸代码。