请解释 TypeScript 的装饰器 (Decorators) 的实现原理。编译后的 JavaScript 代码是什么样的？

推荐答案

TypeScript 的装饰器是一种特殊类型的声明，它可以被附加到类声明、方法、访问器、属性或参数上。装饰器使用 @expression 的形式，其中 expression 是一个函数，它会在运行时被调用，并以被装饰的声明作为参数。

装饰器的实现原理是通过在编译阶段将装饰器函数注入到目标代码中，从而在运行时对目标进行修改或扩展。编译后的 JavaScript 代码会将装饰器函数包裹在目标代码周围，形成一种“包装器”模式。

本题详细解读

装饰器的基本语法

装饰器的基本语法如下：

@decorator
class MyClass {
    @decorator
    method() {}
}

在这个例子中，@decorator 是一个装饰器函数，它会被应用到 MyClass 类和 method 方法上。

装饰器的实现原理

TypeScript 装饰器的实现原理可以分为以下几个步骤：

1. 编译阶段：TypeScript 编译器在编译代码时，会识别装饰器语法，并将其转换为相应的 JavaScript 代码。
2. 运行时：在运行时，装饰器函数会被调用，并传入被装饰的目标（如类、方法等）作为参数。
3. 修改或扩展：装饰器函数可以根据传入的参数对目标进行修改或扩展。

编译后的 JavaScript 代码

假设我们有以下 TypeScript 代码：

// www.javascriptcn.com code example
function log(target: any, key: string, descriptor: PropertyDescriptor) {
    console.log(`Method ${key} was called`);
}

class MyClass {
    @log
    myMethod() {
        console.log('Hello, World!');
    }
}

编译后的 JavaScript 代码可能如下：

// www.javascriptcn.com code example
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};

function log(target, key, descriptor) {
    console.log("Method " + key + " was called");
}

var MyClass = /** @class */ (function () {
    function MyClass() {
    }
    MyClass.prototype.myMethod = function () {
        console.log('Hello, World!');
    };
    __decorate([
        log
    ], MyClass.prototype, "myMethod", null);
    return MyClass;
}());

在这个编译后的代码中，__decorate 函数负责将装饰器应用到目标方法上。log 装饰器函数在 myMethod 方法被调用时，会输出一条日志信息。

装饰器的应用场景

装饰器可以用于多种场景，例如：

• 日志记录：在方法调用前后记录日志。
• 权限控制：检查用户权限，决定是否允许执行某个方法。
• 性能监控：测量方法的执行时间。
• 依赖注入：自动注入依赖项。

通过装饰器，开发者可以在不修改原有代码的情况下，对类或方法进行功能扩展或行为修改。