TS中的一些关键词总结(2)

}

interface User extends Name {

age: number;

}

type Name = {

name: string;

}

type User = Name & { age: number  };

typeof 可以获取一个变量的声明类型

在 JavaScript 中， typeof 可以判断一个变量的基础数据类型， 在 TS 中，它还可以获取一个变量的声明类型

const obj = { a: ‘1’ };

type Foo = typeof obj;

// type Foo = { a: string }

keyof 可以获取一个对象接口的所有 key 值

type Obj = { a: string; b: string }

type Foo = keyof obj;

// type Foo = ‘a’ | ‘b’;

in 可以遍历枚举类型

type Keys = ‘a’ | ‘b’ | ‘c’;

type Obj = {

}

// in 遍历 Keys，并为每个值赋予 string 类型

// type Obj = {

//     a: string,

//     b: string,

//     c: string

// }

TS中一些内置的类型

---

官方文档：https://www.typescriptlang.org/docs/handbook/utility-types.html#partialt

用到了上面提到的一些关键词

Partial<T> 将类型的属性变成可选

功能是将类型的属性变成可选，注意这是浅Partial

type Partial = {

[P in keyof T]?: T[P]

};

举例说明

interface UserInfo {

id: string;

name: string;

}

// error：Property ‘id’ is missing in type ‘{ name: string; }’ but required in type ‘UserInfo’

const xiaoming: UserInfo = {

name: ‘xiaoming’

}

使用  Partial<T>

type NewUserInfo = Partial;

const xiaoming: NewUserInfo = {

name: ‘xiaoming’

}

这个  NewUserInfo 就相当于

interface NewUserInfo {

id?: string;

name?: string;

}

但是 Partial<T> 有个局限性，就是只支持处理第一层的属性，如果我的接口定义是这样的

interface UserInfo {

id: string;

name: string;

fruits: {

appleNumber: number;

orangeNumber: number;

}

}

type NewUserInfo = Partial;

// Property ‘appleNumber’ is missing in type ‘{ orangeNumber: number; }’ but required in type ‘{ appleNumber: number; orangeNumber: number; }’.

const xiaoming: NewUserInfo = {

name: ‘xiaoming’,

fruits: {

orangeNumber: 1,

}

}

可以看到，第二层以后就不会处理了，如果要处理多层，就可以自己通过  Conditional Types[2]

DeepPartial

type DeepPartial = {

// 如果是 object，则递归类型

[U in keyof T]?: T[U] extends object

? DeepPartial<T[U]>

: T[U]

};

type PartialedWindow = DeepPartial; // 现在window 上所有属性都变成了可选啦

Required将类型的属性变成必选

type Required = {

[P in keyof T]-?: T[P]

};

其中 -? 是代表移除 ? 这个 modifier 的标识。再拓展一下，除了可以应用于 ? 这个 modifiers ，还有应用在 readonly ，比如 Readonly<T> 这个类型

type Readonly = {

readonly [p in keyof T]: T[p];

}

Pick 从某个类型中挑出一些属性出来

type Pick<T, K extends keyof T> = {

};

interface UserInfo {

id: string;

name: string;

}

type NewUserInfo = Pick<UserInfo, ‘name’>; // {name: string;}

可以看到 NewUserInfo 中就只有个 name 的属性了。

Record

可以获得根据 K 中所有可能值来设置 key 以及 value 的类型

type Record<K extends keyof any, T> = {

};

举个例子

type CurRecord = Record<‘a’ | ‘b’ | ‘c’, UserInfo>; // { a: UserInfo; b: UserInfo; c: UserInfo; }

Mutable<T> 将类型的属性变成可修改

功能是将类型的属性变成可修改，这里的 -指的是去除。-readonly 意思就是去除只读，也就是可修改啦。

type Mutable = {

-readonly [P in keyof T]: T[P];

};

Readonly<T> 类型的属性变成只读

type Readonly = {

readonly [P in keyof T]: T[P]

};

ReturnType 用来得到一个函数的返回值类型

type ReturnType<T extends (…args: any[]) => any> = T extends (

…args: any[]

) => infer R

? R

: any;

infer在这里用于提取函数类型的返回值类型。ReturnType<T> 只是将 infer R 从参数位置移动到返回值位置，因此此时 R 即是表示待推断的返回值类型。

下面的示例用ReturnType获取到 Func 的返回值类型为 string，所以，foo 也就只能被赋值为字符串了。

type Func = (value: number) => string;

const foo: ReturnType = “1”;

更多参考TS - es5.d.ts[3]

参考

–

• 细数 TS 中那些奇怪的符号[4]

• TypeScript中高级应用与最佳实践[5]

• TS 中的内置类型简述[6]

• TypeScript 的工具类型[7]

• 深入理解 TypeScript[8]

参考资料

[1]

TypeScript Playground: https://www.typescriptlang.org/play

[2]

Conditional Types: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html

[3]

TS - es5.d.ts: https://github.com/microsoft/TypeScript/blob/master/src/lib/es5.d.ts#L1431

[4]

细数 TS 中那些奇怪的符号: https://segmentfault.com/a/1190000023943952

[5]

TypeScript中高级应用与最佳实践: https://juejin.im/post/6844903904140853255#heading-9

[6]

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
O等大厂，18年进入阿里一直到现在。**

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-PjWSliQA-1715622885008)]

[外链图片转存中…(img-4eXRFSHq-1715622885008)]

[外链图片转存中…(img-cyNuonvh-1715622885009)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！