【前端】Typescript使用教程

目录

一、概述

二、 TypeScript开发环境

2.1 安装和设置

2.2 编译和运行

2.3 工具和编辑器支持

三、 TypeScript基本语法

3.1 基本类型

3.2 接口

3.3 类

3.4 函数

3.5 泛型

3.6 模块

3.7 高级类型

四、TypeScript示例

4.1 枚举（Enumerations） 

4.2 类型别名（Type Aliases）

4.3 模块解析（Module Resolution）

4.4 高级类型（Advanced Types）

4.5 TypeScript 与 React

4.6 TypeScript 与 Node.js

4.7 TypeScript 配置（tsconfig.json）

五、TypeScript应用场景

5.1 装饰器（Decorators）

5.2 命名空间（Namespaces）

5.3 泛型约束

5.4 泛型接口

5.5 异步编程

---

一、概述

        TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

        TypeScript添加了很多尚未正式发布的ECMAScript新特性（如装饰器 ）。2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript。当前最新正式版本为TypeScript 5.2, 2023年8月发布。

二、 TypeScript开发环境

2.1 安装和设置

        安装Node.js和npm。

        使用npm安装Typescript：`npm install -g typescript`。

        创建一个`tsconfig.json`文件来配置编译选项。

2.2 编译和运行

        编译Typescript文件：`tsc 文件名.ts`。

        运行编译后的JavaScript文件：`node 文件名.js`。

2.3 工具和编辑器支持

        使用Visual Studio Code等编辑器，安装Typescript插件。

        利用编辑器的智能感知和类型检查功能。

三、 TypeScript基本语法

3.1 基本类型

        定义变量时指定类型：`let isDone: boolean = false;`。

        数组类型：`let list: number[] = [1, 2, 3];` 或使用泛型数组类型：`let list: Array<number> = [1, 2, 3];`。

        元组类型：`let x: [string, number]; x = ["hello", 10];`。

        枚举类型：`enum Color {Red, Green, Blue}; let c: Color = Color.Green;`。

        任意类型：`let notSure: any = 4;`。

        void类型：`function warnUser(): void { alert("This is my warning message"); }`。

        never类型：`function error(message: string): never { throw new Error(message); }`。

3.2 接口

   - 定义接口：`interface LabelledValue { label: string; }`。

   - 使用接口：`function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label); }`。

3.3 类

        定义类：`class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } }`。

        继承：`class Animal { move() { } } class Dog extends Animal { woof() { } }`。

        访问修饰符：`public`、`private`、`protected`