Web前端面试题2024中高级，TS中的一些关键词总结，成为一名合格前端架构师

const orderId = response.result.data.orderId;

上面这种写法，很容易出现这种问题 orderId is undefined，稍微有些经验的我们立马就能想到，肯定是代码中 response.result.data 为 null 或者 undefined ，这样，你肯定获取不到 orderId。所以经验丰富的我们在遇到获取层级比较多的对象的时候，一般都是像下面这样写。

// 正确的写法

const orderId = (response

&& response.result

&& response.result.data

&& response.result.data.orderId) || ‘’;

我们可以使用 ?. 来简化上面的代码。

const orderId = response?.result?.data?.orderId || ‘’;

上面代码使用了?.运算符，直接在链式调用的时候判断，左侧的对象是否为null或undefined。如果是的，就不再往下运算，而是返回undefined。

?. 支持如下语法

obj?.prop // 对象属性

obj?.[expr] // 对象属性

arr?.[index] // 获取数据中 index 下标对应的值

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;

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

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

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

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

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

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

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

**

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

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

[外链图片转存中…(img-WqLpyZZ8-1712460948219)]

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-TYEJ4h1g-1712460948219)]