解释
- JS：JavaScript缩写
- TS：TypeScript缩写
结论
- JS能做的事情，TS都能做，TS只是给JS增加了类型，地球人都知道JS是一门弱类型语言，非常灵活的同时，缺点也很明显，这意味着JS在运行时可能会出现类型错误。TS 提供了静态类型检查，有助于在编译阶段捕获类型错误。这可以防止运行时出现许多类型错误，并帮助开发人员编写更可靠的代码。
如何学习？
本文通过技术蛋老师的一个视频进行学习，具体学习步骤就是，通过做一个小项目，进行学习TS，理解为什么需要TS，JS的缺点，TS的优点等等！
步骤
- 全局安装 TS 命令： npm i typescript -g (mac不同)
- 创建一个TS文件，创建并打印一个变量
- 在终端输入tsc --init，我们会多了一个文件tsconfig.json
- 打开tsconfig.json我们可以看到有一个"target": "es2016" ，这里是将TS编译成JS遵循的标准
- 终端输入tsc，就会将我们的TS转为JS，对应的同名的JS文件
- 我们定义变量，可以在变量后使用冒号加一个类型值，就可以申明这个变量的类型了，举个例子：let name: string = 'xiaoming'这里如果给name赋值数值类型，编译的时候就会出错，而不是等到项目上线才会发现这个bug
- 我们可以使用tsc -w这里的w表示watch，每当文件保存的时候，就会自动的编译此文件为js文件
- 我们可以使用断言来解决一些问题，使用断言的方式非常简单，就是在值的末尾使用 as + 类型 即可，举个例子，let dom = document.querySelector('button') as HTMLButtonElement这样，我们就强制告诉dom是一个按钮类型的值
- 但是，断言的问题是被断言的值是有问题的，所有我们可以使用联合类型，来处理类型为多种情况的场景，使用方式非常简单，使用 | 来连接两个类型，举个例子：let dom: HTMLButtonElement | null = document.querySelector('button')
- 当我们要给一个对象申明类型的时候，并且这个类型还有很多地方需要复用，我们就可以使用 interface 接口了，使用非常简单，举个例子，interface item {name: string; age: number; sex: 'boy' | 'girl'}
- 我们可以在方法形参括号后加上一个类型，来指定返回类型，举个例子：function aa(): void {}
- 当我们并不知道Promise返回的具体内容的时候，我们可以用TS的泛型来表示，举个例子：function getJSON(url: string) {}，这里的T表示的就是一个占位符，表示现在并不确定里面的类型
- 我们在使用 getJSON 方法的时候，可以去确定这个 T 的具体类型
- 我们通常定义一个数组类型里面的元素类型，是通过在 [] 前面加上一个具体的类型，例如： let arr: string[] = ['1', '2'],如果数组的元素是对象，那么我们就通过接口（interface）来定义
- 我们可以把error类型声明为 unkonwn 或者 Error
try {} catch (err: Error | unkonwn) { let message: string if(err instanceof Error) { message = err.message }else { message = String(err) } console.log(message, 'message') }
- 我们可以在 addEventListener后面加上 <'click'>来防止我们在后面监听事件值上出现拼写错误
- a 标签的 TS 类型为HTMLAnchorElement
- Event事件类型，有鼠标事件和键盘事件的区别
小知识
- 绝大多数游览器识别不了TS，我们需要将TS编译成JS（看过极简Next.js的应该理解），然后给游览器识别运行
- tsc表示typescript compiler编译器的意思！init表示初始化
- 类型的首字母是小写，不是大写
- 使用TS，定义任何东西，要注明类型，调用任何东西要检查类型；
- 类在接收接口（interface）的时候，不能使用变量声明的方式，也就是不能使用冒号（:），我们需要使用 implements 关键字，也就是实现的意思，举个例子：class Cat implements item {}
- 如果，你的接口里的有些键值对，有可能存在，也有可能不存在，我们可以在键的后面加上 ? 来告诉TS这个值可能不存在，举个例子 interface item {name: string; age: number; like?: object}
