首页 > 其他分享 >#yyds干货盘点#TypeScript条件类型

#yyds干货盘点#TypeScript条件类型

时间:2023-09-17 17:32:57浏览次数:32  
标签:yyds TypeScript string age 干货 extends type any name

  • 索引类型 keyof 会提取interface中的key
class KeyCls {
name: string
age: number
}
type KeyClsExample1 = keyof KeyCls // name | age

function getParams(params: keyof KeyCls) {}

getParams('name') // 正常
getParams('age') // 正常
getParams('sex') // 报错
  • in 可以遍历枚举类型
type Keys = 'a' | 'b'
type Obj = {
[p in Keys]: any;
}

// type Obj = {
//     a: any;
//     b: any;
// }
  • extends
type TExtends<T, U> = T extends U ? number : never;
type TExtendExample = TExtends<number, number | string> // number


// 联合类型, 表示如果T中的类型是U的子集, 那么返回never, 否则返回T, 这个过程可以理解为对T中的类型进行一次遍历, 每个类型都执行一次extends
type NonNullable1<T, U> = T extends U ? never : T
type NonExample = NonNullable1<null | string, null | undefined> // string
  • Pick 英文意思挑选, 也就是从某种类型中挑选出一个或多个属性
interface Todo {
title: string
desc: string
Done: boolean
}

type TodoPreview = Pick<Todo, 'Done'>
// type TodoPreview = {
//     Done: boolean;
// }

// 实现
type MyPick<T, K extends keyof T = keyof T> = {
[P in K]: T[P]
}
// K in extends keyof T = keyof T, 意思是取值必须是在T的key上面取, 如果不传递取值默认为keyof T,所有的key, 内部取值是如果传递了K, 则属性就在K中任意一个
  • Readonly 只读
interface Todo {
title: string
desc: string
Done: boolean
}
const todo: Pick<Readonly<Todo>, 'title'> = {
title: '你好'
}

todo.title = '啊啊啊'; // 无法为“title”赋值,因为它是只读属性

// 实现
type myReadonly<T> = {
readonly [K in keyof T]: T[K]
}
// 分析: 通过keyof拿到所有的key属性值组成联合类型, 然后通过in遍历类型,在属性值前面加上readonly, 值value则是 T[K]

// 通过上面案例还可以实现可选类型

type myOptional<T> = {
[K in keyof T]?: T[K]
}
  • Exclude 语法: Exclude<T, U>, 返回 T 中不存在于 U 的部分
// 回顾extends
// // 联合类型, 表示如果T中的类型是U的子集, 那么返回never, 否则返回T, 这个过程可以理解为对T中的类型进行一次遍历, 每个类型都执行一次extends
// type NonNullable1<T, U> = T extends U ? never : T
// type NonExample = NonNullable1<null | string, null | undefined> // string

// 自己实现Exclude
type myExclude<T, U> = T extends U ? never : T

// 测试
// 分析: 对T也就是'a'|'b'遍历, a extends 'a'|'b', 返回never, 'b', 'a'|'c',返回'b', 所以上面的返回'b'
type excludeExample = myExclude<'a' | 'b', 'a' | 'c'> // 'b'
  • Partial 将传入的属性变为可选项
interface Todo {
title: string
desc: string
Done: boolean
}



type Partial<T> = {
[P in keyof T]?: T[P]
}

type KeyOfExample1 = Partial<Todo>
let keyofEx1: KeyOfExample1 = {
title: '1'
}
  • -? 将可选项代表的 ?去掉, 将该类型变成必选项, 与之对应的还有一个+?,是将可选项变成必选项
interface Todo {
title: string
desc: string
Done: boolean
}

type Mutable<T> = {
-readonly [P in keyof T]: T[P]
}

type mutableExample = Mutable<Readonly<Todo>>
// 将Todo变成可读之后再变成可写
  • Required 将传入的属性变成必选项
type Required<T> = {
[P in keyof T]-?: T[P]
}

class KeyCls {
name?: string;
age?: number;
}

const requiredExample: Required<KeyCls> = {
name: "John",
} // 报错
const requiredExample2: Required<KeyCls> = {
name: "John",
age: 20,
} // 正常
  • Record<K, T> 将K中所有的属性转化为T类型
type myRecord<K extends keyof any, T> = {
[P in K]: T
}

enum Methods {
GET = "get",
POST = "post",
DELETE = "delete",
PUT = "put",
}

type IRouter = myRecord<Methods, (req: any, res: any) => void>

// type IRouter = {
//     get: (req: any, res: any) => void;
//     post: (req: any, res: any) => void;
//     delete: (req: any, res: any) => void;
//     put: (req: any, res: any) => void;
// }
  • Omit 排除某些字段
// 已经学习了Pick和Exclude, 则可以利用这两个实现Omit

class KeyCls {
name: string;
age: number;
}

// 假设 T 为 KeyCls, K为name, 结果是 
// type myOmit<KeyCls, 'name'>
// {  
//    age: number;  
// }

// 只需要实现成这样就行了, 也就是获取到age
type myOmit<T, K extends keyof T> = Pick<T, 'age'>

// 排除name, 按照上面的 Exclude<'name' | 'age', 'name'> // 'age'
type myOmit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>

// 测试

type myOmitExample = myOmit<KeyCls, "name">;

// type myOmitExample = {  
//     age: number;  
// }
  • NonNullable<T>:作用是去掉 T 中的 null 和 undefined。T 为字面量/具体类型的联合类型
// 4.8版本之前
type NonNullable<T> = T extends null | undefined ? never : T;
  
// 4.8版本之后
type NonNullable<T> = T & {}
  • infer 可以推荐一个类型变量, 相当于生命一个类型变量, 这个变量的类型取决于传入的泛型T
type F<T> = T extends () => infer R ? R : T;
type F1 = F<string> // string
type TObj<T> = T extends { name: infer V, age: infer U } ? V : T
type TObjExample2 = TObj<{
name: number;
age: string;
}>; // number;
  • ReturnType<T> 获取函数返回值的类型
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;
    
functin getUser() {
    return {
        name: 'xxx',
        age: 20
    }
}
    
type GetUserType = typeof getUser;
// type GetUserType = () => {
//   name: string;
//   age: number;
// }
    
type ReturnUser = ReturnType<GetUserType>
type ReturnUser = {
//   name: string;
//   age: number;
// }

标签:yyds,TypeScript,string,age,干货,extends,type,any,name
From: https://blog.51cto.com/u_11365839/7502909

相关文章

  • TypeScript封装验证函数(电话、邮箱、URL、数字、银行卡、税号)
    /** *验证手机号码或者电话号 **/exportfunctionisMobileTel(rule:any,value:any,callback:any){ if(!value){  //returncallback(newError('输入不可以为空'))  returncallback() } setTimeout(()=>{  constmyreg=/^((0\d{2,......
  • TypeScript编码解码Base64
    constBase64={  _keyStr:'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',  _utf8_encode:function(string:string){    string=string.replace(/\r\n/g,'\n')    letutftext=''    ......
  • # yyds干货盘点 #盘点一个Python打包的报错问题
    大家好,我是皮皮。一、前言前几天在Python钻石群【年鱼鱼......
  • #yyds干货盘点# LeetCode程序员面试金典:2 的幂
    题目:给你一个整数 n,请你判断该整数是否是2的幂次方。如果是,返回 true ;否则,返回 false 。如果存在一个整数 x 使得 n==2x ,则认为 n 是2的幂次方。 示例1:输入:n=1输出:true解释:20=1示例2:输入:n=16输出:true解释:24=16示例3:输入:n=3输出:false示例4:输入......
  • #yyds干货盘点# LeetCode程序员面试金典:强密码检验器
    1.简述:满足以下条件的密码被认为是强密码:由至少 6 个,至多 20 个字符组成。包含至少 一个小写 字母,至少 一个大写 字母,和至少 一个数字 。不包含连续三个重复字符(比如 "Baaabb0" 是弱密码,但是 "Baaba0" 是强密码)。给你一个字符串 password ,返回 将 password......
  • typescript使用记录
    一、第三方包没有声明文件时:https://blog.csdn.net/xiebaochun/article/details/122458063 解决方法1:从 @types/上下载对应的包解决方法2:自己写一个声明文件(.d.ts文件)在项目根目录新建types文件夹。在tsconfig.json里的include添加上types在typings文件夹......
  • 在nodejs中使用Typescript 金字教程
    1.首先新建一个项目npminit-yes2.开启Typescript依赖npminstalltypescript--save-dev安装typescript,现在我们可以通过命令行来使用tsc命令3.安装nodejs类型npminstall@types/node--save-dev4.使用命令创建一个tsconfig.json文件npxtsc--init--rootDir......
  • #yyds干货盘点# LeetCode程序员面试金典:二叉搜索树中第K小的元素
    题目:给定一个二叉搜索树的根节点 root ,和一个整数 k ,请你设计一个算法查找其中第 k 个最小元素(从1开始计数)。 示例1:输入:root=[3,1,4,null,2],k=1输出:1示例2:输入:root=[5,3,6,2,4,null,null,1],k=3输出:3代码实现:classSolution{publicintkthSmallest(......
  • #yyds干货盘点#SQL注入之布尔注入原理
    布尔注入定义及原理:所谓盲注就是在服务器没有错误回显的时候完成注入公鸡。盲注分为布尔盲注和时间盲注布尔盲注:boolean根据注入信息返回trueorfales没有任何报错信息时间盲注:界面返回值ture无论输入任何值,返回的情况都是正常的来处。加入特定的时间函数,通过查看web页面返回......
  • #yyds干货盘点#Koa源码浅析
    Koa源码十分精简,只有不到2k行的代码,总共由4个模块文件组成,非常适合我们来学习。我们先来看段原生Node实现Server服务器的代码:consthttp=require('http');constserver=http.createServer((req,res)=>{res.writeHead(200);res.end('helloworld');});server.list......