学习学习 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官方文档中，整理的不是很仔细，阅读起来不是非常的舒服。。。诶

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

[2] TS 常见问题整理（60多个，持续更新ing）

[3] TS 中的内置类型简述

[4] TypeScript 的工具类型

[5] 深入理解 TypeScript

[6] 一份不可多得的 TS 学习指南（1.8W字）

[7] TypeScript 菜鸟教程

看到这里了！点个赞再走吧！