这是我参与「第四届青训营 」笔记创作活动的第7天
什么是TS
TS发展历史
为什么选择TS
ts是源于js的，下面是二者的比较
| JS | TS |
|---|---|
| 动态类型 | 静态类型 |
| 弱类型语言 | 弱类型语言 |
动静态类型的含义
动态类型是指执行阶段确定匹配
静态类型的优势：
- 可读性增强
- 可维护性增强
由此可以在多人合作的大型项目中，静态类型有更好的稳定性与开发效率
强弱类型语言 弱：JS可以进行类型转换，字符串1与number1之间的转换 强：不行
TS是JS的超集，包含和兼容所有JS特性，支持共存，并且支持渐进式引入与升级
如何练习
编辑器推荐
- VS Code
- TS官网下载的工具
基本语法
基础数据类型
左侧为JS，右侧为TS
对象数据类型
对于一个对象来说，需要自定义类型
约定俗成：用大写I开头来表示这是一个类型，区别于普通的对象或者类
用interface自定义，只读属性、可选属性、任意属性，创建格式如图左下
函数类型
声明类型
为函数声明类型的两种方法：
- 直接在函数上进行类型补充
- 定义一个interface接口类型直接赋值
函数重载
数组类型
特殊的object
补充类型
空类型、任意类型、枚举类型
泛型
一种变量指代
type类型别名与类型断言
字符串、数字、字面量
高级类型
通过各种基础类型来定义高级类型
联合/交叉类型
右侧比左侧代码更多，且type所指不明，如何改进呢？
利用联合/交叉类型
- 联合类型：表示一个值可以是几种类型之一 IA|IB
- 交叉类型：多种类型叠加到一起成为一种类型，包含了所需的所有类型的特性 * IA & IB*
类型保护与类型守卫
类型守卫
merge函数
函数返回值类型
工程应用
webpack
- 配置webpack loader相关配置
- 配置tsconfig.js文件
- 运行webpack启动与打包
- loader处理ts文件时，会进行编译与类型检查
Node.js
文中图片均来源字节青训营PPT
