我正在参与掘金创作者训练营第4期，点击了解活动详情，一起学习吧！
学习学习 TypeScript 备战 Vue3吧！
都 2202 年了（狗头）， 大家开始用 TypeScript 了吗？
是不是有点没信心用好 TypeScript，害怕变成 AnyScript 呢？
没事没事，现在、立刻、马上：
( (val = '加入学习小分队') => '提高提高提高！' )()
为啥使用TypeScript呢？
-
TypeScript是JavaScript的超集,支持Javascript的所有语法和语义，同时作为EACMAScript的超集提供一些额外的功能，如类型检测和更丰富的语法。 -
Javascript是一门弱类型语言，变量的数据类型具有动态性，只有执行的时候才能确定变量的类型，这种后知后觉的认错方法会让开发者成为调试大师，但无益于编程能力的提升，还会降低开发效率。
TypeScript中的一些关键词总结
接下来对其特有的知识点进行简单的概括总结
! 断言操作符
信息大家使用TypeScript对接后端数据的时候总会遇到这种情况
这样的调用咋一看是没啥问题，我们在使用
Javascript的时候也是这样进行调用的没毛病，但是作为大哥的TypeScript却不干了，报错！ 必须报错！
! 断言操作符就体现出他的作用了：
-
!的作用是断言某个变量不会是null/undefined，告诉编辑器停止报错。使用!只是消除编辑器报错，不会对运行有任何影响。 -
属性或者参数中使用
!，表示强制解析（告诉typescript编译器，这里一定有值）；变量后使用!: 表示类型推荐排除null/undefined。
?. 可选链（这个js也是有的哦！）
后端返回了这样的数据给我们，但我们如下使用的时候
const age = data.family.son.age
上面这种写法，很容易出现这种问题 data.family.son is undefined，稍微有些经验的我们立马就能想到，肯定是代码中 data.family.son 为 null 或者 undefined ，这样，你肯定获取不到 age。所以经验丰富的我们在遇到获取层级比较多的对象的时候，一般都是像下面这样写。
const age = data && data.family && data.family.son && data.family.son.age
太长了太长了，有了可选链我们就能这样用
const age = data?.family?.son?.age
?? 空值合并运算符
这个比较简单
name ?? 'Tom'
- 它是 ES2020 的一个新特性，
- 只会在左侧表达式是
null或undefined时返回右侧的表达式 - 不同于逻辑或，空值合并运算符会
允许把 0 和 空字符串 '' 作为有效的数值。 - 必须在配合逻辑或/与（&& ||） 使用时用上括号，否则报错
(firstName || lastName) ?? "Tom" // 不加的话会报错
TypeScript 中的一些关键词
type 类型别名用来给一个类型起个新名字
类型别名常用于联合类型（联合类型表示取值可以为多种类型中的一种），比如常见的如下写法
type sex = 'nan' | 'nv';
let person: sex = 'nan'
interface 和 type 的用法其实差不多，interface 也是用来定义类型的
interface Person = {
(name: string, age: number) => any;
}
但是,还是有些许区别的
type和interface的区别 都支持拓展，但是语法不同
interface Name {
name: string;
}
interface Person extends Name {
age: number;
}
type Name = {
name: string;
}
type Person = Name & { age: number };
typeof与type配合的一些妙用
在 JavaScript 中， typeof 可以判断一个变量的基础数据类型， 在 TypeScript 中，它还可以获取一个变量的声明类型
const obj = { a: '1' };
type val = typeof obj;
这里 val的值就变成了{ a: string } ，当然还可以做深层的嵌套：
const obj = { a: { b: { c: 1}}};
type val = typeof obj;
这里 val的值就变成了const obj: { a: { b: { c: number; }; }; }
keyof 与 type配合的一些妙用
keyof 可以获取一个对象接口的所有 key 值，和 type 配合我们就能获取某个类型的键值
type Obj = { a: string; b: string }
type val = keyof obj;
// type val = 'a' | 'b';
in 与 type配合的一些妙用 可以遍历枚举类型
in 遍历 Keys，并为每个值赋予 string 类型
type Keys = 'a' | 'b' | 'c';
type Obj = {
[ T in Keys]: string;
}
这里 obj 的值就是
type Obj = {
a: string,
b: string,
c: string
}
参考资料
[1] TypeScript 入门教程：可以在线模拟练习哦！
[2] TypeScript Docs: 对于外语不好的我阅读起来真吃力。。。
[3] 细数 TS 中那些奇怪的符号
[4] TypeScript入门教程
[5] TypeScript入门教程列表
优秀文章
真的很推荐读一读，TypeScript官方文档中，整理的不是很仔细，阅读起来不是非常的舒服。。。诶
[3] TS 中的内置类型简述
[4] TypeScript 的工具类型
[5] 深入理解 TypeScript
[7] TypeScript 菜鸟教程
看到这里了！点个赞再走吧！
