啥子都能看懂的TypeScript快速入门

TypeScript 从小白到快速上手

说明：大部分笔记参考B站尚硅谷TS课程
https://www.bilibili.com/video/BV1YS411w7Bf/?spm_id_from=333.337.search-card.all.click&vd_source=4de192a0ec1fe7b5fc788e72acc90efa
前置知识：JavaScript 基础和 ES6+ 新特性

一、TypeScript 简介

1. TypeScript 包含了 JavaScript 的所有内容，即：TypeScript 是 JavaScript 的超集。
2. TypeScript 增强了静态类型检查、接口编程和面向对象特性，更适合大型项目的开发。
3. TypeScript 需要编译为 JavaScript，然后交给浏览器或其他 JavaScript 运行环境执行。

二、为何需要 TypeScript

1. 如今成神的JavaScript其实先天废材（了解）

• JavaScript 当年诞生时的定位是浏览器脚本语言，用于在网页中嵌入简单的逻辑，且代码量很少。
• 随着时间的推移，JavaScript 变得越来越流行，如今的 JavaScript 已经可以全栈编程了。
• 现如今的 JavaScript 应用场景比当年丰富的多，代码量也比当年大很多，随便一个 JavaScript 项目的代码量，可以轻松的达到几万行，甚至十几万行！
• 然而 JavaScript 当年"出生简陋"，没考虑到如今的应用场景和代码量，逐渐就出现了很多困扰。

2. 成也萧何，败也萧何 ---- 静态类型检查的缺失

• JavaScript 的弱类型带来了灵活性，但也牺牲了类型安全性。

不清楚的数据类型

let welcome = 'hello'
welcome() // 此行报错: TypeError: welcome is not a function

有漏洞的逻辑

const str = Date.now() % 2 ? '奇数' : '偶数'
if (str !== '奇数') {
    alert('hello')
} else if (str == '偶数') {
    alert('world')
}

访问不存在的属性

const obj = { width: 10, height: 15 }
const area = obj.width * obj.height

低级的拼写错误

const message = 'hello,world'
message.toUpperCase()

3. 静态类型检查

• 在代码运行前进行检查，发现代码的错误或不合理之处，减小运行时出现异常的几率，此种检查叫『静态类型检查』，TypeScript 的核心就是『静态类型检查』，简言之就是把运行时的错误前置。
• 同样的功能，TypeScript 的代码量要大于 JavaScript，但由于 TypeScript 的代码结构更加清晰，在后期代码的维护中 TypeScript 却胜于 JavaScript。

三、TypeScript 的编译（了解，没啥用）

浏览器不能直接运行 TypeScript 代码，需要编译为 JavaScript 再交由浏览器解析器执行。

1. 命令行编译

• 第一步：创建一个 demo.ts 文件，例如：

const person = { name: '李四', age: 18 }
console.log(`我叫${person.name}，我今年${person.age}岁了`)

• 第二步：全局安装 TypeScript

npm i typescript -g

• 第三步：使用命令编译 .ts 文件

tsc demo.ts

2. 自动化编译

• 第一步：创建 TypeScript 编译控制文件

tsc --init

1. 工程中会生成一个 tsconfig.json 配置文件，其中包含着很多编译时的配置。
2. 观察发现，默认编译的 JS 版本是 ES7，我们可以手动调整为其他版本。

• 第二步：监视目录中的 .ts 文件变化

tsc --watch  或  tsc -w

• 第三步：小优化，当编译出错时不生成 .js 文件（也可以修改 tsconfig.json 中的 noEmitOnError 配置）

四、类型声明

使用 : 来对变量或函数形参进行类型声明：

let a: string   // 变量a只能存储字符串
let b: number   // 变量b只能存储数值
let c: boolean  // 变量c只能存储布尔值

a = 'hello'
a = 100         // 警告：不能将类型"number"分配给类型"string"

b = 666
b = '你好'      // 警告：不能将类型"string"分配给类型"number"

c = true
c = 666         // 警告：不能将类型"number"分配给类型"boolean"

// 参数x必须是数字，参数y也必须是数字，函数返回值也必须是数字
function demo(x: number, y: number): number {
    return x + y
}

demo(100, 200)
demo(100, '200')     // 警告：类型"string"的参数不能赋给类型"number"的参数
demo(100, 200, 300)  // 警告：应有2个参数，但获得3个
demo(100)            // 警告：应有2个参数，但获得1个

在 : 后也可以写字面量类型，不过实际开发中用的不多。

let a: '你好'   // a的值只能为字符串"你好"
let b: 100      // b的值只能为数字100

a = '欢迎'      // 警告：不能将类型"欢迎"分配给类型"你好"
b = 200         // 警告：不能将类型"200"分配给类型"100"

五、类型自动推断

TypeScript 会根据我们的代码进行类型推导，例如下面代码中的变量 d 只能存储数字：

let d = -99   // TypeScript会推断出变量d的类型是数字
d = false     // 警告：不能将类型"boolean"分配给类型"number"

但要注意，类型推断不是万能的，面对复杂类型时推断容易出问题，所以尽量还是明确的编写类型声明！

六、类型总概

JavaScript 中的数据类型

① string ② number ③ boolean ④ null ⑤ undefined ⑥ bigint ⑦ symbol ⑧ object

备注：其中 object 包含：Array、Function、Date、Error 等...

TypeScript 新增类型

1. 上述所有 JavaScript 类型
2. 六个新类型：① any ② unknown ③ never ④ void ⑤ tuple ⑥ enum
3. 两个用于自定义类型的方式：① type ② interface

注意点！ 在 JavaScript 中的这些内置构造函数（Number、String、Boolean）用于创建对应的包装对象，在日常开发时很少使用，在 TypeScript 中也是同理，所以在 TypeScript 中进行类型声明时，通常都是用小写的 number、string、boolean。例如：

let str1: string
str1 = 'hello'
str1 = new String('hello')   // 报错

let str2: String
str2 = 'hello'
str2 = new String('hello')

七、常用类型与语法

1. any（了解即可）

any 的含义是：任意类型，一旦将变量类型限制为 any，那就意味着放弃了对该变量的类型检查。注意：any 类型的变量可以赋值给任意类型的变量。

// 明确的表示 a 的类型是 any ------ 【显式的 any】
let a: any
a = 100
a = '你好'
a = false

// 没有明确的表示 b 的类型是 any，但 TS 主动推断出来 b 是 any ------ 隐式的 any
let b
b = 100
b = '你好'
b = false

let c: any
c = 9
let x: string
x = c   // 无警告

2. unknown（了解即可）

unknown 的含义是：未知类型，适用于起初不确定数据的具体类型，要后期才能确定。

• unknown 可以理解为一个类型安全的 any。

let a: unknown
a = 100
a = false
a = '你好'

let x: string
x = a   // 警告：不能将类型"unknown"分配给类型"string"

• unknown 会强制开发者在使用之前进行类型检查，从而提供更强的类型安全性。

let a: unknown
a = 'hello'

// 第一种方式：加类型判断
if (typeof a == 'string') {
    x = a
    console.log(x)
}

// 第二种方式：加断言
x = a as string

// 第三种方式：加断言
x = <string>a

• 读取 any 类型数据的任何属性都不会报错，而 unknown 正好与之相反。

let str1: string
str1 = 'hello'
str1.toUpperCase()   // 无警告

let str2: any
str2 = 'hello'
str2.toUpperCase()   // 无警告

let str3: unknown
str3 = 'hello'
str3.toUpperCase()   // 警告："str3"的类型为"未知"

// 使用断言强制指定 str3 的类型为 string
(str3 as string).toUpperCase()   // 无警告

3. never（了解即可）

never 的含义是：任何值都不是，即不能有值，例如 undefined、null、""、0 都不行！

• 几乎不用 never 去直接限制变量，因为没有意义。

// 指定 a 的类型为 never，那就意味着 a 以后不能存任何的数据了
let a: never
a = 1          // 警告
a = true       // 警告
a = undefined  // 警告
a = null       // 警告

• never 一般是 TypeScript 主动推断出来的。
• never 也可用于限制函数的返回值。

// 限制 throwError 函数不需要有任何返回值，任何值都不行
function throwError(str: string): never {
    throw new Error('程序异常退出:' + str)
}

4. void

void 的含义是空，即：函数不返回任何值，调用者也不应依赖其返回值进行任何操作！

• void 通常用于函数返回值声明。

function logMessage(msg: string): void {
    console.log(msg)
}
logMessage('你好')

注意：编码者没有编写 return 指定函数返回值，所以 logMessage 函数是没有显式返回值的，但会有一个隐式返回值，是 undefined，虽然函数返回类型为 void，但也是可以接受 undefined 的。简单记：undefined 是 void 可以接受的一种"空"。

• 以下写法均符合规范：

function logMessage(msg: string): void {
    console.log(msg)
}

function logMessage(msg: string): void {
    console.log(msg)
    return
}

function logMessage(msg: string): void {
    console.log(msg)
    return undefined
}

但是有区别：返回值类型为 void 的函数，调用者不应依赖其返回值进行任何操作！

function logMessage(msg: string): void {
    console.log(msg)
}
let result = logMessage('你好')
if (result) {   // 此行报错：无法测试 "void" 类型的表达式的真实性
    console.log('logMessage有返回值')
}

function logMessage(msg: string): undefined {
    console.log(msg)
}
let result = logMessage('你好')
if (result) {   // 此行无警告
    console.log('logMessage有返回值')
}

理解 void 与 undefined（这里看不懂就别管他）

• void 是一个广泛的概念，用来表达"空"，而 undefined 则是这种"空"的具体实现。
• 因此可以说 undefined 是 void 能接受的一种"空"的状态。
• 也可以理解为：void 包含 undefined，但 void 所表达的语义超越了 undefined，void 是一种意图上的约定，而不仅仅是特定值的限制。

总结 ：如果一个函数返回类型为 void，那么：

1. 从语法上讲：函数是可以返回 undefined 的，至于显式返回，还是隐式返回，这无所谓！
2. 从语义上讲：函数调用者不应关心函数返回的值，也不应依赖返回值进行任何操作！即使我们知道它返回了 undefined。

5. object（了解即可）

关于 object 与 Object，实际开发中用的相对较少，因为范围太大了。

let a: object   // a的值可以是任何【非原始类型】，包括：对象、函数、数组等
a = {}
a = { name: '张三' }
a = [1, 3, 5, 7, 9]
a = function() {}
a = new String('123')
class Person {}
a = new Person()

// 以下代码，是将【原始类型】赋给 a，有警告
a = 1
a = true
a = '你好'
a = null
a = undefined

let b: Object   // b的值必须是 object 的实例对象（除去 undefined 和 null 的任何值）
b = {}
b = { name: '张三' }
b = [1, 3, 5, 7, 9]
b = function() {}
b = new String('123')
b = 1            // 1 不是 object 的实例对象，但其包装对象是 object 的实例
b = true         // true 不是 object 的实例对象，但其包装对象是 object 的实例
b = '你好'       // 同样可
b = null         // 警告
b = undefined    // 警告

声明对象类型

实际开发中，限制一般对象，通常使用以下形式：

// 限制 person1 对象必须有 name 属性，age 为可选属性
let person1: { name: string, age?: number }
let person2: { name: string; age?: number }
let person3: {
    name: string
    age?: number
}

person1 = { name: '李四', age: 18 }
person2 = { name: '张三' }
person3 = { name: '王五' }
// person3 = { name: '王五', gender: '男' }   // 不合法

索引签名：允许定义对象可以具有任意数量的属性，这些属性的键和类型是可变的。

let person: {
    name: string
    age?: number
    [key: string]: any   // 索引签名
}
person = { name: '张三', age: 18, gender: '男' }

声明函数类型

let count: (a: number, b: number) => number
count = function(x, y) {
    return x + y
}

备注：

• TypeScript 中的 => 在函数类型声明时表示函数类型，描述其参数类型和返回类型。
• JavaScript 中的 => 是一种定义函数的语法，是具体的函数实现。

声明数组类型

let arr1: string[]
let arr2: Array<string>
arr1 = ['a', 'b', 'c']
arr2 = ['hello', 'world']

6. tuple（tuple不是关键字！）

元组（Tuple）是一种特殊的数组类型，可以存储固定数量的元素，并且每个元素的类型是已知的且可以不同。元组用于精确描述一组值的类型，? 表示可选元素。

// 第一个元素必须是 string 类型，第二个元素必须是 number 类型
let arr1: [string, number]

// 第一个元素必须是 number 类型，第二个元素是可选的，如果存在，必须是 boolean 类型
let arr2: [number, boolean?]

// 第一个元素必须是 number 类型，后面的元素可以是任意数量的 string 类型
let arr3: [number, ...string[]]

arr1 = ['hello', 123]
arr2 = [100, false]
arr2 = [200]
arr3 = [100, 'hello', 'world']
arr3 = [100]

// arr1 = ['hello', 123, false]   // 不可以

7. enum

枚举（enum）可以定义一组命名常量，它能增强代码的可读性，也让代码更好维护。

数字枚举

enum Direction {
    Up,
    Down,
    Left,
    Right
}

function walk(n: Direction) {
    if (n === Direction.Up) {
        console.log("向【上】走")
    } else if (n === Direction.Down) {
        console.log("向【下】走")
    } else if (n === Direction.Left) {
        console.log("向【左】走")
    } else if (n === Direction.Right) {
        console.log("向【右】走")
    } else {
        console.log("未知方向")
    }
}

walk(Direction.Up)
walk(Direction.Down)

数字枚举的成员的值会自动递增，且具备反向映射的特点。

字符串枚举（了解即可）

enum Direction {
    Up = "up",
    Down = "down",
    Left = "left",
    Right = "right"
}
let dir: Direction = Direction.Up
console.log(dir)   // 输出: "up"

常量枚举

常量枚举使用 const 关键字定义，在编译时会被内联，避免生成额外的代码，减少生成的 JavaScript 代码量并提高运行时性能。

const enum Directions {
    Up,
    Down,
    Left,
    Right
}
let x = Directions.Up

编译后生成的 JavaScript 代码量较小：

"use strict";
let x = 0 /* Directions.Up */;

8. type（了解即可）

type 可以为任意类型创建别名，让代码更简洁、可读性更强，同时能更方便地进行类型复用和扩展。

基本用法

type num = number
let price: num
price = 100

联合类型

联合类型表示一个值可以是几种不同类型之一。

type Status = number | string
type Gender = '男' | '女'

function printStatus(status: Status) {
    console.log(status)
}

function logGender(str: Gender) {
    console.log(str)
}

printStatus(404)
printStatus('200')
logGender('男')
logGender('女')

交叉类型

交叉类型允许将多个类型合并为一个类型。合并后的类型将拥有所有被合并类型的成员。

// 面积
type Area = {
    height: number   // 高
    width: number    // 宽
}

// 地址
type Address = {
    num: number     // 楼号
    cell: number    // 单元号
    room: string    // 房间号
}

// 定义类型 House，是 Area 和 Address 组成的交叉类型
type House = Area & Address

const house: House = {
    height: 180,
    width: 75,
    num: 6,
    cell: 3,
    room: '702'
}

9.类class

• TypeScript 的类是在 JavaScript ES6 类的基础上，增加了类型声明和面向对象增强特性。

class Animal {
    constructor(public name: string) {}
    
    move(distance: number): void {
        console.log(`${this.name}移动了${distance}米`)
    }
}

class Dog extends Animal {
    constructor(name: string, public breed: string) {
        super(name)  // 必须调用super()
    }
    
    bark(): void {
        console.log(`${this.name}汪汪叫`)
    }
    
    //明确标注这是一个重写方法（推荐）
    override move(distance: number): void {
        console.log(`小狗${this.name}跑了${distance}米`)
        super.move(distance)  // 可选调用父类方法
    }
}

const dog = new Dog('旺财', '金毛')
dog.bark()   // 旺财汪汪叫
dog.move(10) // 小狗旺财跑了10米 \n 旺财移动了10米\

10. 属性修饰符（和Java的语法同理）

• 前置知识：JS的类class

修饰符	含义	具体规则
public	公开的	可以被：类内部、子类、类外部访问
protected	受保护的	可以被：类内部、子类访问
private	私有的	可以被：类内部访问
readonly	只读	属性无法修改

示例：

class Person {
    public name: string
    age: number   // 未写修饰符，默认 public
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
    speak() {
        console.log(`我叫：${this.name}，今年${this.age}岁`)
    }
}

const p1 = new Person('张三', 18)
console.log(p1.name)   // 外部可访问

class Student extends Person {
    constructor(name: string, age: number) {
        super(name, age)
    }
    study() {
        console.log(`${this.age}岁的${this.name}正在努力学习`)
    }
}

属性的简写形式

class Person {
    constructor(
        public name: string,
        public age: number
    ) {}
}

protected 修饰符

class Person {
    constructor(
        protected name: string,
        protected age: number
    ) {}
    protected getDetails(): string {
        return `我叫：${this.name}，年龄是：${this.age}`
    }
    introduce() {
        console.log(this.getDetails())
    }
}

const p1 = new Person('杨超越', 18)
p1.introduce()
// p1.getDetails()   // 报错
// p1.name           // 报错

class Student extends Person {
    constructor(name: string, age: number) {
        super(name, age)
    }
    study() {
        this.introduce()
        console.log(`${this.name}正在努力学习`)
    }
}

private 修饰符

class Person {
    constructor(
        public name: string,
        public age: number,
        private IDCard: string
    ) {}
    private getPrivateInfo() {
        return `身份证号码为：${this.IDCard}`
    }
    getInfo() {
        return `我叫：${this.name}，今年刚满${this.age}岁`
    }
    getFullInfo() {
        return this.getInfo() + '，' + this.getPrivateInfo()
    }
}

const p1 = new Person('张三', 18, '110114198702034432')
console.log(p1.getFullInfo())
// p1.name          // 报错
// p1.IDCard        // 报错

readonly 修饰符

class Car {
    constructor(
        public readonly vin: string,   // 车辆识别码，只读
        public readonly year: number,  // 出厂年份，只读
        public color: string,
        public sound: string
    ) {}
    displayInfo() {
        console.log(`
            识别码：${this.vin},
            出厂年份：${this.year},
            颜色：${this.color},
            音响：${this.sound}
        `)
    }
}

const car = new Car('1HGCM82633A123456', 2018, '黑色', 'Bose音响')
car.displayInfo()
// car.vin = 'new'   // 错误：只读属性不可修改

11. 抽象类

抽象类是一种无法被实例化的类，专门用来定义类的结构和行为。类中可以写抽象方法，也可以写具体实现。抽象类主要用来为其派生类提供一个基础结构，要求其派生类必须实现其中的抽象方法。

abstract class Package {
    constructor(public weight: number) {}
    // 抽象方法：用来计算运费
    abstract calculate(): number
    // 通用方法
    printPackage() {
        console.log(`包裹重量为：${this.weight}kg，运费为：${this.calculate()}元`)
    }
}

// 标准包裹
class StandardPackage extends Package {
    constructor(
        weight: number,
        public unitPrice: number   // 每公斤的固定费率
    ) {
        super(weight)
    }
    calculate(): number {
        return this.weight * this.unitPrice
    }
}

const s1 = new StandardPackage(10, 5)
s1.printPackage()

// 特快专递
class ExpressPackage extends Package {
    constructor(
        weight: number,
        public unitPrice: number,
        public extraFee: number
    ) {
        super(weight)
    }
    calculate(): number {
        return this.weight * this.unitPrice + this.extraFee
    }
}

使用抽象类的场景：

1. 定义通用接口：为一组相关的类定义通用的行为（方法或属性）时。
2. 提供基础实现：在抽象类中提供某些方法或为其提供基础实现，这样派生类就可以继承这些实现。
3. 确保关键实现：强制派生类实现一些关键行为。
4. 共享代码和逻辑：当多个类需要共享部分代码时，抽象类可以避免代码重复。

12. interface（接口）

interface 是一种定义结构的方式，主要作用是为类、对象、函数等规定一种契约，确保代码的一致性和类型安全。interface 只能定义格式，不能包含任何实现。

定义类结构

interface PersonInterface {
    name: string
    age: number
    speak(n: number): void
}

class Person implements PersonInterface {
    constructor(
        public name: string,
        public age: number
    ) {}
    speak(n: number): void {
        for (let i = 0; i < n; i++) {
            console.log(`你好，我叫${this.name}，我的年龄是${this.age}`)
        }
    }
}

const p1 = new Person('tom', 18)
p1.speak(3)

定义对象结构

interface UserInterface {
    name: string
    readonly gender: string   // 只读属性
    age?: number              // 可选属性
    run: (n: number) => void
}

const user: UserInterface = {
    name: "张三",
    gender: '男',
    age: 18,
    run(n) {
        console.log(`奔跑了${n}米`)
    }
}

定义函数结构

interface CountInterface {
    (a: number, b: number): number
}

const count: CountInterface = (x, y) => {
    return x + y
}

接口之间的继承

interface PersonInterface {
    name: string
    age: number
}

interface StudentInterface extends PersonInterface {
    grade: string
}

const stu: StudentInterface = {
    name: "张三",
    age: 25,
    grade: '高三'
}

13. 一些相似概念的区别

13.1 interface 与 type 的区别

相同点：都可以用于定义对象结构，在定义对象结构时两者可以互换。

不同点：

• interface：更专注于定义对象和类的结构，支持继承、合并。
• type：可以定义类型别名、联合类型、交叉类型，但不支持继承和自动合并。

interface 示例（支持继承和声明合并）：

interface PersonInterface {
    name: string
    age: number
}
interface PersonInterface {
    speak: () => void
}
interface StudentInterface extends PersonInterface {
    grade: string
}
const student: StudentInterface = {
    name: '李四',
    age: 18,
    grade: '高二',
    speak() {
        console.log(this.name, this.age, this.grade)
    }
}

type 示例（通过交叉类型实现类似继承）：

type PersonType = {
    name: string
    age: number
} & {
    speak: () => void
}
type StudentType = PersonType & {
    grade: string
}
const student: StudentType = {
    name: '李四',
    age: 18,
    grade: '高二',
    speak() {
        console.log(this.name, this.age, this.grade)
    }
}

13.2 interface 与抽象类的区别

相同点：都能定义一个类的格式（定义类应遵循的契约）。

不同点：

• 接口：只能描述结构，不能有任何实现代码，一个类可以实现多个接口。
• 抽象类：既可以包含抽象方法，也可以包含具体方法，一个类只能继承一个抽象类。

一个类实现多个接口：

interface FlyInterface {
    fly(): void
}
interface SwimInterface {
    swim(): void
}

class Duck implements FlyInterface, SwimInterface {
    fly(): void {
        console.log('鸭子可以飞')
    }
    swim(): void {
        console.log('鸭子可以游泳')
    }
}

const duck = new Duck()
duck.fly()
duck.swim()

八、泛型

泛型允许我们在定义函数、类或接口时，使用类型参数来表示未指定的类型，这些参数在具体使用时才被指定具体的类型。泛型能让同一段代码适用于多种类型，同时仍然保持类型的安全性。

泛型函数

function logData<T>(data: T): T {
    console.log(data)
    return data
}
logData<number>(100)
logData<string>('hello')

泛型可以有多个

function logData<T, U>(data1: T, data2: U): T | U {
    console.log(data1, data2)
    return Date.now() % 2 ? data1 : data2
}
logData<number, string>(100, 'hello')
logData<string, boolean>('ok', false)

泛型接口

interface PersonInterface<T> {
    name: string
    age: number
    extraInfo: T
}

let p1: PersonInterface<string>
let p2: PersonInterface<number>
p1 = { name: '张三', age: 18, extraInfo: '一个好人' }
p2 = { name: '李四', age: 18, extraInfo: 250 }

泛型约束

• 泛型约束用于限制泛型类型参数的范围，确保传入的类型满足特定条件。

interface LengthInterface {
    length: number
}
// 约束规则是：传入的类型 T 必须具有 length 属性
function logPerson<T extends LengthInterface>(data: T): void {
    console.log(data.length)
}
logPerson<string>("hello")
// logPerson<number>(100)   // 报错，因为 number 不具备 length 属性

泛型类

class Person<T> {
    constructor(
        public name: string,
        public age: number,
        public extraInfo: T
    ) {}
    speak() {
        console.log(`我叫${this.name}今年${this.age}岁了`)
        console.log(this.extraInfo)
    }
}

// 测试代码1
const p1 = new Person<number>("tom", 30, 250)

// 测试代码2
type JobInfo = {
    title: string
    company: string
}
const p2 = new Person<JobInfo>("tom", 30, { title: '研发总监', company: '发发发科技公司' })

九、类型声明文件（了解即可）

• 类型声明文件是 TypeScript 中以 .d.ts 结尾的文件，用于描述 JavaScript 代码的类型信息，让 TypeScript 能够理解和使用普通 JavaScript 库。
• 很多的第三方工具库都是用JS写的，想要在TS项目里使用它们就必须要有类型声明文件，一般Vite等工具在创建项目时已经自动配置好引入了，不用我们管。

十. 一些进阶的东西（感兴趣的可以深入学习）

• TS官方文档：www.tslang.cn/docs/home.h...
• 有关装饰器的文档：www.tslang.cn/docs/handbo...
• 尚硅谷装饰器教学：www.bilibili.com/video/BV1YS411w7Bf?spm_id_from=333.788.videopod.episodes&vd_source=4de192a0ec1fe7b5fc788e72acc90efa&p=4