【前端】Typescript使用教程

一、概述

    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`。

    静态属性和方法：`static`关键字。

3.4 函数

    定义函数类型：`function add(x: number, y: number): number { return x + y; }`。

    可选参数和默认参数：`function buildName(firstName: string, lastName?: string) { }` 和 `function buildName(firstName: string, lastName = "Smith") { }`。

    剩余参数：`function buildName(firstName: string, ...restOfName: string[]) { }`。

3.5 泛型

    定义泛型函数：`function identity<T>(arg: T): T { return arg; }`。

    泛型类：`class GenericNumber<T> { zeroValue: T; add: (x: T, y: T) => T; }`。

3.6 模块

    导入模块：`import { sum } from "./module";`。

    导出模块：`export function sum(x: number, y: number) { return x + y; }`。

3.7 高级类型

    联合类型：`let myFavoriteNumber: string | number; myFavoriteNumber = "seven";`。

    交叉类型：`interface ErrorHandling { error: string; } interface Artworks {艺术作品: string[]; } interface Artists {艺术家: string[]; } type ArtworksAndErrorHandling = Artworks & ErrorHandling;`。

    类型保护和区分类型：`if ("string" === typeof value) { /* value 是字符串 */ }`。

    以上是Typescript的基本使用教程，涵盖了安装、基本语法、高级特性以及如何编译和运行Typescript代码。随着学习的深入，可以进一步探索Typescript的更多高级功能和最佳实践。当然，我可以继续扩展Typescript的使用教程，涵盖一些更进阶的主题和实际应用场景。

四、TypeScript示例

4.1 枚举（Enumerations）

    TypeScript 提供了枚举类型，它是对JavaScript标准数据类型的一个补充。枚举是一种特殊的类，它包含了一组命名的常量值。

     enum Color {Red, Green, Blue}

     let c: Color = Color.Green;

     // 或者，你也可以显式地指定成员的数值

     enum ColorWithNumbers {

         Red = 1,

         Green,

         Blue

     }

     console.log(ColorWithNumbers.Green); // 输出 2

4.2 类型别名（Type Aliases）

    类型别名用来给一个类型起一个新名字。类型别名常用于联合类型、元组等复杂类型，以提高代码的可读性。

     type Name = string;

     type NameResolver = () => string;

     type NameOrResolver = Name | NameResolver;

     function getName(n: NameOrResolver): string {

         if (typeof n === "string") {

             return n;

         } else {

             return n();

         }

     }

4.3 模块解析（Module Resolution）

    TypeScript 编译器在编译时如何找到模块文件的过程称为模块解析。了解这一点对于配置大型项目中的模块导入非常重要。

    TypeScript 支持两种模块解析策略：Node.js 风格的解析和 Classic 风格的解析。

4.4 高级类型（Advanced Types）

    TypeScript 提供了许多高级类型特性，如交叉类型（Intersection Types）、联合类型（Union Types）、条件类型（Conditional Types）、映射类型（Mapped Types）等。

    示例：交叉类型：

     interface Alarm {

         alert(): void;

     }

     interface Light {

         lightOn(): void;

         lightOff(): void;

     }

     type AlarmLight = Alarm & Light;

     const alarmLight: AlarmLight = {

         alert() {

             console.log('Alert!');

         },

         lightOn() {

             console.log('Light is on');

         },

         lightOff() {

             console.log('Light is off');

         }

     };

4.5 TypeScript 与 React

    TypeScript 与 React 的结合可以极大地提高大型前端项目的可维护性和可扩展性。

    示例：React 组件的 TypeScript 声明：

     import React from 'react';

     interface GreetingProps {

         name: string;

     }

     const Greeting: React.FC<GreetingProps> = ({ name }) => {

         return <h1>Hello, {name}!</h1>;

     };

     export default Greeting;

4.6 TypeScript 与 Node.js

    TypeScript 同样适用于 Node.js 后端开发，可以提供类型检查和更好的代码提示。

    示例：一个简单的 Node.js HTTP 服务器：

     import http from 'http';

     const server = http.createServer((req, res) => {

         res.writeHead(200, {'Content-Type': 'text/plain'});

         res.end('Hello World\n');

     });

     server.listen(3000, () => {

         console.log('Server running at http://localhost:3000/');

     });

4.7 TypeScript 配置（tsconfig.json）

    `tsconfig.json` 文件是 TypeScript 项目的配置文件，它包含了编译选项和其他设置。

    示例：一个基本的 `tsconfig.json` 文件：

     {

         "compilerOptions": {

             "target": "es5",

             "module": "commonjs",

             "strict": true,

             "esModuleInterop": true,

             "skipLibCheck": true,

             "forceConsistentCasingInFileNames": true

         }

     }

    这些主题涵盖了 TypeScript 的许多高级特性和应用场景，从枚举和类型别名到与 React 和 Node.js 的集成，再到 TypeScript 配置文件的设置。掌握这些内容将帮助你更深入地理解和使用 TypeScript。

五、TypeScript应用场景

5.1 装饰器（Decorators）

    装饰器是一种特殊类型的声明，它能够被附加到类声明、方法、访问器、属性或参数上。装饰器使用`@expression`这种形式，`expression`必须求值为一个函数，它会在运行时被调用，被装饰的声明信息作为参数传入。

    例如，使用装饰器来记录函数调用的日志：

     function log(target: any, propertyName: string, descriptor: TypedPropertyDescriptor<any>) {

         let originalMethod = descriptor.value;

         descriptor.value = function (...args: any[]) {

             console.log(`Method ${propertyName} has been called with ${args}`);

             return originalMethod.apply(this, args);

         };

         return descriptor;

     }

     class Greeter {

         @log

         greet(name: string) {

             return `Hello, ${name}!`;

         }

     }

     const g = new Greeter();

     g.greet('world'); // 控制台输出：Method greet has been called with ["world"]

5.2 命名空间（Namespaces）

    命名空间用于组织代码，以便更好地进行模块化。它可以帮助避免全局命名冲突。

    示例：

     namespace Validation {

         export interface StringValidation {

             isRequired: boolean;

             maxLength?: number;

         }

         export function validateInput(input: string, validations: StringValidation) {

             // 实现验证逻辑

         }

     }

     // 使用命名空间

     Validation.validateInput('hello', { isRequired: true, maxLength: 10 });

5.3 泛型约束

    有时你想对泛型进行约束，比如你想限制泛型参数只能是某种类型。这可以通过`extends`关键字来实现。

     interface Lengthwise {

         length: number;

     }

     function loggingIdentity<T extends Lengthwise>(arg: T): T {

         console.log(arg.length);

         return arg;

     }

     loggingIdentity({length: 10, value: 3}); // 正确

     loggingIdentity({value: 3}); // 错误，因为没有length属性

5.4 泛型接口

    你可以创建泛型接口，来定义一系列方法，这些方法可以操作不同的类型。

     interface GenericIdentityFn<T> {

         (arg: T): T;

     }

     function identity<T>(arg: T): T {

         return arg;

     }

     let myIdentity: GenericIdentityFn<number> = identity;

5.5 异步编程

    Typescript 支持异步编程模式，包括`Promise`、`async/await`等。

     async function fetchData(): Promise<string> {

         return new Promise<string>((resolve, reject) => {

             setTimeout(() => resolve('Data fetched'), 1000);

         });

     }

     async function processData() {

         try {

             const data = await fetchData();

             console.log(data);

         } catch (error) {

             console.error('Error fetching data:', error);

         }

     }

     processData();

    这些扩展内容涵盖了Typescript中更高级和实用的特性，包括装饰器、命名空间、泛型约束、泛型接口以及异步编程。掌握这些内容将帮助你更有效地使用Typescript来构建大型、复杂的应用程序。