第4章 TypeScript编程进阶

在本书的前几章中，我们已经系统地介绍了TypeScript的基础概念、与Vue.js的集成方式以及基本的类型系统和高级特性。随着对TypeScript理解的深入，本章将带领读者步入TypeScript编程的进阶领域，探索那些能够显著提升代码质量、可维护性和可扩展性的高级特性与最佳实践。本章内容将围绕泛型、高级类型、装饰器、命名空间与模块、以及TypeScript的编译选项与优化展开。

4.1 泛型：代码的复用与抽象

泛型（Generics）是TypeScript中一个极其强大的特性，它允许我们在定义函数、接口和类的时候不预先指定具体的类型，而是在使用的时候指定。这种做法增加了代码的复用性、灵活性和类型安全性。

4.1.1 泛型函数

泛型函数是指在定义函数时不指定具体的参数类型，而是在函数调用时指定参数类型的函数。例如，创建一个可以处理任何类型数组的泛型函数：

function identity<T>(arg: T): T {
    return arg;
}
let myIdentity: <T>(arg: T) => T = identity;
let output = myIdentity<string>("myString");
let numOutput = myIdentity(42);

4.1.2 泛型接口

泛型接口允许我们定义一个接口，该接口可以应用于多种不同的类型。这对于创建一组可复用的类型定义非常有用。

interface GenericIdentityFn<T> {
    (arg: T): T;
}
function identity<T>(arg: T): T {
    return arg;
}
let myIdentity: GenericIdentityFn<number> = identity;

4.1.3 泛型类

泛型类可以定义一些在类的不同成员之间共享的类型。

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
    constructor(zero: T, add: (x: T, y: T) => T) {
        this.zeroValue = zero;
        this.add = add;
    }
    zero(): T {
        return this.zeroValue;
    }
    add(x: T, y: T): T {
        return this.add(x, y);
    }
}
let myGenericNumber = new GenericNumber<number>(0, function(x, y) { return x + y; });

4.2 高级类型：深入探索TypeScript的类型系统

TypeScript提供了丰富的类型系统，除了基本的类型（如string、number等）外，还有多种高级类型可以帮助我们更精确地描述复杂的结构。

4.2.1 交叉类型（Intersection Types）

交叉类型是将多个类型合并为一个类型的方式。这让我们可以将现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。

interface Alarm {
    alert(): void;
}
interface Light {
    lightOn(): void;
    lightOff(): void;
}
type AlarmingLight = Alarm & Light;
const alarmingLight: AlarmingLight = {
    alert() {
        console.log('Alarm!');
    },
    lightOn() {
        console.log('Light is on');
    },
    lightOff() {
        console.log('Light is off');
    }
};

4.2.2 联合类型（Union Types）

联合类型表示一个值可以是几种类型之一。使用联合类型，我们可以让变量拥有多种类型。

let greet: string | (() => void);
greet = "Hello, world!";
greet = function() { console.log("Greeting!"); };
// 访问greet属性或方法前需要类型断言
if (typeof greet === "string") {
    console.log(greet.toUpperCase());
} else {
    greet();
}

4.2.3 类型别名（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 装饰器（Decorators）

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

4.3.1 类装饰器

类装饰器在类构造函数上执行，可以用来监视、修改或替换类的定义。

function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}
@sealed
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

4.3.2 方法装饰器

方法装饰器会在运行时被调用，传入的参数包括目标对象的成员名称、成员描述符（对于属性）以及属性键（对于参数）。

function log(target: any, propertyName: string, descriptor: TypedPropertyDescriptor<any>) {
    let originalMethod = descriptor.value;
    descriptor.value = function(...args: any[]) {
        console.log(`Calling: ${propertyName}(${args})`);
        return originalMethod.apply(this, args);
    };
    return descriptor;
}
class Calculator {
    @log
    add(a: number, b: number) {
        return a + b;
    }
}
const c = new Calculator();
c.add(2, 3);

4.4 命名空间与模块

在TypeScript中，命名空间（Namespaces）和模块（Modules）是组织代码的重要特性，它们用于封装变量、函数、类、接口等，避免命名冲突。

4.4.1 命名空间

命名空间是一种封装变量的方式，它提供了一种组织代码的方法，帮助开发者将全局作用域中的标识符（变量、函数等）组织到逻辑上相关的组或容器中。

namespace Geometry {
    export interface Point {
        x: number;
        y: number;
    }
    export function distance(p1: Point, p2: Point): number {
        const dx = p2.x - p1.x;
        const dy = p2.y - p1.y;
        return Math.sqrt(dx * dx + dy * dy);
    }
}
let p1: Geometry.Point = { x: 0, y: 0 };
let p2: Geometry.Point = { x: 3, y: 4 };
console.log(Geometry.distance(p1, p2));

4.4.2 模块

模块是声明在单独文件（或文件组）中的代码块。模块可以导入其他模块中导出的变量、函数、类等。在TypeScript中，模块的概念与ES6模块相同。

// math.ts
export function add(a: number, b: number): number {
    return a + b;
}
// app.ts
import { add } from './math';
console.log(add(1, 2));

4.5 TypeScript编译选项与优化

TypeScript提供了丰富的编译选项，允许开发者根据自己的需求调整编译过程，以达到性能优化、代码压缩等目的。

4.5.1 常用编译选项

• --target：指定ECMAScript目标版本，如ES5、ES6等。
• --module：指定生成哪个模块系统代码，如CommonJS、AMD、UMD、ES6等。
• --outDir：重定向输出目录。
• --sourceMap：生成相应的.map文件。
• --strict：启用所有严格类型检查选项。

4.5.2 性能优化

• 使用--declaration生成.d.ts声明文件：便于类型检查和第三方库的使用。
• 合理设置--target和--module：根据项目运行环境选择合适的ECMAScript版本和模块系统。
• 利用--allowJs和--checkJs检查JavaScript代码：提升项目整体类型安全性。
• 使用--noImplicitAny等严格模式选项：增强类型系统的严格性，减少潜在的运行时错误。

结语

通过本章的学习，我们深入探讨了TypeScript的泛型、高级类型、