这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天
课程重点
- TypeScript 历史及定义解析
- TypeScript 优势解读
- TypeScript 练习工具
- 联合交叉类型
- 类型保护与类型守卫
- Merge 函数类型实现
- 函数返回值类型
- TypeScript 工程应用
什么是TypeScript？
静态类型
- 可读性增强：基于语法解析TSDoc，ide增强
- 可维护性增强：在编译阶段暴露大部分错误
- 多人合作的大型项目中，获得更好的稳定性和开发效率
JS的超集
- 包含于兼容所有JS特性，支持共存
- 支持渐进式引入与升级
基础数据类型
- 字符串
- 数字
- 布尔值
- null
- undefined
对象类型
函数类型
函数重载
数组类型
Typescript补充类型
- 空类型
- 任意类型
- 枚举类型
- 泛型
Typescript泛型
- 什么泛型：不预先指定具体的类型，而在使用的时候再指定类型的一种特性
泛型两个比较常用的语法：
- 泛型约束：限制泛型必须符合字符串
- 泛型参数默认类型
类型别名&类型断言
字符串/数字 字面量
高级类型
联合/交叉类型
- 联合类型：|A | |B；联合类型表示一个值可以是集中类型之一
- 交叉类型：|A & |B；多种类型叠加到一起成为一种类型，它包含了所需要的所有类型的特性
类型保护与类型守卫
函数返回值类型
工程应用
- 浏览器Web
- NodeJs
Typescript工程应用-Web
- 配置webapack loader相关配置
- 配置tsconfig.js文件
- 运行webpack启动/打包
- loader处理ts文件时，会进行编译与类型检查
相关loader
- awesome-typescript-loader
- babel-loader
Typescript工程应用-Web
使用TSC编译
- 安装Node与npm
- 配置tsconfig.js文件
- 使用npm安装tsc
- 使用tsc运行编译得到js文件
总结
TypeScript 是 JavaScript 的语法超集，它添加了静态类型，近几年的发展中，也受到诸多开发者的喜爱。Typescript 的社区逐渐壮大，日趋完善，为越来越多前端开发者提供服务，本节课学习了 TypeScript 的优势及其主要使用的工具。
在完成对 TypeScript 与 JavaScript 的分析后，本节课学习了TypeScript 高级类型，提供常见的解决方案，可以在日常的前端开发过程中，通过高级类型的方式，将普通类型的解决方案进行高级化。在课程最后，还将 以Web 场景为例，介绍 TypeScript 的工程应用。
