2

因此，我正在尝试建立对 Typescript 装饰器的理解，并且我一直停留在给出的关于类装饰器的示例上。给出的示例展示了如何通过 function(){} 形成类装饰器。

  function classDecorator<T extends {new(...args:any[]):{}}>(constructor:T){
        return class extends constructor {
            newProperty = "new property";
            hello = "override";
        }
    }    

    @classDecorator
    class Greeter {
        property = "property";
        hello: string;
        constructor(m: string) {
            this.hello = m;
        }
    }    

    console.log(new Greeter("world"));

是什么：

return class extends constructor {
    newProperty = "new property";
    hello = "override";
}

函数如何返回扩展参数（称为“构造”）的“类”关键字？我感到很困惑。

这是原始来源的链接（只需滚动到类装饰器的中间部分）：https ://www.typescriptlang.org/docs/handbook/decorators.html

感谢任何帮助！

4

2 回答 2

1

您需要查看装饰器的完整声明：

function classDecorator<T extends {new(...args:any[]):{}}>(constructor:T) {
    return class extends constructor {
        newProperty = "new property";
        hello = "override";
    }
}

这很粗糙，但这就是正在发生的事情。

的类型constructor是满足T类型参数的东西。

此类型参数T extends {new(...args:any[]):{}}适用于具有构造函数的任何对象，该构造函数接受任意数量的任何类型的参数（即几乎任何类型）。

这个装饰器所做的不是返回constructor传入的，而是返回一个不同的类。

请注意，语法return class { ... }是一种从函数返回匿名类的方法，很像return function() { ... }返回匿名函数。

并且class extends constructor意味着匿名类继承了所有constructor的方法和属性（构造函数是被修饰的类）。

于 2019-05-20T00:35:06.897 回答
0

至于“类扩展”，它是 ES6 javascript 语法： “类表达式”

您可以在小提琴中测试此代码：

class Car {
    constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

const Model = class extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}

console.log(new Model("Ford", "Mustang").show());

---结果：“拉小提琴”“我有一辆福特，它是一辆野马”

于 2021-01-14T17:59:09.227 回答