2024年TypeScript系列教程九《高级类型》(1)，大佬整理

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• keyof 就是将一个类型的属性名全部提取出来当做联合类型

• p in xx 又是什么意思呢？

in的意思就是遍历，如上就是将 age和name进行遍历

例子：

type Nullable = { [P in keyof T]: T[P] | null }

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

Partial<Type>

作用：将类型属性都设置为可选

interface Todo {

title: string;

description: string;

}

function updateTodo(todo: Todo, fieldsToUpdate: Partial) {

return { …todo, …fieldsToUpdate };

}

const todo1 = {

title: “organize desk”,

description: “clear clutter”,

};

const todo2 = updateTodo(todo1, {

description: “throw out trash”,

});

Required<Type>

作用：和Partial 相反，将类型属性都设置为必须

interface Props {

a?: number;

b?: string;

}

const obj: Props = { a: 5 };

const obj2: Required = { a: 5 };

//Property ‘b’ is missing in type ‘{ a: number; }’ but required in type ‘Required’.

Readonly<Type>

作用：将类型属性设置成Readonly

interface Todo {

title: string;

}

const todo: Readonly = {

title: “Delete inactive users”,

};

todo.title = “Hello”;

//Cannot assign to ‘title’ because it is a read-only property.

这个技巧在运行时赋值表达式十分有用，例如冷冻一个对象（ frozen object)）：

Object.freeze

function freeze(obj: Type): Readonly;

Record<Keys,Type>

作用： Record<K,T>构造具有给定类型T的一组属性K的类型。在将一个类型的属性映射到另一个类型的属性时，Record非常方便。

源码：

/**

• Construct a type with a set of properties K of type T

*/

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

};

例子：

interface CatInfo {

age: number;

breed: string;

}

type CatName = “miffy” | “boris” | “mordred”;

const cats: Record<CatName, CatInfo> = {

miffy: { age: 10, breed: “Persian” },

boris: { age: 5, breed: “Maine Coon” },

mordred: { age: 16, breed: “British Shorthair” },

};

cats.boris;

更多实战案例：https://zhuanlan.zhihu.com/p/356662885

Pick<Type, Keys>

作用: 构造一个类型从另一个类型的属性中挑选出几个

源码：

/**

• From T, pick a set of properties whose keys are in the union K

*/

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

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

From T, pick a set of properties whose keys are in the union K

*/

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

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-oZFCJZQI-1714819114835)]