您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍“TypeScript内置工具类型怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“TypeScript内置工具类型怎么使用”文章能帮助大家解决问题。
TypeScript 附带了大量类型，可以帮助进行一些常见的类型操作，通常称为 Utility Types。
将必填参数变为可选参数
namespace a {
// 示例一：
interface A {
name: string,
age: number,
sex: string
}
// 接口A中的参数通过内置工具类型Partial变成了可选参数
type PartialA = Partial<A>;
let a: PartialA = {
// 此处传参可以任意个数，但只能传已定义的参数
name: '张三',
age: 10
}
// 示例二：
interface Company {
id: number,
name: string
}
interface Person {
id: number,
name: string,
company: Company
}
// 实现DeepPartial，将参数深度转换成可选参数
type DeepPartial<T> = {
[U in keyof T]?: T[U] extends object ? DeepPartial<T[U]> : T[U];
}
type PartialPerson = DeepPartial<Person>;
let p: PartialPerson = {
// 此处的参数已经变为可选参数，可根据自己需要传递
id: 10,
name: '张三',
company: {
name: '美团'
}
}
}Partial的实现源码
namespace b {
interface A {
name: string,
age: number,
sex: string
}
type Partial<T> = {
// 原理：
// 1.通过keyof拿到T中的所有key
// 2.迭代所有的key
// 3.统一加上可选参数处理
// 4.返回迭代值的类型
[P in keyof T]?: T[P];
}
// 测试：
type PartialA = Partial<A>;
let a: PartialA = {
name: '张三',
age: 10
}
}将所有参数变为必填
namespace b {
interface Person {
name: string,
age?: number
}
// Required将可选参数变为必填
type RequiredPerson = Required<Person>;
let person: RequiredPerson = {
name: '张三',
age: 10
}
}Required 的实现源码
namespace c {
interface Person {
name: string,
age?: number
}
type Required<T> = {
// 原理：
// 1.通过keyof拿到T中所有的key
// 2.迭代所有的key
// 3.将可选的参数变为必填的参数
// 4.返回迭代属性及类型
// +?或者?: 代表的是可选，-?: 代表的是不可选
[P in keyof T]-?: T[P];
};
// 测试
type RequiredPerson = Required<Person>;
let person: RequiredPerson = {
name: '李四',
age: 18
}
}将所有参数变为只读
namespace d {
interface Person {
name: string,
age?: number
}
type ReadonlyPerson = Readonly<Person>;
let person: ReadonlyPerson = {
name: '张三',
age: 10
}
// 已经变为只读属性，因此此处赋值会报错
// person.name = '李四'; // 无法分配到 "name" ，因为它是只读属性。ts(2540)
// person.age = 20; // 无法分配到 "age" ，因为它是只读属性。ts(2540)
}Readonly 的实现源码
namespace e {
interface Person {
name: string,
age?: number
}
type Readonly<T> = {
// 原理：
// 1.通过keyof拿到T中所有key
// 2.迭代拿到的所有key
// 3.通过readonly关键字将所有属性变为只读属性
// 4.返回迭代属性及类型
readonly [P in keyof T]: T[P]
}
// 测试
type ReadonlyPerson = Readonly<Person>;
let person: ReadonlyPerson = {
name: '张三',
age: 10
}
// person.name = '李四'; // 无法分配到 "name" ，因为它是只读属性。ts(2540)
// person.age = 20; // 无法分配到 "age" ，因为它是只读属性。ts(2540)
}捡取符合条件的属性
namespace g {
interface Person {
name: string,
age: number,
sex: string
}
// 参数一是一个对象，参数二是要筛选的属性
type PickPerson = Pick<Person, 'name' | 'sex'>;
let person: PickPerson = {
name: '张三',
// 由于通过Pick只捡取了name和sex属性，因此此时给sex赋值会报错
// 不能将类型“{ name: string; age: number; sex: string; }”分配给类型“PickPerson”。
// 对象文字可以只指定已知属性，并且“age”不在类型“PickPerson”中。ts(2322)
// age: 10,
sex: '男'
}
}Pick 的实现源码
namespace h {
interface Person {
name: string,
age: number,
sex: string
}
// 原理：
// 1.T表示传入的类型定义。此处指Person接口。
// 2.K表示T的子类型，是一个联合类型。此处指'name' | 'age' | 'sex'的子类型
// 3.通过keyof拿到T中的所有key
// 3.迭代K，拿到所有传递进来的子类型
// 4.返回迭代属性及类型
// 简单理解：就是从一个对象中，提取一部分属性组成新的对象
type Pick<T, K extends keyof T> = {
[P in K]: T[P];
}
// 测试
type PickPerson = Pick<Person, 'name' | 'age'>
let person: PickPerson = {
name: '张三',
age: 10
}
}记录类型：将一个类型的所有属性值都映射到另一个属性上并创建新的类型
namespace i {
// 1.此处的K主要用来修饰obj对象的key，为string或者number
// 2.此处的T用来修饰老的类型
// 3.此处的U用来修饰新的类型
function mapObj<K extends string | number, T, U>(obj: Record<K, T>, callable: (x: T) => U) {
// 声明一个变量
let result: Record<K, U> = <Record<K, U>>{};
// 遍历传入的对象
for (const key in obj) {
// 通过callback函数处理result的属性值
result[key] = callable(obj[key]);
}
// 返回result
return result;
}
let obj = { num1: 1, num2: 2 };
let callable = (x: number): string => x * 2 + '';
let newObj = mapObj<string | number, number, string>(obj, callable);
console.log(newObj); // { num1: '2', num2: '4' }
}Record 的实现源码
namespace j {
type Record<K extends keyof any, T> = {
// 原理：
// 1.通过keyof拿到所有的K，是一个联合类型。string | number | symbol
// 2.迭代K，拿到所有的属性
// 3.返回迭代的属性及类型
// 注意：此处不能写成 type Record<K, T> = {}; any代表所有key的联合类型。
// 否则会报错：不能将类型“K”分配给类型“string | number | symbol”。ts(2322)
[P in K]: T;
};
// 测试
function mapObj<K extends string | number, T, U>(obj: Record<K, T>, callable: (x: T) => U) {
// 声明一个变量
let result: Record<K, U> = <Record<K, U>>{};
// 遍历传入的对象
for (const key in obj) {
// 通过callback函数处理result的属性值
result[key] = callable(obj[key]);
}
// 返回result
return result;
}
let obj = { num1: 1, num2: 2 };
let callable = (x: number): string => x * 2 + '';
let newObj = mapObj<string | number, number, string>(obj, callable);
console.log(newObj); // { num1: '2', num2: '4' }
}关于“TypeScript内置工具类型怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。