一、何为 TS

TS 是 type + Script 的简写
它是微软公司开发的开源编程语言
TS 是 JS 的超集，它在 js 的基础上增加了类型支持简而言之，JS 有的 TS 都有，JS 写的代码在 TS 的环境下都能跑。

// ◆ JavaScript  代码没有明确的类型
let a = 6;

// ◆ TypeScript  代码有明确的数据类型
let a: number = 6

TypeScript 起源：TypeScript 起源于使用 JavaScript 开发的大型项目。由于 JavaScript 语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了 TypeScript ，使得其能够胜任开发大型项目。

二、JS 和 TS 的区别

JS 是动态语言（边解析->边执行），TS 是静态语言（先编译-->执行）
TS 是包含 JS 的， JS 的所有语法在 TS 中支持
TS 有强大的 代码类型提示，在写代码的过程中就能发现问题
TS 是前端不可避免的趋势
1. React： TS + Hooks
2. Vue： TS + Vue3

前端三大框架: Vue 3 源码使用 TS 重写、Angular 默认支持 TS、React 与 TS 完美配合，TypeScript 已成为大中型前端项目的首选编程语言。

三、体验 TypeScript

1.搭建一个可以运行 TS 的环境

全局安装编译 TS 的工具包 npm i -g typescript
typescript 包：用来编译 TS 代码的包，提供了 tsc 命令，实现了 ts -> js 的转化
查看 typescript 的版本：tsc –v

注意：Mac 电脑安装全局包时，需要添加 sudo 获取权限：sudo npm i -g typescript

2.编译并运行 TS 代码

找一个风水宝地，创建 ts 文件，顺便来点东西。例如 01_express.ts 文件（注意：TS 文件的后缀名为 .ts）

将 TS 编译为 JS，在终端中输入命令，tsc 01_express.ts（此时，在同级目录中会出现一个同名的 JS 文件）

执行 JS 代码。
- 法1：node 中运行。在终端中输入命令，node 01_express.js
- 法2：在浏览器中运行。

3.ts-node 简化运行 TS 的步骤

（1）问题思考：

每次修改代码后，都要重复执行两个命令，才能运行 TS 代码，太繁琐。

tsc 01_express.ts
node 01_express.js

（2）简化方式

使用 ts-node 包，直接在 Node.js 中执行 TS 代码。它提供了 ts-node 命令，可以简化执行命令。

安装命令: npm i -g ts-node
使用方式：ts-node 01_express.ts

注意：ts-node 不会生成 js 文件，ts-node 命令在内部偷偷的将 TS -> JS，然后，再运行 JS 代码

4.运行代码报错的问题

（1）console.log报错问题

原因：没有创建 ts 项目，没有写配置文件
解决：用 tsc --init 命令，在根目录下生成配置文件 tsconfig.json

（2）同名的变量冲突问题

原因：目前写的代码不是模块化的环境，定义的变量都是全局的。
解决：
- 方式1：写代码时，用 { } 整体给包起来
- 方式2：export { } or export default { }

四、深入 TypeScript

1. TS 类型注解

类型注解

背景：TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统
- TS 中定义变量(常量)可以指定类型了。
- A 类型的变量不能保存 B 类型的数据
定义：给变量添加类型约束。
作用：为变量添加类型约束
格式与示例：

{
    // let 变量名: 类型 = 初始值
    let a: number = 4
    let str: string = '你好呀,TS'
    let bol: boolean = false
}

说明：代码中的 : number、: string、: boolean 就是类型注解 上述代码中，约定变量 a 的类型为 number 类型，就只能给变量赋值该类型的值，否则，就会报错

2. 初识 TS 的类型

常用基础类型

TS 中的常用基础类型分为两类

JS 已有类型
- 原始类型：number/string/boolean/null/undefined/symbol/bigInt
- 对象类型：object（包括，数组、对象、函数等对象）
TS 新增类型
- 联合类型
- 自定义类型(类型别名)
- 接口
- 元组
- 字面量类型
- 枚举
- void
- any
- unkown

注意：原始类型在 TS 和 JS 中写法一致。对象类型在 TS 中更加细化，每个具体的对象（比如: 数组、对象、函数...）都有自己的类型语法。

3. TS 的原始类型

{
    // ◆ 原始类型
    // 1.数值类型
    let num: number = 78
    // 2.字符串类型
    let str: string = '你好呀！'
    // 3.布尔类型
    let bol: boolean = false
    // 4.undefined
    let und: undefined = undefined
    // 5.null
    let nul: null = null
    // 6.symbol
    let syb: symbol = Symbol()
    // 7.bigint
    let bIng: bigint = 44444423484888888n
}

如果 bigint 出现以下报错，在 tsconfig.json 中做如下配置的更改：

// "target": "es2016", 
 "target": "esnext",  //  esnext 包含所有类型

4. 关于类型推论

(1)类型推论

在 TS 中，某些没有明确指定类型的情况下，TS 的类型推论机制会自动提供类型。好处：由于类型推论的存在，有些情况下的类型注解可以省略不写

(2)常见场景

声明变量并初始化时
决定函数返回值时

{
    // ◆ 类型推论
    
    // 1.变量 age 的类型被自动推断为：number
    let age = 18
    age = 12
    
    // 2.变量 arr 的类型被自动推断为：array
    let arr = [12, 23, 12]
    arr.push(90)
    
    // 3.函数返回值的类型被自动推断为：number
    function getSum(a: number, b: number) {
        return a + b
    }
}

(3)VSCode中的编码技巧

如果不知道类型，可以通过鼠标放在变量名称上，利用 VSCode 的提示来查看类型
写代码的时候，多看方法、属性的类型，养成写代码看类型的习惯

5.联合类型

思考：如何定义一个变量可以是 null 也可以是 number 类型?
方式：联合类型，用 | 分隔多种类型，如： (null | number)(有点像过滤器中的管道符)
作用：变量可以是多种类型之一
示例：

{
    // ◆ 联合类型
    let a: number | string = 9
    a = 'TS，啦啦啦'

    // ◆ setTimeout 的返回值是 number 
    // 我现在想写 null，像 JS 中一样

    // 写法1：指定多个类型
    let timer: null | number = null
    timer = setTimeout(() => {
    }, 100)

    // 写法2：不指定类型 就是 any
    let timeID = null
    timeID = setTimeout(() => {
    }, 100)
}

6.类型别名

含义：顾名思义，给类型起个名字，有点类似 消除魔法字符串。
作用
- 给类型起别名
- 定义了新类型

{
    // ◆ 类型别名（别名可以是任意的合法字符串，一般首字母大写）
    
    // 1.给原始类型起个别名
    type S = string
    let a: S = '123'
    
    // 2.定义新的类型
    type NewType = string | number
    let b: NewType = 5
    b = '啦啦啦'
}

注意：别名可以是任意的合法字符串，一般首字母大写，常用于给 复杂类型 起别名

7.数组类型

(1)数组类型有两种写法：

方式1：let 变量: 类型[] = [值1，...]
方式2：let 变量: Array<类型> = [值1，...]

(2)数组类型示例

{
  // ◆ 数组类型
  // 写法1：类型[]
  let arr1: string[] = ['a', 'b', 'c']
  arr1.push('c')
  
  // 写法2：Array<类型>
  let arr2: Array<number> = [5, 7, 8, 9]
  arr2.push(45)

  // 写法3：类型推论(额外)
  let arr3 = [5, 6, 7, 8]
  let arr4 = ['f']
}

(3)定义数组的多种类型

{
  // ◆ 定义数组的多种类型(结合联合类型来使用)
  // 法1：(类型1|类型2|...)[]
  let arr5: (string | number)[] = ['a', 7, 'c', 9]
  
  // 法2：Array<类型1|类型2|...>
  let arr6: Array<string | number> = [8, 'c']
  
  // 法3：定义新的类型别名
  type ATypes = string | number | boolean
  let arr7: ATypes[] = ['4', 7, false]
  let arr8: Array<ATypes> = ['4', 7, false]
  
  // 法4：类型推导 
  let arr9 = [9, 'yu', '12', true]
}

8.函数类型

（1）函数的类型

含义：函数涉及的类型实际上指的是：函数参数和返回值的类型
格式：分为普通函数和箭头函数
- function 函数名(形参1：类型=默认值，形参2：类型=默认值,...): 返回值类型 { }
- const 函数名（形参1：类型=默认值，形参2：类型=默认值, ...)：返回值类型 => { }
函数类型示例：

{
    // ◆ 普通函数
    // 1.无默认值
    function fn(a: number, b: number) {
        return a + b
    }
    console.log(fn(4, 6))

    // 2.有默认值
    function fn1(a: number = 4, b: number = 6): number {
        return a + b
    }

    // ◆ 箭头函数
    // 1.无默认值
    const getSum = (a: number, b: number): number => {
        return a - b
    }
    // 2.有默认值
    const getSum1 = (a: number = 3, b: number = 2): number => {
        return a + b
    }

    // ◆ 批量定义函数参数的类型(只针表达式声明的函数，function不行)
    // 1.提炼自定义类型
    type FnType = (n1: number, n2: number) => number
    // 2.使用定义的类型
    const add1: FnType = (a, b) => { return a + b }
    const add2: FnType = (a, b) => { return a - b }
}

注意：返回值的类型注解写在 ( ) 的后边，对于函数表达式，可以统一指定数据类型

（2）函数-返回值类型 void

关于函数-返回值类型 void

在 TS 中，如果一个函数没有返回值，应该使用 void 类型
具体来说：有如下三种情况
- 不写 return
- 写 return ，但是后面不接内容
- 写 return undefined

{
    // 1.如果什么都不写，返回值类型为： void
    const add = () => { }
    // 2.如果 return 之后什么都不写，返回值类型为： void
    const reduce = () => { return }
    // 3.如果 return undefined ,返回值类型为： void
    const edit = (): void => {
        return undefined
    }
    // 4.这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同
    const sub = (): void => { }
}

void 和 undefined 的区别：

如果函数没有指定返回值，调用结束之后，值是 undefined 的，但是不能直接声明返回值是 undefined

（3）函数可选值

关于函数可选值

场景：使用函数实现某个功能时，参数可以传也可以不传
- 例如：数组的 slice 方法，可以 splice() 也可以 splice(0) 还可以 splice(1,3)
格式：
- 在可选参数名的后面添加 ?（问号）

{
    // mySplice()
    function mySlice(start?: number, end?: number): void {
        console.log('起始索引：', start, '结束索引：', end)
    }
    console.log(mySlice(), mySlice(0), mySlice(0, 1))
}

注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数

可选和默认值的区别

相同点：调用函数时，可以少传参数
区别：设置了默认值之后，就是可选的了，不写就会使用默认值；可选的参数一定有值。
注意：它们不能一起使用。优先使用默认值

{
    // ◆ 函数可选值：参数?:类型    
    // ◆ 函数默认值：参数:类型=默认值
    function fn(a: number = 10, b?: number): void {
        console.log(a, b);
    }
   console.log(fn(1), fn(1, 2), fn());
}

9.对象类型

（1）对象类型-单独使用

{
    //  ◆ 单个定义对象
    const student: {
        // 逗号也可以不写，
        name: string,
        // 可选值，下面不写不会报错
        age?: number,
        hello: () => void,
        eat(): void
    } = {
        name: 'Lucy',
        // age: 18,
        hello: () => { },
        eat: function () { }
    }
}

（2）对象类型-类型别名

{
    // ◆ 把类型注解封装一下，定义类型
    type StuType = {
        name: string
        age?: number
        gender: string
        score: number
        height: string | number
        way: () => void
        play(): void
    }
    // 复用1：
    const student1: StuType = {
        name: 'Lucy',
        age: 18,
        gender: '女',
        score: 90,
        height: '1.60',
        way: () => { },
        play: function () { }
    }
    // 复用2：
    const student2: StuType = {
        name: 'Jom',
        gender: '男',
        height: '1.80',
        score: 60,
        way: () => { },
        play: function () { }
    }
}

注意：创建类型别名后，直接使用该类型别名作为变量的类型注解即可

10.接口 interface

（1）接口 interface 的使用

场景：当一个对象类型被多次使用时，有如下两种方式来来描述对象的类型，以达到复用的目的
- 方式1：类型别名，type
- 方式2：接口，interface
格式：interface 接口名 { 属性1: 类型1, 属性2: 类型2}

interface IStu {
    name: string
    age?: number
    gender: string
    score: number
    height: string | number
    way: () => void
    play(): void
}

const student1: IStu = {
    name: 'Lucy',
    age: 18,
    gender: '女',
    score: 90,
    height: '1.60',
    way: () => { },
    play: function () { }
}
const student2: IStu = {
    name: 'Jom',
    gender: '男',
    height: '1.80',
    score: 60,
    way: () => { },
    play: function () { }
}

注意：使用 interface 关键字来声明接口，接口名称(比如，此处的 IStu)；可以是任意合法的变量名称，推荐以 I 开头；声明接口后，直接使用接口名称作为变量的类型。

（2）接口和类型的区别

interface（接口）和 type（类型别名）的对比：

相同点：都可以给对象指定类型
不同点:
- 接口，只能为对象指定类型。它可以继承。
- 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名推荐：能使用 type 就用 type

（3）接口的继承

思考：

如果有两个接口都有 id、price 两个属性，重复写两次，可以，但很繁琐。

分析：

如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用

继承格式：

interface 接口2 extends 接口1 {属性1：类型1， // 接口2中特有的类型...}

interface Ipoint1 {
    id: string,
    price: number
}
interface Ipoint2 extends Ipoint1 {
    count: number
}
const goods1: Ipoint2 = {
    count: 90,
    id: '1234abc',
    price: 50000
}

注意：如果复杂的数据类型没有涉及继承关系，就可以直接使用 type ，如果涉及了继承可以使用 interface

11.元组 Tuple

（1）思考分析

思考：如何定义数据类型来记录经纬度(记录鼠标的位置)坐标信息？

方式：

方式1：用对象
方式2：用数组

{
    // ◆ 用对象
    type Position1 = { dimension: number, longitude: number }
    let p1: Position1 = { dimension: 116.2317, longitude: 39.5427 }

    // ◆ 用数组
    type Position2 = number[]
    let p2: Position2 = [116.2317, 39.5427]
}

使用 number[ ] 的缺点：不严谨，因为该类型的数组中可以出现任意多个数字，而类似于经纬度只能有两个数字。

（2）引入元组

元组是一种特殊的数组，有两点特殊之处

它约定了的元素个数
它约定了特定索引对应的数据类型

{
    // ◆ 元组
    let position1: [number, number] = [456, 900]
    // position1.push(123)  竟然可以 push 不报错 不严谨
    
    // ◆ 回顾：
    // useState 这个 hooks 的返回值就是一个 元组
    // const [age,setAge]=useState(100)
    // setAge(200)
    
    // ◆ 模拟定义一个 useState Hooks
    function useState(age: number): [number, (newAge: number) => void] {
        const setAge = (newAge: number): void => {
            age = newAge
        }
        return [age, setAge]
    }
    const [num, setNum] = useState(100)
    setNum(200)
    console.log(num);// 注意结果还是 100,因为是基础数据类型
}

12.字面量类型

(1)何为字面量类型

任意的 JS 字面量（比如，对象、数字等）都可以作为类型使用，此时，就称为是 字面量类型

{
    // 字符串类型
    let str1: string = '你好呀'

    // 字面量类型
    const str2 = 'add'
    const str3: 'add' = 'add'
}

str1 是一个变量(let)，它的值可以是任意字符串，所以类型为:string
str2 是一个常量(const)，它的值不能变化，只能是 'add'，所以，它的类型为:'add'

注意：此处的 'add'，就是一个字面量类型，也就是说某个特定的字符串也可以作为 TS 中的类型

(2)字面量的作用

单个字面量没有什么用处，它一般和联合类型 一起使用，用来表示一组明确的可选值列表

场景1：约定 gender 的类型

// ◆ 将多个字面量类型组合成联合类型
type Gender = 'girl' | 'boy'
let lucy: Gender = 'girl'
let Jom: Gender = 'boy'

场景2：约定 redux 中的 actionTypes

// ◆ 将多个字面量类型组合成联合类型
type ActionType = 'add' | 'delete' | 'edit'
function reducer(state: {}, action: ActionType) {
    if(action==='add'){

    }else if(action='delete'){

    }else if(action='edit'){

    }
}

注意：字面量一般和 联合类型 一起使用，表示只能取某些个特定的值。相比于 string 类型，使用字面量类型更加精确、严谨，还有提示，很智能！

13.枚举 enum

(1)何为枚举

定义： 枚举（enum）的功能类似于字面量类型+联合类型组合的功能，来描述一个值，该值只能是一组命名常量中的一个。

定义格式： enum 枚举名 { 可取值1, 可取值2,.. }

使用 enum 关键字定义枚举
一般约定首字符大写 使用格式： 枚举名.可取值

// 1.定义枚举类型
enum Colors { Green, Red, Pink, Blue }

// 2.使用枚举类型
function changeColors(color: Colors) {
  console.log(color)
}

// 3.调用函数时，需要应该传入：枚举 Direction 成员的任意一个
// 类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员
changeColors(Colors.Red)// 1

TS 中没有 type 之前，用枚举比较多，现在用的少了

(2)枚举的值

枚举类型和 ts 中其他的类型不一样，枚举类型不仅仅是类型，还是一个值。
- type 定义的类型是没有值的
- 枚举定义的类型是有值的

type 定义的类型

{
    // ◆ 1.type定义的类型是没有值的，不能console.log
    type NewType = number | string
    // console.log(NewType)  // 会报错，输出类型是没有意义的
}

枚举定义的类型

{
    // ◆ 2.枚举的值是有意义的，可以console.log
    enum Colors { Green, Red, Pink, Blue }
    console.log(Colors)
}

(3)数字枚举

默认情况下，枚举的值是数值。默认为：从 0 开始自增的数值
也可以给枚举中的成员初始化值

{
    //◆ 没有初始值，使用默认值
    enum Direction1 { Up, Down, Left, Right }
    console.log(Direction1, 'Direction1');

    //◆ 部分定义了初始值
    enum Direction2 { Up = 10, Down, Left, Right }
    console.log(Direction2, 'Direction2');

    //◆ 全部定义了初始值
    enum Direction3 { Up = 2, Down = 3, Left = 8, Right = 16 }
    console.log(Direction2, 'Direction3');
}

(4)字符串枚举

字符串枚举没有自增长行为
字符串枚举的每个成员必须有初始值

{
    enum Direction {
        Up = 'UP',
        Down = 'DOWN',
        Left = 'LEFT',
        Right = 'RIGHT'
    }
    console.log(Direction)
    // { Up: 'UP', Down: 'DOWN', Left: 'LEFT', Right: 'RIGHT' }
}

(5)枚举类型的应用场景

举例：比如最常见的，后端用 0, 1 来标识性别，但是 0，1 在代码中不好读，此时可以用枚举来约定。

{
  // 1.定义枚举类型
  enum Gender {
    girl,
    boy
  }
  // 2.定义联合类型
  type User = {
    name: string,
    gender: Gender
  }

  // 3.应用
  const stu1: User = {
    name: '小花',
    gender: Gender.girl // 写代码的时候，可以利用代码提示
  }
  const stu2: User = {
    name: '小草',
    gender: Gender.boy // 写代码的时候，可以利用代码提示
  }

  console.log(stu1, stu2) // { name: '小花', gender: 0 } { name: '小草', gender: 1 }
}

注意：一般情况下，推荐使用字面量类型+联合类型组合的方式，因为相比枚举，这种方式更加直观、简洁、高效更多内容请查看 typeScript 官网，也可以在线运行。

你要 偷偷 学 TS，然后惊艳自己！