这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

一、本堂课重点内容：

• TypeScript 历史及定义解析
• TypeScript 优势解读
• TypeScript 练习工具
• 联合交叉类型
• 类型保护与类型守卫
• Merge 函数类型实现
• 函数返回值类型
• TypeScript 工程应用

二、详细知识点介绍：

个人笔记：

TS

学习内容

• TypeScript 历史及定义解析
• TypeScript 优势解读
• TypeScript 练习工具

与JS的区别

JS：动态类型

TS：静态类型

为什么选择TS

• 可读性强
• 可维护性强

• 包含与兼容JS
• 支持渐进式引入与升级

学习内容

• 联合交叉类型
• 类型保护与类型守卫
• Merge 函数类型实现
• 函数返回值类型
• TypeScript 工程应用

联合/交差类型

联合类型：IA|IB

交差类型：IA&IB

工程应用

• webpack

1. 配置webpack loader相关配置
2. 配置tsconfig.js文件
3. 运行webpack启动/打包
4. loader处理ts文件时，会进行编译与类型检查

• 使用TSC编译

1. 安装node与npm
2. 配置tsconfig.js文件
3. 使用npm安装tsc
4. 使用tsc运行编译得到js文件

三、实践练习例子：

TS例子

const hello : string = "Hello World!" 
console.log(hello)

四、课后个人总结：

本章内容自身学习比较抽象，没有具体的实践，容易对TS于JS应用产生混淆，并且TS的编写规则不同于JS，对于变量表明了数据类型。

五、引用参考：

TS的github官网

TypeScript 基础语法 | 菜鸟教程 (runoob.com)

TypeScript: JavaScript With Syntax For Types. (typescriptlang.org)

六、例文：

Vue3 + TS 最佳实践 - 掘金 (juejin.cn)

TS 常见问题整理（60多个，持续更新ing） - 掘金 (juejin.cn)

一份不可多得的 TS 学习指南（1.8W字） - 掘金 (juejin.cn)

2022 typescript史上最强学习入门文章(2w字) - 掘金 (juejin.cn)