TypeScript的实用方法!大家一定要学会啊~一定!!!
The following article is from 前端之神 Author 林三心不学挖掘机
前言
大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心。
TypeScript自带的方法
很多人在平时的开发中使用到了TypeScript
,但是可能只是单纯使用了一些基本的类型
但很多人不知道其实TypeScript
自带了很多非常方便的方法
接下来我就结合例子,给大家介绍一下这些很方便的方法
Partial
作用
Partial 将类型的属性变成可选
例子
假如我现在有个interface
interface IUser1 {
name: string;
age: number;
gender: number;
}
有一天,我想把IUser
身上的属性都变成可选的,那我可能会再写一个interface
interface IUser2 {
name?: string;
age?: number;
gender?: number;
}
但是如果属性多了的话,我们又得写很多额外的代码,这个时候就可以直接用Partial
type IUser2 = Partial<IUser1>
等同于
interface IUser2 {
name?: string;
age?: number;
gender?: number;
}
原理
type Partial<T> = {
[P in keyof T]?: T[P];
};
Required
作用
Required 将类型的属性变成必选
例子
假如我现在有个interface
interface IUser1 {
name: string;
age?: number;
gender?: number
}
可以看到有一些属性是可选的,但是突然有一天,我想让所有属性变成必选我会再写一个interface
interface IUser2 {
name: string;
age: number;
gender: number
}
但如果属性多了的话,又要写很多额外的代码,这时候Required就派上用场了~
type IUser2 = Required<IUser1>
等同于
interface IUser2 {
name: string;
age: number;
gender: number
}
原理
type Required<T> = {
[P in keyof T]-?: T[P]
};
Pick
作用
Pick 从某个类型中挑出一些属性出来
例子
假如我有一个interface
interface IUser1 {
name: string;
age: number;
gender: number;
}
有一天我想要写一个新interface
,它只拥有age、gender
这两个属性,那我会重新写一个interface
interface IUser2 {
age: number;
gender: number;
}
但其实使用Pick非常方便去做这件事
type IUser2 = Pick<IUser1, 'age' | 'gender'>
等同于
interface IUser2 {
age: number;
gender: number;
}
原理
type Pick<T, K extends keyof T> = {
[P in K]: T[P];
};
Omit
作用
Omit<T, K extends keyof any> 的作用是使用 T 类型中除了 K 类型的所有属性,来构造一个新的类型。
例子
假如我有一个interface
interface IUser1 {
name: string;
age: number;
gender: number;
}
有一天我想要写一个新interface
,它只拥有age、gender
这两个属性,那我会重新写一个interface
interface IUser2 {
age: number;
gender: number;
}
但其实使用Omit非常方便去做这件事
type IUser2 = Omit<IUser1, 'name'>
等同于
interface IUser2 {
age: number;
gender: number;
}
原理
type Omit<T, K extends keyof any> =
Pick<T, Exclude<keyof T, K>>;
NonNullable
作用
NonNullable 的作用是用来过滤类型中的null
及undefined
类型。
例子
// string | number
type T0 = NonNullable<string | number | undefined>;
// string[]
type T1 = NonNullable<string[] | null | undefined>;
原理
type NonNullable<T> = T extends
null | undefined
? never : T;
ReturnType
作用
用来得到一个函数的返回值类型
例子
假如我想定义一个变量来接受一个函数的返回值,但是不知道怎么定义这个变量的类型,这个时候可以用ReturnType
type Func = (value: number) => string;
let str: ReturnType<Func>;
const fun: Func = (value: number) => String(value)
str = fun(1)
原理
type ReturnType<T extends (...args: any[]) => any> = T extends (
...args: any[]
) => infer R
? R
: any;
Exclude
作用
Exclude<T, U> 的作用是将某个类型中属于另一个的类型移除掉。
例子
type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
type T1 = Exclude<"a" | "b" | "c", "a" | "b">; // "c"
type T2 = Exclude<string | number | (() => void), Function>; // string | number
原理
type Exclude<T, U> = T extends U ? never : T;
Record
作用
Record<K extends keyof any, T> 的作用是将 K 中所有的属性的值转化为 T 类型。
例子
interface PageInfo {
title: string;
}
type Page = "home" | "about" | "contact";
const x: Record<Page, PageInfo> = {
about: { title: "about" },
contact: { title: "contact" },
home: { title: "home" },
};
原理
type Record<K extends keyof any, T> = {
[P in K]: T;
};
Readonly
作用
Readonly 的作用是将某个类型所有属性变为只读属性,也就意味着这些属性不能被重新赋值。
例子
interface Todo {
title: string;
}
const todo: Readonly<Todo> = {
title: "Delete inactive users"
};
todo.title = "Hello";
// Error: cannot reassign a readonly property
原理
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
- END -
文章精选1、钱付了,订单还是未支付,用户炸了!2、因为核酸系统崩溃,这家公司被骂上了热搜第一3、没有二十年功力,写不出这一行“看似无用”的代码!4、漫画 | 因为用了C语言,Linux内核代码一团糟5、一首让计算机崩溃的歌曲!6、微软有史以来最大的软件产品:超36斤的C/C++编译器7、苏妈官宣首款5纳米旗舰CPU!AMD终于能突破5GHz了
8、这12款idea插件,能让你代码飞起来!
8、这12款idea插件,能让你代码飞起来!