10 分钟速通 TypeScript 核心

[1. 简介](#1. 简介)
[2. 使用方式](#2. 使用方式)
[3. 核心内容](#3. 核心内容)
- [3.1 类型推断（不建议，变量类型不明确）](#3.1 类型推断（不建议，变量类型不明确）)
- [3.2 类型注解（推荐，明确变量类型）](#3.2 类型注解（推荐，明确变量类型）)
- [3.3 类型断言（给不确定类型变量定义类型，慎用）](#3.3 类型断言（给不确定类型变量定义类型，慎用）)
- [3.4 基础类型（string、number、boolean、null、undefined）](#3.4 基础类型（string、number、boolean、null、undefined）)
- [3.4 联合类型（定义多种可能类型）](#3.4 联合类型（定义多种可能类型）)
- [3.5 数组类型（变量类型[] 或 Array<变量类型>）](#3.5 数组类型（变量类型[] 或 Array<变量类型>）)
- [3.6 元祖类型](#3.6 元祖类型)
- [3.7 枚举类型](#3.7 枚举类型)
- [3.8 函数相关](#3.8 函数相关)
- [3.9 接口（定义对象字段类型）](#3.9 接口（定义对象字段类型）)
- [3.10 类型别名](#3.10 类型别名)
- [3.11 泛型](#3.11 泛型)

1. 简介

TypeScript（简称 TS）就是 JavaScript 的超集。官网地址：https://ts.nodejs.cn/docs/handbook/intro.html

存在意义：解决了 JavaScript 不能对代码中所有的标识符（变量、函数、参数、返回值）进行类型检查的问题。

编译器：tsc 是 TS 的编译器。类型检查发生的时间，在编译的时候，而非运行时。

本篇文章适合 TypeScript 零基础的同学观看，用于快速了解其核心概知识和使用方式。如果想深入了解，建议前往官网进行学习。当然，后续我们也会针对 TypeScript 的知识进行深入学习和解析。

2. 使用方式

（1）在项目中使用，直接下载：

powershell 复制代码

npm install typescript --save-dev

（2）学习使用，直接前往官网的演练场（Playground）进行使用。

可以对 TypeScript 的版本、配置进行修改。写入代码，右侧可以看到对应的 JS代码和错误提示，点击运行，右侧可以看到相应的日志。

3. 核心内容

3.1 类型推断（不建议，变量类型不明确）

类型推断：根据初始值自动推断其类型。

javascript 复制代码

let str = 'abc'
str = 123

这段代码中，let str = 'abc' 定义了 str 的初始值 '123'，TS 就会自动推断其类型为 string 类型，如果后续修改成其他类型，编译时就会报错。

3.2 类型注解（推荐，明确变量类型）

类型注解：在变量名右侧添加 : 变量类型 的方式定义其类型。初始值给定与否，看业务需要。

（1）给定初始值

javascript 复制代码

let str: string = 'abc'
str = '123'

（2）不给定初始值

javascript 复制代码

let str: string
str = '123'

3.3 类型断言（给不确定类型变量定义类型，慎用）

类型断言：在非明确初始值（通过计算或者函数判断得出）的右侧添加 as 变量类型 的方式进行类型定义。

（1）正确写法

javascript 复制代码

let numArr = [1, 2, 3]
const result = numArr.find(item => item > 2) as number
console.log(result * 5)

（2）错误示例

javascript 复制代码

let numArr = [1, 2, 3]
const result = numArr.find(item => item > 2)
console.log(result * 5)

result 的值，是通过函数计算方式得出，而非直接定义，因此 TS 判定其值可能为 undefined，所以 console.log(result * 5) 会报错。

3.4 基础类型（string、number、boolean、null、undefined）

javascript 复制代码

let str: string = 'abc'
let num: number = 123
let flag: boolean = true
let nu: null = null
let un: undefined = undefined

3.4 联合类型（定义多种可能类型）

联合类型：通过 | 将多个多种可能的类型（甚至是具体的值）情况进行列举。

javascript 复制代码

let v1: string | null = null
let v2: 1 | 2 | 3 = 3
function fun(x: number | string, y: number | string) {
    console.log(x, y)
}

3.5 数组类型（变量类型[] 或 Array<变量类型>）

在 JavaScript 中，数组的每个值可以为任意类型，实际开发中不建议这么做。TypeScript 中可以对数组类型进行限定。类型数组有两种写法：

（1）: 变量类型[]

javascript 复制代码

let numArr: number[] = [1, 2, 3]

（2）Array<变量类型>

javascript 复制代码

let strArr: Array<string> = ['a', 'b', 'c']

3.6 元祖类型

元祖类型（可以存储限定个数的多个数据）

javascript 复制代码

let t1: [number, string, boolean] = [1, 'a', true]

3.7 枚举类型

javascript 复制代码

enum MyEnum {
    A,
    B,
    C
}

console.log(MyEnum.A === 0)
console.log(MyEnum[0] === 'A')

3.8 函数相关

（1）void 类型

void 表示空的意思，和 null、undefined 类似。通常用于给不返回任何值的函数进行类型定义。

javascript 复制代码

function fn(x: number, y: number): void {
    console.log(x, y)
}

（2）设置参数可选。

可以使用 ?: 参数类型 或者 ...参数名: 参数类型[] 的方式定义单个或多个可选变量。

javascript 复制代码

function MyFn(a = 10, b: string, c?: boolean, ...rest: number[]): number {
    console.log('a', a)
    console.log('b', b)
    console.log('c', c)
    console.log('rest', rest)
    return 100
}

const f1 = MyFn(10, 'abc', false, 1, 2, 3, 4)

const f2 = MyFn(20, 'abc')

const f3 = MyFn(20)

注意，我们通常选择将必填参数放在前面，可选参数放在后面。

3.9 接口（定义对象字段类型）

接口通常使用 interface 对对象进行定义。比如：

javascript 复制代码

interface Person {
    name: string,
    age: number
}

const p1: Person = {
    name: 'Jack',
    age: 12
}

const p2: Person = {
    name: 'Mike',
    age: 14
}

可能的报错：

（1）内部属性和接口不一致；

（2）接口定义属性，对象没有定义；

（3）接口未定义属性，对象进行了定义

3.10 类型别名

类型别名：通过 type 可以对任何类型进行命名。比如联名类型、对象等。

（1）给联名类型起别名

javascript 复制代码

type MyUserId = string | number
let v: MyUserId = '123'

// 上面两行等价于 let v: string | number = '123'

（2）给对象起别名

javascript 复制代码

type Point = {
  x: number;
  y: number;
};
 
function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
 
printCoord({ x: 100, y: 100 });

3.11 泛型

泛型：如果类型多变，但是功能一致，我们可以使用任意变量，比如 T 放在函数名后，用于表示相同类型。比如

javascript 复制代码

// 变量a, b是相同类型，并且返回一个相同类型的数组
function MyFn<T>(a: T, b: T): T[] {
    return [a, b]
}

console.log(MyFn<number>(1, 2))
console.log(MyFn<string>('a', 'b'))

// 会自动进行类型推断，
console.log(MyFn(3, 4))
console.log(MyFn(3, 'a'))