傻瓜式typescript——小白入门篇

解释

1. JS：JavaScript缩写
2. TS：TypeScript缩写

结论

1. JS能做的事情，TS都能做，TS只是给JS增加了类型，地球人都知道JS是一门弱类型语言，非常灵活的同时，缺点也很明显，这意味着JS在运行时可能会出现类型错误。TS 提供了静态类型检查，有助于在编译阶段捕获类型错误。这可以防止运行时出现许多类型错误，并帮助开发人员编写更可靠的代码。

如何学习？

本文通过技术蛋老师的一个视频进行学习，具体学习步骤就是，通过做一个小项目，进行学习TS，理解为什么需要TS，JS的缺点，TS的优点等等！

步骤

1. 全局安装 TS 命令： npm i typescript -g (mac不同)
2. 创建一个TS文件，创建并打印一个变量
3. 在终端输入tsc --init，我们会多了一个文件tsconfig.json
4. 打开tsconfig.json我们可以看到有一个"target": "es2016" ，这里是将TS编译成JS遵循的标准
5. 终端输入tsc，就会将我们的TS转为JS，对应的同名的JS文件
6. 我们定义变量，可以在变量后使用冒号加一个类型值，就可以申明这个变量的类型了，举个例子：let name: string = 'xiaoming'这里如果给name赋值数值类型，编译的时候就会出错，而不是等到项目上线才会发现这个bug
7. 我们可以使用tsc -w这里的w表示watch，每当文件保存的时候，就会自动的编译此文件为js文件
8. 我们可以使用断言来解决一些问题，使用断言的方式非常简单，就是在值的末尾使用 as + 类型 即可，举个例子，let dom = document.querySelector('button') as HTMLButtonElement这样，我们就强制告诉dom是一个按钮类型的值
9. 但是，断言的问题是被断言的值是有问题的，所有我们可以使用联合类型，来处理类型为多种情况的场景，使用方式非常简单，使用 | 来连接两个类型，举个例子：let dom: HTMLButtonElement | null = document.querySelector('button')
10. 当我们要给一个对象申明类型的时候，并且这个类型还有很多地方需要复用，我们就可以使用 interface 接口了，使用非常简单，举个例子，interface item {name: string; age: number; sex: 'boy' | 'girl'}
11. 我们可以在方法形参括号后加上一个类型，来指定返回类型，举个例子：function aa(): void {}
12. 当我们并不知道Promise返回的具体内容的时候，我们可以用TS的泛型来表示，举个例子：function getJSON(url: string) {}，这里的T表示的就是一个占位符，表示现在并不确定里面的类型
13. 我们在使用 getJSON 方法的时候，可以去确定这个 T 的具体类型
14. 我们通常定义一个数组类型里面的元素类型，是通过在 [] 前面加上一个具体的类型，例如： let arr: string[] = ['1', '2'],如果数组的元素是对象，那么我们就通过接口（interface）来定义
15. 我们可以把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')
  }

1. 我们可以在 addEventListener后面加上 <'click'>来防止我们在后面监听事件值上出现拼写错误
2. a 标签的 TS 类型为HTMLAnchorElement
3. Event事件类型，有鼠标事件和键盘事件的区别

小知识

1. 绝大多数游览器识别不了TS，我们需要将TS编译成JS（看过极简Next.js的应该理解），然后给游览器识别运行
2. tsc表示typescript compiler编译器的意思！init表示初始化
3. 类型的首字母是小写，不是大写
4. 使用TS，定义任何东西，要注明类型，调用任何东西要检查类型；
5. 类在接收接口（interface）的时候，不能使用变量声明的方式，也就是不能使用冒号（:），我们需要使用 implements 关键字，也就是实现的意思，举个例子：class Cat implements item {}
6. 如果，你的接口里的有些键值对，有可能存在，也有可能不存在，我们可以在键的后面加上 ? 来告诉TS这个值可能不存在，举个例子 interface item {name: string; age: number; like?: object}