4.TypeScript基础

TypeScript 基础

1. TypeScript 介绍

1.1 TypeScript 是什么

TypeScript（简称 TS）是 JavaScript 的超集（JS 有的 TS 都有）

在 JS 基础上，为 JS 添加了类型支持

TS 是微软开发的开源编程语言，可以在任何运行 JS 的地方运行

1.2 TypeScript 为什么要为 JavaScript 添加类型支持

JS 的类型存在“先天缺陷”，JS 代码中绝大部分错误都是类型错误（Uncaught TypeError）；增加了找 bug，改 bug 的时间，严重影响开发效率

JS 属于动态类型的编程语言：需要等到代码真正执行的时候才能发现错误

TS 属于静态类型的编程语言：在代码编译的时候（代码执行前）就可以发现错误，配合开发工具，在编写代码的同时就能在代码中发现错误，减少找 bug、改 bug 的时间

1.3 TypeScript 相比 JavaScript 的优势

• 更早（写代码的同时）发现错误，减少找 bug、改 bug 时间，提升开发效率
• 程序中任何位置的代码都有代码提示，增强了开发体验
• 强大的类型系统提升了代码的可维护性，使得重构代码更加容易
• 支持最新的 ECMAScript语法，优先体验最新语法
• TS 类型判断机制，不需要在代码中的每个地方都显示标注类型
• vue3 源码使用 TS 重写、angular默认支持 TS、react 与 TS 完美配合

2. TypeScript 初体验

2.1 安装编译 TS 的工具包

node.js / 浏览器只认识 JS 代码，不认识 TS 代码，需要先将 TS 代码转化为 JS 代码后才能运行

安装命令：npm i -g typescript

验证是否安装成功：tsc -v（查看 TS 版本）

typescript 包：提供了 tsc 命令，实现了 TS -->JS的转化

2.2 编译并运行 TS 代码

• 创建 hello.ts 文件（注意：TS 文件的后缀名为 .ts）
• 将 TS 编译为 JS：在终端输入命令，tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件）
• 执行 JS 代码：在终端中输入命令node hello.js

说明：所有合法的 JS 代码都是 TS代码，由 TS 编译生成的 JS 文件，代码中就没有类型信息了

2.3 简化运行 TS 的步骤

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

可使用 ts-node包，直接在 node.js 中执行 TS 代码

安装命令：npm i -g ts-node

使用方式：ts-node hello.ts

ts-node 命令在内部偷偷将 TS --> JS，然后再运行 JS 代码（同级目录中不会出现同名的 JS 文件）

3. TypeScript 常用类型

• 所有的 JS 代码都是 TS 代码
• JS 有类型（number、string等），但是 JS 不会检查变量的类型是否发生变化，而 TS 会检查

TS 类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性

3.1 类型注解

示例代码：

let age: number = 18 // 约定变量 age 的类型为 number（数值类型）

代码中的 :number就是类型注解，可为变量添加类型约束，约定了什么类型，就只能给变量赋值该类型的值，否则就会报错

3.2 常用基础类型概述

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

3.3 原始类型

number、string、boolean、null、undefined、symbol

特点：简单，完全按照 JS 中类型的名称来书写

let age: number = 18
let name: string = '张三'
let isLoading: boolean = false
let a: null = null
let b: undefined = undefined
let s: symbol = Symbol()

3.4 对象类型

数组类型的两种写法：（推荐使用number[]写法）

let numbers: number[] = [1, 2, 3]
// let numbers1: Array<number> = [1, 2, 3]

let strings: string[] = ['a', 'b', 'c']
// let strings1: Array<string> = ['a', 'b', 'c']

let b: boolean[] = [true, false]

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

// 添加小括号：这个数组中能够出现 number 或 string 类型的元素
let arr: (number | srting)[] = [1, 'a', 2, 'b']

// 不添加小括号：这个arr1既可以是 number 类型，又可以是 string[]
let arr1: number | string[] = ['a', 'b']
let arr2: number | string[] = 123

3.5 类型别名

类型别名（自定义类型）：为任意类型起别名

使用场景：当同一类型（复杂）被多次使用时，可以通过类型别名简化该类型的使用

type CustomArray = (number | string)[]
let arr1: CustomArray = [1, 'a', 3, 'b']
let arr2: CustomArray = ['x', 'y', 6, 7]

• 使用 type 关键字来创建类型别名
• 类型别名可以是任意合法的变量名称
• 创建类型别名后，直接使用该类型别名作为变量的类型注解即可

3.6 函数类型

函数类型：函数参数和返回值的类型

3.6.1 单独指定参数、返回值的类型

function add1(num1: number, num2: number): number {
    return num1 + num2
}

const add2 = (num1: number, num2: number): number => {
    return num1 + num2
}

3.6.2 同时指定参数、返回值得类型

const add: (num1: number, num2: number) => number = (num1, num2) => {
    return num1 + num2
}

3.6.3 函数没有返回值，函数返回值类型为 void

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

3.6.4 可选参数

使用函数实现某个功能时，参数可传可不传，这种情况给函数参数指定类型时，使用可选参数

在可传可不传的参数名称后面添加 ?（问号）

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

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

3.7 对象类型

• 直接使用 {} 来描述对象结构；属性采用属性名: 类型的形式，方法采用方法名(): 返回值类型的形式
• 若方法有参数，则在方法名后面的小括号中指定参数类型（比如：greet(name: string): void）
• 在一行代码中指定对象的多个属性类型时，使用 ; 分号来分隔

let person: { name: srting; age: number; sayHi(): void; greet(name: string): void } = {
    name: 'jack',
    age: 19,
    sayHi() {},
    greet(name) {}
}

• 如果一行代码只指定一个属性类型（通过换行来分隔多个属性类型），可以去掉 ; 分号

• 方法的类型也可以使用箭头函数形式（比如：{sayHi: () => void}）

let person: {
    name: srting
    age: number
    sayHi: () => void
    greet(name: string): void
} = {
    name: 'jack',
    age: 19,
    sayHi() {},
    greet(name) {}
}

3.7.1 可选属性

对象的属性或方法也可以是可选的

可选属性的语法与函数可选参数的语法一致，都使用 ?（问号）来表示

function myAxios(config: {url: string; method?: string}) {
    console.log(config)
}

3.8 接口

当一个对象类型被多次使用时，一般会使用接口（interface）来描述对象的类型，达到复用的目的

• 使用interface关键字来声明接口
• 接口名称可以是任意合法的变量名称
• 声明接口后，直接使用接口名称作为变量的类型
• 因为每一行只有一个属性类型，因此属性类型后没有 ; （分号）

interface IPerson {
    name: string
    age: number
    sayHi(): void
}
let person: IPerson = {
    name: 'jack',
    age: 19,
    sayHi() {}
}

3.8.1 interface（接口）和 type（类型别名）的区别

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

// 类型别名
type IPerson1 = {
    name: string
    age: number
    sayHi(): void
}
type NumStr = number | string

// 接口
interface IPerson2 = {
    name: string
    age: number
    sayHi(): void
}

3.8.2 接口继承

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

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

interface Point2D {x: number; y: number}
interface Point3D {x: number; y: number; z: number}

更好的方式：

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

let p3: Point3D = {
    x: 1,
    y: 0,
    z: 0
}

• 使用extends继承关键字实现了接口 Point3D 继承 Point2D
• 继承后，Point3D 就有了 Point2D 的所有属性和方法（此时，Point3D 同时有x、y、z三个属性）

3.9 元组

场景：在地图中，使用经纬度坐标来标记位置信息

可以使用数组来记录坐标，那么，该数组中只有两个元素，并且这两个元素都是数值类型

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

使用number[]的缺点：不严谨，因为该类型的数组中可以出现任意多个数字

更好的方式：元组（Tuple）

元组类型是另一种类型的数组，可以确切的标记有多少个元素，以及每个元素的类型

let position1: [number, number] = [39.5427, 116.2317]
let position2: [number, string] = [39.5427, '116.2317']

3.10 类型推论

在 TS 中，某些没有明确指出类型的地方，TS 的类型推论机制会帮助提供类型

由于类型推论的存在，有些地方类型注解可以省略不写，且类型保护的机制同样存在，如：

• 声明变量并初始化时
• 决定函数返回值时（参数需类型注解，否则类型推论失效，类型保护机制也失效）

// 类型推论：let age: number
let age = 18

// 类型推论：function add(num1: number, num2: number): number
function add(num1: number, num2: number) {
    return num1 + num2
}

能省略类型注解的地方就省略，充分利用 TS 类型推论的能力，提升开发效率

3.11 类型断言

有时候开发者会比 TS 更加明确一个值的类型，此时可以使用类型断言来指定更具体的类型

<a href="https://www.baidu.com/" id="link">百度</a>

// 类型推论：const aLink: HTMLElement
const aLink = document.getElementById('link')

注意：getElementById方法返回值的类型是HTMLElement，该类型只包含所有标签公共的属性和方法，不包含 a 标签特有 href 等属性；因此，这个类型太宽泛（不具体），无法操作 href 等 a 标签特有的属性和方法

解决方式：使用类型断言指定更加具体的类型

// 类型推论：const aLink: HTMLAnchorElement
const aLink = document.getElementById('link') as HTMLAnchorElement

• 使用 as 关键字实现类型断言
• 关键字 as 后面的类型是一个更加具体的类型（HTMLAnchorElement 是 HTMLElement 的子类型）
• 通过类型断言，aLink 的类型变得更加具体，这样就可以访问 a 标签特有的属性或方法了

另一种语法，使用<>语法，这种语法形式不常用

const aLink = <HTMLAnchorElement>document.getElementById('link')

3.12 字面量类型

let str1 = 'Hello TS' // 类型：string
const str2 = 'Hello TS' // 类型：'Hello TS'

• str1 是一个变量（let），它的值可以是任意字符串，所以类型为：string
• str2 是一个常量（const），它的值不能变化，只能是 ‘Hello TS’ ，所以它的类型为：‘Hello TS’

某个特定的字符串也可以作为 TS 中的类型，除字符串外，任意 JS 字面量（对象，数字等）都可以作为类型使用

使用模式：字面量类型配合联合类型一起使用

使用场景：用来表示一组明确的可选值列表

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

function changeDirection(direction: 'up' | 'down' | 'left' | 'right') {
    console.log('方向：', direction)
}

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

3.13 枚举

枚举的功能类似于字面量类型+联合类型的功能，也可以表示一组明确的可选值

枚举：定义一组命名常量，描述一个值，该值可以是这些命名常量中的一个

3.13.1 数字枚举

enum Direction { Up, Down, Left, Right } // 默认值 0, 1, 2, 3
function changeDirection(direction: Direction) {
    console.log('方向：', direction)
}
// 访问枚举的成员
changeDirection(Direction.Up)

• 使用enum关键字定义枚举
• 约定枚举名称，枚举中的值以大写字母开头
• 枚举中的多个值之间通过 ，（逗号）分隔
• 定义好枚举后，直接使用枚举名称作为类型注解
• 类似于 JS 中的对象，通过 .（点）语法访问枚举的成员

注意：枚举成员是有值的，默认为从0开始自增的数值，一般称为：数字枚举

也可以给枚举中的成员初始化值：

enum Direction1 { Up = 10, Down, Left, Right } // 10, 11, 12, 13

enum Direction2 { Up = 2, Down = 4, Left  = 8, Right = 16 }

3.13.2 字符串枚举

enum Direction { Up = 'UP', Down = 'DOWN', Left = 'LEFT', Right = 'RIGHT' }

注意：字符串枚举没有自增长行为，因此字符串的每个枚举成员必须有初始值

3.13.3 枚举的特性及原理

枚举是 TS 为数不多的非 JavaScript 类型级扩展（不仅仅是类型）的特性之一

因为：其他类型仅仅被当做类型，而枚举不仅用作类型，还提供值（枚举成员都是有值的），也就是说，其他类型会在编译为 JS 代码时自动移除，但是枚举类型会编译为 JS 代码

enum Direction { Up = 'UP', Down = 'DOWN', Left = 'LEFT', Right = 'RIGHT' }

var Direction;
(function (Direction) {
    Direction['Up'] = 'UP';
    Direction['Down'] = 'DOWN';
    Direction['Left'] = 'LEFT';
    Direction['Right'] = 'RIGHT';
})(Direction || (Direction = {}));

说明：枚举与字面量类型+联合类型的功能类似，都用来表示一组明确的可选值列表

一般情况下，推荐使用字面量类型+联合类型的方式，因为相比枚举，这种方式更加直观、简洁、高效

3.14 any 类型

原则：不推荐使用 any！，这会让 TypeScript 变为 “AnyScript”（失去 TS 类型保护的优势）

因为当值得类型为 any 时，可以对该值进行任意操作，并且不会有代码提示

let obj: any = { x: 0 }
obj.bar = 100
obj()
const n: number = obj

以上操作都不会有任何类型错误提示，即使可能存在错误

尽可能避免使用 any 类型，除非临时使用 any 来“避免”书写很长、很复杂的类型

其他隐式具有 any 类型的情况：

• 声明变量不提供类型也不提供默认值
• 函数参数不加类型

注意：因为不推荐使用 any，所以这两种情况都应该提供类型

3.15 typeof

JS中提供了 typeof 操作符，用来在 JS 中获取数据的类型

console.log(typeof 'Hello world') // string

TS 也提供了 typeof 操作符，可以在类型上下文中引用变量或属性的类型（类型查询）

使用场景：根据已有变量的值，获取该值得类型，来简化类型书写

let p = { x: 1, y: 2 }
function formatPoint(point: { x: number; y: number }) {}
formatPiont(p)

function formatPoint(point: typeof p) {} // 简洁版，类型上下文查询参数类型

• 使用 typeof 操作符来获取变量 p 的类型，结果与第一种（对象字面量形式的类型）相同
• typeof 出现在类型注解的位置（参数名称的冒号后面）所处的环境就在类型上下文（区别于 JS 代码）
• 注意：typeof 只能用来查询变量或属性的类型，无法查询其他形式的类型（比如函数调用的类型）

4. TypeScript 高级类型

概述：

• class类
• 类型兼容性
• 交叉类型
• 泛型 和 keyof
• 索引签名类型 和 索引查询类型
• 映射类型

4.1 class类

TypeScript 全面支持 ES2015中引入的 class 关键字，并为其添加了类型注解和其他语法（比如，可见性修饰符等）

4.1.1 基本使用

class Person {}
const p = new Person() // p的类型：Person

• 根据 TS 中的类型推论，可以知道 Person 类的实例对象 p 的类型是 Person
• TS 中的 class不仅提供了 class 的语法功能，也作为一种类型存在

4.1.2 实例属性初始化

class Person {
    age: number
    gender = '男'
    // gender: string = '男'
}

• 声明成员 age，类型为 number（没有初始值）
• 声明成员 gender，并设置初始值，此时可省略类型注解（TS 类型推论为 string 类型）

4.1.3 构造函数

class Person {
    age: number
    gender: string
    
    constructor(age: number, gender: string) {
        this.age = age
        this.gender = gender
    }
}
const p = new Person(18, '男')

• 成员初始化（比如age: number）后，才可以通过 this.age 来访问实例成员
• 需要为构造函数指定类型注解，否则会被隐式推断为 any，构造函数不需要返回值类型

4.1.4 实例方法

class Point {
    x = 1
    y = 2
    
    scale(n: number): void {
        this.x *= n
        this.y *= n
    }
}
const p = new Piont()
p.scale(10)
console.log(p.x, p.y) // 10 20

方法的类型注解（参数和返回值）与函数用法相同

4.2 class类的继承

类的继承有两种方式：

• extends（继承父类）
• implements（实现接口）

说明：JS 中只有extends，而implements是 TS 提供的

4.2.1 extends 继承父类

class Animal {
    move() {
        console.log('走走走')
    }
}
class Dog extends Animal {
    name = '二哈'
    bark() {
        console.log('汪！')
    }
}
const dog = new Dog()
dog.move()
dog.bark()
console.log(d.name)
// 走走走
// 汪！
// 二哈

• 通过extends关键字实现继承
• 子类 Dog 继承父类 Animal，则 Dog 实例对象 dog 就同时具有了父类 Animal 和子类 Dog 的所有属性和方法

4.2.2 implements 实现接口

interface Singable {
    sing(): void
}
class Person implementS Singable {
    sing() {
        console.log('两只老虎跑得快')
    }
}

• 通过implements关键字让 class 实现接口
• Person 类实现接口 Singable 意味着，Person类中必须提供 Singable 接口中指定的所有方法和属性

4.3 类成员的可见性

可以使用 TS 来控制 class 的方法或属性对于 class 外的代码是否可见

可见性修饰符：

• public：公有的、公开的，公有成员可以被任何地方访问，默认可见性

// 在类属性或方法前面添加 public 关键字，来修饰该属性或方法是公有的
// 因为 public 是默认可见性，所以可以直接省略
class Animal {
    public move() {
        console.log('走走走')
    }
}

• protected：受保护的，仅对其声明所在类和子类中（非实例对象）可见

// 在类属性或方法面前添加 protected 关键字，来修饰该属性或方法是受保护的
// 在子类的方法内部可以通过 this 来访问父类中受保护的成员，但是，对实例不可见
class Animal {
    protected move() {
        console.log('走走走')
    }
}
class Dog extends Animal {
    bark() {
        console.log('汪！')
        this.move()
    }
}

• private：私有的，只在当前类中可见，对实例对象以及子类也是不可见的

// 在类属性或方法前面添加 private 关键字，来修饰该属性或方法是私有的
// 私有的属性或方法只在当前类中可见，对子类和实例对象也都是不可见的
class Animal {
    private move() {
         console.log('走走走')
    }
    walk() {
        this.move()
    }
}

4.4 readonly 只读修饰符

readonly：表示只读，用来防止在构造函数之外对属性进行赋值

• 使用 readonly 关键字修饰该属性是只读的，注意只能修饰属性不能修饰方法
• 注意：属性 age 后面的类型注解（比如：此处的 number）如果不加，则 age 的类型为 18（字面量类型）
• 接口或者 {} 表示的对象类型，也可以使用 readonly

class Person {
    readonly age: number = 18
    constructor(age: number) {
        this.age = age
    }
}

let obj: { readonly name: string } = {
    name: 'jack'
}

注意：只要是 readonly 来修饰的属性，必须手动提供明确的类型