TypeScript从入门到精通（详解）

TypeScript 是什么

1. TypeScript 简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。
2. 在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript
3. TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行

// TypeScript  代码有明确的数据类型
let age1: number = 18
// JavaScript  代码没有明确的类型
let age2 = 18

为什么要为 JS 添加类型支持?

JS的缺陷

1. JS 的类型系统是弱类型的，没有类型的概念

   let ar = 11  // 这里是数值
   ar = []  // 偷偷的改成了数组类型
   arr.toFixed(2) // 这里会报类型错误
   

   没有类型校验，导致了在使用 JS 进行项目开发时，会经常遇到类型错误的问题，增加了找 Bug、改 Bug 的时间，严重影响开发效率

2. JavaScript 属于动态类型的编程语言

   边解释边执行，错误只能在运行阶段才能发现。

TS属于静态类型的编程语言

1. 它要先编译，再执行。不能直接执行，需要编译成js才能执行
2. 它会在编译期间做类型检查，从而提前发现错误。配合 VSCode 等开发工具，TS 可以提前到在编写代码的同时就发现代码中的类型错误，减少找 Bug、改 Bug 时间

对比：

• 使用 JS：
  1. 在 VSCode 里面写代码
  2. 在浏览器中运行代码 --> 运行时，才会发现错误【晚】
• 使用 TS：
  1. 在 VSCode 里面写代码 --> 写代码的同时，就会发现错误【早】
  2. 在浏览器中运行代码

生态

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

目前，前端最新的开发技术栈：

1. React： TS + Hooks
2. Vue： TS + Vue3

注意： Vue2 对 TS 的支持不好~

TypeScript 初体验

目标

安装可以把TS编译成JS的工具，搭建一个可以运行TS的环境

全局安装编译 TS 的工具包

安装包：npm i -g typescript

• typescript 包：用来编译 TS 代码的包，提供了 tsc 命令，实现了 TS -> JS 的转化
• 验证是否安装成功：tsc –v (查看 typescript 的版本)

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

编译并运行 TS 代码

步骤

1. 创建js文件。例如 hello.ts 文件（注意：TS 文件的后缀名为 .ts）

2. 编译。将 TS 编译为 JS

   在终端中输入命令，tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件）

3. 执行 JS 代码。

   1. 在node中运行。在终端中输入命令，node hello.js
   2. 在浏览器中运行。

拓展：在线运行

https://www.typescriptlang.org/play

ts-node 简化运行 TS 的步骤

目标

了解ts-node命令的基本使用；

问题描述

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

tsc  你的代码.ts

node 你的代码.js

简化方式

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

安装命令

npm i -g ts-node

使用方式：ts-node hello.ts 相当于：1 tsc 命令 2 node（注意：ts-node 不会生成 js 文件）

解释：ts-node 命令在内部偷偷的将 TS -> JS，然后，再运行 JS 代码

小结

在初始学习阶段，我们会使用ts-node来运行代码，在项目阶段就不会再这样使用了。

ts-node报错问题

console.log报错问题

Cannot find name 'console'. Do you need to change your target library? Try changing thelibcompiler option to include 'dom'.

解决

1. tsc --init 生成配置文件 tsconfig.json
2. 写代码时，用{}包起来

TypeScript 语法

TS类型注解

目标

了解类型注解的概念； 能掌握类型注解的使用方式

背景

TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统

• TS中定义变量(常量)可以指定类型了。
• A类型的变量不能保存B类型的数据

可以显示标记出代码中的意外行为，从而降低了发生错误的可能性

类型注解

格式

let 变量名: 类型 = 初始值

示例代码:

let age: number = 18

说明：代码中的 : number 就是类型注解

作用：为变量添加类型约束**。

上述代码中，约定变量 age 的类型为 number 类型，就只能给变量赋值该类型的值，否则，就会报错

// 错误代码：
// 错误原因：将 string 类型的值赋值给了 number 类型的变量，类型不一致
let age: number = '18'

类型推论

目标

了解类型推论的场景

类型推论

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

发生类型推论的 2 种常见场景

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

// 变量 age 的类型被自动推断为：number
let age = 18

// 函数返回值的类型被自动推断为：number
function add(num1: number, num2: number) {
   
   
  return num1 + num2
}

VSCode中的编码技巧

• 如果不知道类型，可以通过鼠标放在变量名称上，利用 VSCode 的提示来查看类型

• 写代码的时候，多看方法、属性的类型，养成写代码看类型的习惯

TS的类型

目标

了解ts中的数据类型

常用基础类型

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

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

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

原始类型

• 原始类型：number/string/boolean/null/undefined/symbol
• 特点：简单，这些类型，完全按照 JS 中类型的名称来书写

// 数值类型
let age: number = 18

// 字符串类型
let myName: string = '小花'

// 布尔类型
let isLoading: boolean = false

// undefined
let un: undefined = undefined

// null
let timer:null = null

联合类型

需求

如何定义一个变量可以是null也可以是 number 类型?

目标

掌握联合类型的用法

let arr: (number | string)[] = [1, 'a', 3, 'b']

联合类型的格式

let 变量: 类型1 | 类型2 | 类型3 .... = 初始值

解释：|（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种

应用场景

1. 定时器id

// | 联合类型

// 联合类型1： 变量可以是两种类型之一
let timer:number|null = null
timer = 2

// 联合类型2： 数组元素可以是两种类型之一
let arr: (number|string|boolean)[] = [1,2,3]

arr[0] = '1'
arr[2] = true

注意：这是 TS 中联合类型的语法，只有一根竖线，不要与 JS 中的或（|| 或）混淆了

数组类型

目标

掌握在ts中使用数组的方法。

两种写法

格式

let 变量: 类型[] = [值1，...]

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

基本示例

// 写法一：
let numbers: number[] = [1, 3, 5] //  numbers必须是数组，每个元素都必须是数字

// 写法二：
let strings: Array<string> = ['a', 'b', 'c'] //  strings必须是数组，每个元素都必须是字符串

拓展示例

如何定义一个数组，它的元素可能是字符串类型，也可能是数值类型。

分析，结合联合类型来使用

let arr: (number | string) [] = ['1', 1]

这里有个有优先级的问题

小结

推荐使用 number[] 写法

类型别名

目标

掌握类型别名的用法，能给类型起别名。

格式

定义

type 别名 = 类型

使用

type s = string // 定义

const str1:s = 'abc'
const str2:string = 'abc'

作用

1. 给类型起别名
2. 定义了新类型

场景

给复杂类型起别名

// type NewType = string | number

// let a: NewType = 1
// let b: NewType = '1'

// let arr: NewType[] = [1, '1']
    
type MyArr = (number | string) []
const arr:MyArr = [1, '1']

别名可以是任意的合法字符串，一般首字母大写

函数-单个定义

目标

对函数中涉及的类型进行约定

函数的类型

函数的类型实际上指的是：函数参数和返回值的类型

格式

// 普通函数
function 函数名(形参1： 类型=默认值， 形参2：类型=默认值): 返回值类型 {
   
    }

// 箭头函数
const 函数名（形参1： 类型=默认值， 形参2：类型=默认值):返回值类型 => {
   
    }

示例

// 函数声明
function add(num1: number, num2: number): number {
   
   
  return num1 + num2
}

// 箭头函数
const add = (num1: number=10, num2: number=20): number => {
   
   
  return num1 + num2
}

add（1,'1') // 报错

函数-统一定义函数格式

问题

定义多个具有相同参数类型和返回值类型的函数时，代码比较累赘

const add = (a:number,b:number):number =>{
   
   
        return a + b
    }

    const sub = (a:number,b:number):number