TS常用关键字总结

313 阅读3分钟

image.png

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、约束范型参数的范围
1extends的在这里的用法 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、总

这些常用关键字,都是一些比较常见的,真正要做到运用,还得靠撸代码。