TypeScript
背景：
JS 的类型系统存在“先天缺陷”弱类型，JS 代码中绝大部分错误都是类型错误（Uncaught TypeError） 开发的时候，定义的变量本应该就有类型 这些经常出现的错误，导致了在使用 JS 进行项目开发时，增加了找 Bug、改 Bug 的时间，严重影 响开发效率 。
从编程语言的动静来区分，TypeScript 属于静态类型的编程语言，JavaScript 属于动态类型的编程 语言 、
- 静态类型：编译期做类型检查
- 动态类型：执行期做类型检查
对于 TS 来说：在代码编译的时候（代码执行前）就可以发现错误（早）
Vue 3 源码使用 TS 重写、Angular 默认支持 TS、React 与 TS 完美配合，TypeScript 已成为大中型前端 项 目的首选编程语言
目前，前端最新的开发技术栈：
- React： TS + Hooks
- Vue： TS + Vue3
注意： Vue2 对 TS 的支持不好~
安装编译 TS 的工具包
目标：能够安装ts的工具包来编译ts
内容： 问题：为什么要安装编译 TS 的工具包?
回答：Node.js/浏览器，只认识 JS 代码，不认识 TS 代码。
需要先将 TS 代码转化为 JS 代码，然后 才能运行 安装命令：
npm i -g typescript 或者 yarn global add typescript typescript
用来编译 TS 代码的包，提供了 tsc 命令，实现了 TS -> JS 的转化
注意：Mac 电脑安装全局包时，需要添加 sudo 获取权限： sudo npm i -g typescript yarn
全局安装：
sudo yarn global add typescript
验证是否安装成功：tsc –v(查看 typescript 的版本)
创建基于TS的vue项目
目标：能够使用vite创建vue-ts模板的项目
内容： 基于vite创建一个vue项目，使用typescript模板
yarn create vite vite-ts-demo --template vue-ts
TypeScript基础
TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统
所有的 JS 代码都是 TS 代码
JS 有类型（比如，number/string 等），但是 JS 不会检查变量的类型是否发生变化，而 TS 会 检查 TypeScript 类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能 性
let age = 18
let age: number = 18 - : number 就是类型注解
- 为变量添加类型约束。比如，上述代码中，约定变量 age 的类型为 number 类型
- 约定了类型之后，代码的提示就会非常的清晰
- 变量的初始值的类型 就是该变量的类型
// 错误代码：
// 错误原因：将 string 类型的值赋值给了 number 类型的变量，类型不一致
let age: number = '18'TypeScript类型概述
JS 已有类型
- 原始类型，简单类型（ number/string/boolean/null/undefined ）
- 复杂数据类型（数组，对象，函数等）
TS 新增类型
- 联合类型
- 自定义类型（类型别名）
- 接口
- 元组
- 字面量类型
- 枚举
- void ...
TypeScript原始数据类型
原始类型：number/string/boolean/null/undefined
特点：简单，这些类型，完全按照 JS 中类型的名称来书写
let age: number = 18 let myName: string = '老师' let isLoading: boolean = false // 等等...
数组类型
数组类型的两种写法： 推荐使用 number[] 写法
// 写法一：
let numbers: number[] = [1, 3, 5]
// 写法二：
let strings: Array = ['a', 'b', 'c']
元组
let arr3 :[number , number,boolean]=[19,10,true] 联合类型
需求：数组中既有 number 类型，又有 string 类型，这个数组的类型应该如何写?
let arr: (number | string)[] = [1, 'a', 3, 'b']- 解释： | （竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这 些类型中的任意一种
- 注意：这是 TS 中联合类型的语法，只有一根竖线，不要与 JS 中的或（|| 或）混淆了
let timer: number | null = null
timer = setInterval(() => {}, 1000)
// 定义一个数组，数组中可以有数字或者字符串, 需要注意 | 的优先级
let arr: (number | string)[] = [1, 'abc', 2]
let obj:{a:1}|{b:'3'}; //表示 只能是a类型 值为1 或者b 类型 值为'3' 不能有其他属性export{} ：可以防止在另一个文件的变量定义后，本文件不能用，加上export{} 本文件中的变量名和其他文件的一样也可以用。
非原始类型 ：
object (常用) Object()
let num1 :object = {a:1};
let num2: object = [1];联合类型 ：
往往一种类型不满足需求的时候我们会有混合的类型 进行解决
let arr :(number | string ) [] =[1,2.3,'abc']
//联合类型：|
//注意事项：|的优先级比较低，需要用（） 包裹，一旦使用联合类型
//那么他们只能用他们共有的类型
timer = setInterval(() => {}, 1000)
// 定义一个数组，数组中可以有数字或者字符串, 需要注意 | 的优先级
let arr: (number | string)[] = [1, 'abc', 2]类型别名
能够使用类型别名给类型起别
类型别名（自定义类型） ：为任意类型起别名
使用场景：当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用
//灵活度高，可以随意搭配使用
//形式一：
type CustomArray = (number | string)[]
let arr1: CustomArray = [1, 'a', 3, 'b']
let arr2: CustomArray = ['x', 'y', 6, 7]
//形式二：
type custom =number | string
let arr5:custom[]=[12,3,3,'abc']
//形式三：
type s = string
type n = number
let str :s = 'abc'
let str :n=23解释:
1. 使用 type 关键字来创建自定义类型
2. 类型别名（比如，此处的 CustomArray ）可以是任意合法的变量名称
3. 推荐使用大写字母开头
4. 创建类型别名后，直接使用该类型别名作为变量的类型注解即可
函数类型
能够给函数指定类型
函数的类型实际上指的是： 函数参数 和 返回值 的类型
为函数指定类型的两种方式： 1. 单独指定参数、返回值的类型
2. 同时指定参数、返回值的类型
1. 单独指定参数、返回值的类型：
// 函数声明
function add(num1: number, num2: number): number {
return num1 + num2
}
// 箭头函数
const add = (num1: number, num2: number): number => {
return num1 + num2
}2. 同时指定参数、返回值的类型 ：
type AddFn = (num1: number, num2: number) => number
const add: AddFn = (num1, num2) => {
return num1 + num2
}- 解释：当函数作为表达式时，可以通过类似箭头函数形式的语法来为函数添加类型
- 注意：这种形式只适用于函数表达式