TS中的一些关键词总结，京东最爱考的前端面试题

func?.(…args) // 函数或对象方法的调用

?.和 && 的区别

TS中的一些关键词

---

type 类型别名用来给一个类型起个新名字

type SetUser = (name: string, age: number) => void;

类型别名常用于联合类型（联合类型表示取值可以为多种类型中的一种），比如常见的如下写法

type UploadType = ‘drag’ | ‘select’;

interface

interface 和 type 的用法其实差不多，interface 也是用来定义类型的

interface SetUser = {

(name: string, age: number) => void;

}

type和interface的区别

都支持拓展，但是语法不同

interface Name {

name: string;

}

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]

};

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

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

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

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

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

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

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

)]
[外链图片转存中…(img-azMYtRpC-1712114983188)]
[外链图片转存中…(img-iV5jFc1k-1712114983189)]
[外链图片转存中…(img-5kZYE8hJ-1712114983189)]
[外链图片转存中…(img-Txg1BFfY-1712114983190)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

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

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-vU62S7vF-1712114983191)]

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

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