TypeScript 学习笔记（四）：装饰器与高级编程技巧

1. 引言

在前几篇学习笔记中，我们已经了解了 TypeScript 的基础知识、高级类型系统以及模块与命名空间的使用。本篇将深入探讨 TypeScript 中的装饰器与一些高级编程技巧，帮助你在实际项目中更好地利用 TypeScript 的强大功能。

2. 装饰器

装饰器（Decorators）是 TypeScript 提供的一种特殊语法，用于修改类及其成员的行为。装饰器是一种实验性特性，但在很多框架中，如 Angular，已经被广泛使用。

2.1 装饰器的基本概念

装饰器是一个表达式，它可以在运行时被调用，并且可以注入类、方法、访问器、属性或参数的元数据。装饰器的返回值会被用作装饰对象的构造函数或方法等。

2.2 类装饰器

类装饰器应用于类构造函数，可以用来监视、修改或替换类定义。

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}`;
    }
}

2.3 方法装饰器

方法装饰器应用于方法，可以用来监视、修改或替换方法定义。

function enumerable(value: boolean) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        descriptor.enumerable = value;
    };
}

class Greeter {
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }

    @enumerable(false)
    greet() {
        return `Hello, ${this.greeting}`;
    }
}

2.4 访问器装饰器

访问器装饰器应用于访问器属性，可以用来监视、修改或替换访问器定义。

function configurable(value: boolean) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        descriptor.configurable = value;
    };
}

class Point {
    private _x: number;
    private _y: number;

    constructor(x: number, y: number) {
        this._x = x;
        this._y = y;
    }

    @configurable(false)
    get x() {
        return this._x;
    }

    @configurable(false)
    get y() {
        return this._y;
    }
}

2.5 属性装饰器

属性装饰器应用于类属性，可以用来监视或修改属性定义。属性装饰器不能直接修改属性描述符，只能修改类的元数据。

function format(target: any, propertyKey: string) {
    let value = target[propertyKey];

    const getter = () => value;
    const setter = (newValue) => {
        value = newValue.toUpperCase();
    };

    Object.defineProperty(target, propertyKey, {
        get: getter,
        set: setter,
        enumerable: true,
        configurable: true
    });
}

class User {
    @format
    name: string;

    constructor(name: string) {
        this.name = name;
    }
}

const user = new User("john doe");
console.log(user.name); // JOHN DOE

2.6 参数装饰器

参数装饰器应用于类构造函数或方法参数，可以用来监视、修改或替换参数定义。

function logParameter(target: any, propertyKey: string, parameterIndex: number) {
    const metadataKey = `log_${propertyKey}_parameters`;
    if (Array.isArray(target[metadataKey])) {
        target[metadataKey].push(parameterIndex);
    } else {
        target[metadataKey] = [parameterIndex];
    }
}

class UserService {
    greet(@logParameter message: string): string {
        return `Hello, ${message}`;
    }
}

3. 高级编程技巧

3.1 高级类型

TypeScript 提供了一些高级类型操作，可以帮助我们更灵活地定义和操作类型。

条件类型

条件类型根据条件返回不同的类型。

type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

映射类型

映射类型用于根据已有类型生成新的类型。

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

type Partial<T> = {
    [P in keyof T]?: T[P];
};

interface Person {
    name: string;
    age: number;
}

type ReadonlyPerson = Readonly<Person>;
type PartialPerson = Partial<Person>;

keyof 和 typeof 操作符

keyof 操作符用于获取某种类型的所有键，其返回类型是这些键组成的联合类型。

interface Person {
    name: string;
    age: number;
}

type PersonKeys = keyof Person; // "name" | "age"

typeof 操作符用于获取变量或对象的类型。

let person = { name: "John", age: 30 };
type PersonType = typeof person; // { name: string; age: number; }

3.2 模块化编程

TypeScript 支持模块化编程，推荐使用 ES6 模块系统。通过模块化编程，我们可以将代码分割成更小、更易管理的部分。

单文件模块

// math.ts
export function add(a: number, b: number): number {
    return a + b;
}

export function subtract(a: number, b: number): number {
    return a - b;
}

// main.ts
import { add, subtract } from './math';

console.log(add(5, 3));
console.log(subtract(5, 3));

多文件模块

可以将大型项目分割成多个模块，每个模块包含多个文件。

// utils/math.ts
export function add(a: number, b: number): number {
    return a + b;
}

export function subtract(a: number, b: number): number {
    return a - b;
}

// services/user.ts
export class User {
    constructor(public name: string, public age: number) {}
}

// index.ts
import { add, subtract } from './utils/math';
import { User } from './services/user';

const user = new User("John", 30);
console.log(user);
console.log(add(5, 3));
console.log(subtract(5, 3));

4. 总结

在本篇学习笔记中，我们深入探讨了 TypeScript 中的装饰器及其应用，同时介绍了一些高级编程技巧，如高级类型操作和模块化编程。通过掌握这些高级特性和技巧，你可以编写出更具表现力、可维护性和复用性的代码。

下一篇学习笔记将探讨 TypeScript 中的异步编程与错误处理，帮助你在实际项目中更好地处理异步操作和错误。希望你能继续关注本系列的学习笔记，进一步提升 TypeScript 编程技能。