探寻TS中那些你不知道的工具类
前言
作为一个资深前端螺丝工
,我总是在思考一个问题:“如何拧螺丝拧的更帅气,拧出满满的技术感?”。单个项目高大上,那是是帅一次,可我想帅一辈子 <手动狗头>
那如何在所有项目里都拧的好,拧的帅,拧的高大上呢?
--Typescript 应运而生
面对下面三个经典的灵魂拷问:
- 你是否还在使用 “anyscript”?(yes)
- 你是否特别想拒绝any却又不知如何下手?(yes)
- 你是否创建着ts文件却还在干着js的事?(yes)
我已经帮大家回答好了。相信大家已经受够了anyscript,受够了代码里any遍地开花的情景,受够了代码太low,没法装B的事实。那么这里我将
从实际应用出发
,不谈原理
,不谈实现
,只谈使用
,持续更新经常用到的TS知识小Tip。原理啥的后续再说。(起码要等我学会了再装B)
今天主要带来的是TS的工具类
。什么是工具类,简单的说,就是TS已经用范型写好了的支持面向类型编辑的api。这些工具类能够帮我们轻松完成复杂类型的转换 或 避免自己开发写一大堆范型进行不确定的类型兼容。
Partail
interface Animal { name: string; age: number; }
// 或 type Animal = { name: string; age: number } 也可
type Dog = Partail<Animal>
// type Dog = { name?: string | undefined ; age?: number | undefined; }
// 顾名思义,type B 是 type A的所有属性转换为可选属性的集合
const dog: Dog = { age: 1 }
Required 和Partail相反
type Animal = { name?: string; age: number;}
type Cat = Required<Animal>
// type Cat = { name: string; age: number; }
// 顾名思义,type B 是 type A的所有属性转换为必须属性的集合
const cat: Cat = { name: 'cat-halo'; age: 2; }
Readonly
type Animal = { name?: string; age: number;}
type Dog = Readonly<Animal>
// type Dog = { readonly name: string; readonly age: number; }
// 顾名思义,type B 是 type A的所有属性转换为只读属性的集合,不能新增,不能减少,不能改变
const dog: Dog = { name: 'cat-halo'; age: 2; }
Record<K,T>
type Animal = { name: string; age?: number; }
type Proper = "cat" | "dog"
type SingleAnimal = Record<Proper, Animal>
// type SingleAnimal = { cat: { name: string }; dog: { name: string; age:number } }
// 顾名思义,Record<K, T>是key为K,value为T 的对象的集合
Exclude<UnionType,ExcludeType>
type Animal = Exclude<string | number | boolean, string | boolean>
// type Animal = number
// 顾名思义, 就是除去ExcludeType,返回剩余类型的集合
Extract<T,Union>
type Animal = Extract<string | number | boolean | ()=> void, Function | boolean>
// type Animal = boolean | ()=> void
// 顾名思义, 就是取 T和Union的交集
Pick<T,K>
type Animal = {
name: string;
age: number;
}
type Dog = Pick<Animal, "name">
// type Dog = { name: string }
// 顾名思义, 从T里挑选K 返回集合
Omit<T,K>
type Animal = { name: string; age?: number; }
type Dog = Omit<Animal, "age" | "sex">
// type Dog = { name: string }
// 顾名思义, 从T中删除K, 返回剩余类型的集合
NonNullable
type Animal = string | number | ()=> void | null | undefined;
type Dog = NonNullable<Animal>
// type Dog = string | number | ()=> void;
// 顾名思义, 去除null 和 undefined
ReturnType
type Dog = ReturnType<()=> void> // void
type Cat = ReturnType<<T>()=> T> // unknown
type Bird = ReturnType<()=> { name: string }> // { name: string }
// 顾名思义, 返回函数结果的类型集合
InstanceType
class Animal{
name: '',
age: ''
}
const dog: InstanceType<typeof Animal> = new Animal()
// 顾名思义, 返回类的类型,约束类创建的实例
Parameters 用的少
后续
将会持续进行TS方面的精进并更多分享关于TS使用的技巧,与广大资深攻城狮
共同进步。
同时感谢文章Conditional Types in TypeScript的范型理解帮助。
转载自:https://juejin.cn/post/7102325840179888165