typescript学习笔记整理（上）

一时失言乱红尘 2023-09-29 03:00 11阅读 0赞

### TypeScript 介绍 ###

*  [TS 官方文档][TS]
 *  [TS 中文参考 - 不再维护][TS _ -]

![TS Logo][]

1.  TypeScript 是什么
2.  TypeScript 为什么要为 JS 添加类型支持?
3.  TypeScript 相比 JS 的优势

#### 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 = []  // 偷偷的改成了数组类型
        ar.toFixed(2) // 这里会报类型错误
    
    没有类型校验，导致了在使用 JS 进行项目开发时，会经常遇到类型错误的问题，增加了找 Bug、改 Bug 的时间，严重影响开发效率
2.  JavaScript 属于**动态类型的编程语言**
    
    边解释边执行，错误只能在**运行阶段**才能发现。

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

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

对比：

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

#### 小结 ####

1.  TS是\_\_\_\_\_\_ + Script的简写，它是\_\_\_开发的开源编程语言。
2.  TS是JS的\_\_\_\_超集，它在js的基础上增加了\_\_\_\_支持。

### TypeScript和JS的对比 ###

目标

#### javascript和Typescript的区别 ####

1.  ts完全兼容javascript，它可以编译成javascript
2.  使用TS会有强大的**代码类型提示**
3.  提升了代码的可维护性，使得重构代码更容易
4.  支持最新的 ECMAScript 语法。`.ts-----编译---> .js`

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w7wb5y8S-1652532070519)(asset/TS编译.png)\]

#### 生态 ####

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.  创建ts文件。例如 hello.ts 文件（注意：**TS 文件的后缀名为 `.ts`**）
2.  编译。将 TS 编译为 JS
    
    在终端中输入命令，`tsc hello.ts`（此时，在同级目录中会出现一个同名的 JS 文件）
3.  执行 JS 代码。
    
    1.  在node中运行。在终端中输入命令，`node hello.js`
    2.  在浏览器中运行。

#### 拓展：在线运行 ####

https://www.typescriptlang.org/play

#### 小结 ####

1.  要运行.ts文件，先要全局安装\_\_\_\_包，它的提供\_\_\_命令，将.ts转成.js文件。

### 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 the`lib`compiler option to include 'dom'.`

#### 解决 ####

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

### TS类型注解 ###

#### 目标 ####

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

#### 背景 ####

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

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

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

#### 类型注解 ####

格式

let 变量名: 类型 = 初始值

示例代码:

let age: number = 18

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

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

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

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

### 错误提示-拓展 ###

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DjmE0rTC-1652532070522)(asset/image-20211123151718680.png)\]

### 类型推论 ###

#### 目标 ####

了解类型推论的场景

#### 类型推论 ####

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

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

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

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

#### VSCode中的编码技巧 ####

*  如果不知道类型，可以通过鼠标放在变量名称上，利用 VSCode 的提示来查看类型
 *  写代码的时候，多看方法、属性的类型，养成写代码看类型的习惯
    
    \[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cU1KJiKh-1652532070523)(asset/image-20211025144309989.png)\]

console.log()
    document.createElement()

### 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']

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

#### 小结 ####

1.  类型别名的关键字是\_\_\_
2.  类型别名的作用是

### 函数-单个定义 ###

#### 目标 ####

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

#### 函数的类型 ####

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

#### 格式 ####

// 普通函数
    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') // 报错

#### 小结 ####

1.  返回值的类型注解写在()的后边

### 函数-统一定义函数格式 ###

#### 问题 ####

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

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

#### 分析 ####

把拥有相同形参和实参的函数当做一个整体，来定义

const add1 : (n1:number,n2:number)=>number  =  (a,b)=>{
        return a+b }

提炼自定义类型

type Fn = (n1:number,n2:number) =>number 
    const add1 : Fn = (a,b)=>{
        return a+b }

#### 小结 ####

1.  分别指定参数和返回值的类型
2.  统一指定函数类型(类型别名来优化， 使用于函数表达式)

### 函数返回值是void ###

#### 目标 ####

掌握函数的返回值是void的情况

#### void 类型 ####

如果函数没有返回值，那么，函数返回值类型为：`void`

function greet(name: string): void {
        
      console.log('Hello', name)
      //
    }

如果一个函数没有返回值，此时，在 TS 的类型中，应该使用 `void` 类型，有如下三种情况会满足

*  不写return
 *  写return ，但是后面不接内容
 *  写return undefined

// 如果什么都不写，此时，add 函数的返回值类型为： void
    const add = () => {
        }
    // 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同
    const add = (): void => {
        }
    
    // 但，如果指定 返回值类型为 undefined，此时，函数体中必须显示的 return undefined 才可以
    const add = (): undefined => {
        
      // 此处，返回的 undefined 是 JS 中的一个值
      return undefined
    }

#### void和undefined的区别 ####

1.  如果函数没有指定返回值，调用结束之后，值是undefined的
2.  当不能直接声明返回值是undefined
    
        function add(a:number, b:number): undefined {
               // 这里的会报错
          console.log(a,b)
        }

#### 小结 ####

没有返回值的函数要指定它的类型是\_\_\_\_\_\_\_\_\_

### 函数-可选参数 ###

#### 目标 ####

掌握可选参数的使用，能用可选参数定义函数

#### 场景 ####

使用函数实现某个功能时，参数可以传也可以不传。

例如：数组的 slice 方法，可以 `slice()` 也可以 `slice(1)` 还可以 `slice(1, 3)`\]

这种情况下，在给函数参数指定类型时，就用到**可选参数**了

#### 格式 ####

可选参数：在可选参数名的后面添加 `?`（问号）

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

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

#### 可选和默认值的区别 ####

相同点： 调用函数时，可以少传参数

区别：设置了默认值之后，就是可选的了，不写就会使用默认值； 可选的并一定有值。

注意：它们不能一起使用。优先使用默认值

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bZxexvAp-1652532070523)(asset/image-20211123163705731.png)\]

### 对象类型-单独使用 ###

#### 目标 ####

掌握给对象指定类型的描述

#### 格式 ####

const 对象名: {
    	属性名1：类型1，
      属性名2：类型2，
      方法名1(形参1: 类型1，形参2: 类型2)： 返回值类型,
      方法名2:(形参1: 类型1，形参2: 类型2)=>返回值类型
    } = { 属性名1: 值1，属性名2：值2  }

可选属性用 ?

const 对象名: {
        属性名1？：类型1，属性名2：类型2 } = {
         属性名2：值2 }

#### 示例 ####

const goodItem:{
        name: string, price: number, func: ()=>string }  = {
        
        name: '手机', 
        price: 2000, 
        func:function(){
         return '打电话' }
    }

说明:

1.  使用 `{}` 来描述对象结构
2.  属性采用`属性名: 类型`的形式，如果是多行，可以省略,
3.  方法采用`方法名(): 返回值类型`的形式
4.  可选使用 ?

### 对象类型-类型别名 ###

#### 目标 ####

用类型别名来简化定义对象的类型的方式

#### 思路 ####

把类型注解封装一下，定义类型

#### 示例 ####

// 创建类型别名
    type Person = {
        
      name: string，
      age: number
      sayHi(): void
    }
    
    // 使用类型别名作为对象的类型：
    let person: Person = {
        
      name: '小花',
      age: 18
      sayHi() {
        }
    }
    
    function f1 (p: Persion) :void {
        
      
    }

#### 小结 ####

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

### 对象类型-练习 ###

创建两个对象：
    学生对象
    
    指定对象的类型
    - 姓名
    - 性别
    - 成绩
    - 身高
    - 学习（）
    - 打游戏（）

### 对象类型-接口 ###

#### 目标 ####

掌握接口的使用

#### 场景 ####

当一个对象类型被多次使用时，可以有两种方式来来**描述对象**的类型，达到复用的目的。

1.  类型别名，type
2.  接口, interface

#### 格式 ####

interface 接口名  {
        
        属性1: 类型1, 属性2: 类型2,
    }

#### 示例 ####

interface IGoodItem  {
        
        name: string, price: number, func: ()=>string
    }
    
    
    const good1: IGoodItem = {
        
        name: '手表',
        price: 200,
        func: function() {
        
            return '看时间'
        }
    }
    
    const good2: IGoodItem = {
        
        name: '手机',
        price: 2000,
        func: function() {
        
            return '打电话'
        }
    }

解释：

1.  使用 `interface` 关键字来声明接口
2.  接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以 `I` 开头
3.  声明接口后，直接使用接口名称作为变量的类型

#### 接口和类型的区别 ####

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

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

推荐：**能使用 type 就是用 type**

// 接口的写法-------------
    interface IPerson {
        
    	name: string,
    	age: number
    }
    
    const user1：IPerson = {
        
    	name: 'a',
    	age: 20
    }
    
    // type的写法-------------
    type Person  = {
        
    	name: string,
    	age: number
    }
    const user2：Person = {
        
    	name: 'b',
    	age: 20
    }

### 接口继承 ###

#### 目标 ####

掌握接口的继承

#### 背景 ####

比如，这两个接口都有 x、y 两个属性，重复写两次，可以，但很繁琐

interface IPoint2D {
         x: number; y: number }
    interface IPoint3D {
         x: number; y: number; z: number }

#### 分析 ####

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

#### 继承格式 ####

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

#### 接口继承的示例 ####

interface Point2D {
         x: number; y: number }
    // 继承 Point2D
    interface Point3D extends Point2D {
        
      z: number
    }

解释：

1.  使用 `extends`(继承)关键字实现了接口 Point3D 继承 Point2D
2.  继承后，Point3D 就有了 Point2D 的所有属性和方法(此时，Point3D 同时有 x、y、z 三个属性)

#### 小结 ####

1.  接口继承的关键字是\_\_\_\_\_\_
2.  继承的作用是\_\_\_
3.  如果复杂的类型没有涉及继承关系，就可以直接使用\_\_\_\_，如果涉及了继承可以使用\_\_\_

### 元组 ###

#### 目标 ####

掌握元组类型的使用

#### 场景 ####

固定结构的数据， 例如

*  使用经纬度坐标来标记位置信息
 *  使用x,y来记录鼠标的位置

可以使用数组来记录坐标

let position: number[] = [116.2317, 39.5427] // 数组的元素都是数值类型

#### 问题 ####

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

#### 元组 Tuple ####

**元组是**另一种特殊的**数组**：

*  它确切地包含多少个元素
 *  特定索引对应的类型

let position: [number, number] = [39.5427, 116.2317]

解释：

1.  元组类型可以确切地标记出有多少个元素，以及每个元素的类型
2.  该示例中，元素有两个元素，每个元素的类型都是 number

#### 示例 ####

模拟定义useState。

useState的返回值是一个数组，第一个元素是number，第二个是修改number的函数。

function useState(n: number): [number, (number)=>void] {
        
            const setN = (n1) => {
        
                n = n1
            }
            return [n, setN]
        }
    
    const [num ,setNum] = useState(10)

### 字面量类型 ###

#### 思考 ####

let str1 = 'hello 武汉'
    const str2 = 'hello 武汉'

问： str1是什么类型？ str2是什么类型？

通过 TS 类型推论机制，可以得到答案：

1.  变量 str1 的类型为：string
2.  变量 str2 的类型为：‘Hello TS’

#### 解释 ####

1.  str1 是一个变量(let)，它的值可以是任意字符串，所以类型为:string
2.  str2 是一个常量(const)，它的**值不能变化**只能是 ‘hello 武汉’，所以，它的类型为:‘hello 武汉’

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

#### 字面量类型 ####

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

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PhpuvNp6-1652532070525)(asset/image-20211123190033005.png)\]

说明：

1.  上面的let a等价于const
2.  简写为 const a = ‘abc’

字面量：`{ name: 'jack' }` `[]` `18` `20` `'abc'` `false` `function() {}`

#### 字面量的作用 ####

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

#### 示例1 ####

比如，在贪吃蛇游戏中，游戏的方向的可选值只能是上、下、左、右中的任意一个

// 使用自定义类型:
    type Direction = 'up' | 'down' | 'left' | 'right'
    
    function changeDirection(direction: Direction) {
        
      console.log(direction)
    }
    
    // 调用函数时，写上''，就会有类型提示：
    changeDirection('up')

解释：参数 direction 的值只能是 up/down/left/right 中的任意一个

优势：相比于 string 类型，使用字面量类型更加精确、严谨

#### 示例2 ####

redux 中的actiontype

type ActionType = 'ADD_TODO' | 'DEL_TODO'
    function reducer(type:ActionType) {
        
      if(type === 'ADD_TODO')
    }

#### 示例3 ####

性别取值只能有两个

let gender: 'girl' | 'boy' = 'boy'
        gender = 'abc' // 报错

#### 小结 ####

字面量类型约定：只能取**某些个**特定的值。一般和联合类型一起使用。

[TS]: https://www.typescriptlang.org/
[TS _ -]: https://www.tslang.cn/
[TS Logo]: