摘要：這有一些偏方，能讓你順利從遷移至顯式賦值斷言修飾符，即是在類(lèi)里，明確說(shuō)明某些屬性存在于類(lèi)上采用聲明合并形式，多帶帶定義一個(gè)，把用擴(kuò)展的屬性的類(lèi)型，放入中是的一個(gè)提案，它主要用來(lái)在聲明的時(shí)候添加和讀取元數(shù)據(jù)。

Decorator 早已不是什么新鮮事物。在 TypeScript 1.5 + 的版本中，我們可以利用內(nèi)置類(lèi)型 ClassDecorator、PropertyDecorator、MethodDecorator 與 ParameterDecorator 更快書(shū)寫(xiě) Decorator，如 MethodDecorator ：

declare type MethodDecorator = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor) => TypedPropertyDescriptor | void;

使用時(shí)，只需在相應(yīng)地方加上類(lèi)型注解，匿名函數(shù)的參數(shù)類(lèi)型也就會(huì)被自動(dòng)推導(dǎo)出來(lái)了。

function methodDecorator (): MethodDecorator {
  return (target, key, descriptor) => {
    // ...
  };
}

值得一提的是，如果你在 Decorator 給目標(biāo)類(lèi)的 prototype 添加屬性時(shí)，TypeScript 并不知道這些：

function testAble(): ClassDecorator {
  return target => {
    target.prototype.someValue = true
  }
}

@testAble()
class SomeClass {}

const someClass = new SomeClass()

someClass.someValue() // Error: Property "someValue" does not exist on type "SomeClass".

這很常見(jiàn)，特別是當(dāng)你想用 Decorator 來(lái)擴(kuò)展一個(gè)類(lèi)時(shí)。

GitHub 上有一個(gè)關(guān)于此問(wèn)題的 issues，直至目前，也沒(méi)有一個(gè)合適的方案實(shí)現(xiàn)它。其主要問(wèn)題在于 TypeScript 并不知道目標(biāo)類(lèi)是否使用了 Decorator，以及 Decorator 的名稱(chēng)。從這個(gè) issues 來(lái)看，建議的解決辦法是使用 Mixin：

type Constructor = new(...args: any[]) => T

// mixin 函數(shù)的聲明，還需要實(shí)現(xiàn)
declare function mixin(...MixIns: [Constructor, Constructor]): Constructor;

class MixInClass1 {
    mixinMethod1() {}
}

class MixInClass2 {
    mixinMethod2() {}
}

class Base extends mixin(MixInClass1, MixInClass2) {
    baseMethod() { }
}

const x = new Base();

x.baseMethod(); // OK
x.mixinMethod1(); // OK
x.mixinMethod2(); // OK
x.mixinMethod3(); // Error

當(dāng)把大量的 JavaScript Decorator 重構(gòu)為 Mixin 時(shí)，這無(wú)疑是一件讓人頭大的事情。

這有一些偏方，能讓你順利從 JavaScript 遷移至 TypeScript：

顯式賦值斷言修飾符，即是在類(lèi)里，明確說(shuō)明某些屬性存在于類(lèi)上：

function testAble(): ClassDecorator {
  return target => {
    target.prototype.someValue = true
  }
}

@testAble()
class SomeClass {
  public someValue!: boolean;
}

const someClass = new SomeClass();
someClass.someValue // true

采用聲明合并形式，多帶帶定義一個(gè) interface，把用 Decorator 擴(kuò)展的屬性的類(lèi)型，放入 interface 中：

interface SomeClass {
  someValue: boolean;
}

function testAble(): ClassDecorator {
  return target => {
    target.prototype.someValue = true
  }
}

@testAble()
class SomeClass {}

const someClass = new SomeClass();
someClass.someValue // true

Reflect Metadata 是 ES7 的一個(gè)提案，它主要用來(lái)在聲明的時(shí)候添加和讀取元數(shù)據(jù)。TypeScript 在 1.5+ 的版本已經(jīng)支持它，你只需要：

npm i reflect-metadata --save。

在 tsconfig.json 里配置 emitDecoratorMetadata 選項(xiàng)。

它具有諸多使用場(chǎng)景。

譬如在 vue-property-decorator 6.1 及其以下版本中，通過(guò)使用 Reflect.getMetadata API，Prop Decorator 能獲取屬性類(lèi)型傳至 Vue，簡(jiǎn)要代碼如下：

function Prop(): PropertyDecorator {
  return (target, key: string) => {
    const type = Reflect.getMetadata("design:type", target, key);
    console.log(`${key} type: ${type.name}`);
    // other...
  }
}

class SomeClass {
  @Prop()
  public Aprop!: string;
};

運(yùn)行代碼可在控制臺(tái)看到 Aprop type: string。除能獲取屬性類(lèi)型外，通過(guò) Reflect.getMetadata("design:paramtypes", target, key) 和 Reflect.getMetadata("design:returntype", target, key) 可以分別獲取函數(shù)參數(shù)類(lèi)型和返回值類(lèi)型。

除能獲取類(lèi)型信息外，常用于自定義 metadataKey，并在合適的時(shí)機(jī)獲取它的值，示例如下：

function classDecorator(): ClassDecorator {
  return target => {
    // 在類(lèi)上定義元數(shù)據(jù)，key 為 `classMetaData`，value 為 `a`
    Reflect.defineMetadata("classMetaData", "a", target);
  }
}

function methodDecorator(): MethodDecorator {
  return (target, key, descriptor) => {
    // 在類(lèi)的原型屬性 "someMethod" 上定義元數(shù)據(jù)，key 為 `methodMetaData`，value 為 `b`
    Reflect.defineMetadata("methodMetaData", "b", target, key);
  }
}

@classDecorator()
class SomeClass {

  @methodDecorator()
  someMethod() {}
};

Reflect.getMetadata("classMetaData", SomeClass);                         // "a"
Reflect.getMetadata("methodMetaData", new SomeClass(), "someMethod");    // "b"

在 Angular 2+ 的版本中，控制反轉(zhuǎn)與依賴(lài)注入便是基于此實(shí)現(xiàn)，現(xiàn)在，我們來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單版：

type Constructor = new (...args: any[]) => T;

const Injectable = (): ClassDecorator => target => {}

class OtherService {
  a = 1
}

@Injectable()
class TestService {
  constructor(public readonly otherService: OtherService) {}

  testMethod() {
    console.log(this.otherService.a);
  }
}

const Factory = (target: Constructor): T  => {
  // 獲取所有注入的服務(wù)
  const providers = Reflect.getMetadata("design:paramtypes", target); // [OtherService]
  const args = providers.map((provider: Constructor) => new provider());
  return new target(...args);
}

Factory(TestService).testMethod()   // 1

如果你在使用 TypeScript 開(kāi)發(fā) Node 應(yīng)用，相信你對(duì) Controller、Get、POST 這些 Decorator，并不陌生：

@Controller("/test")
class SomeClass {

  @Get("/a")
  someGetMethod() {
    return "hello world";
  }

  @Post("/b")
  somePostMethod() {}
};

這些 Decorator 也是基于 Reflect Metadata 實(shí)現(xiàn)，不同的是，這次我們將 metadataKey 定義在 descriptor 的 value 上：

const METHOD_METADATA = "method"；
const PATH_METADATA = "path"；

const Controller = (path: string): ClassDecorator => {
  return target => {
    Reflect.defineMetadata(PATH_METADATA, path, target);
  }
}

const createMappingDecorator = (method: string) => (path: string): MethodDecorator => {
  return (target, key, descriptor) => {
    Reflect.defineMetadata(PATH_METADATA, path, descriptor.value);
    Reflect.defineMetadata(METHOD_METADATA, method, descriptor.value);
  }
}

const Get = createMappingDecorator("GET");
const Post = createMappingDecorator("POST");

接著，創(chuàng)建一個(gè)函數(shù)，映射出 route：

function mapRoute(instance: Object) {
  const prototype = Object.getPrototypeOf(instance);
  
  // 篩選出類(lèi)的 methodName
  const methodsNames = Object.getOwnPropertyNames(prototype)
                              .filter(item => !isConstructor(item) && isFunction(prototype[item]))；
  return methodsNames.map(methodName => {
    const fn = prototype[methodName];

    // 取出定義的 metadata
    const route = Reflect.getMetadata(PATH_METADATA, fn);
    const method = Reflect.getMetadata(METHOD_METADATA, fn)；
    return {
      route,
      method,
      fn,
      methodName
    }
  })
};

我們可以得到一些有用的信息：

Reflect.getMetadata(PATH_METADATA, SomeClass);  // "/test"

mapRoute(new SomeClass())

/**
 * [{
 *    route: "/a",
 *    method: "GET",
 *    fn: someGetMethod() { ... },
 *    methodName: "someGetMethod"
 *  },{
 *    route: "/b",
 *    method: "POST",
 *    fn: somePostMethod() { ... },
 *    methodName: "somePostMethod"
 * }]
 * 
 */

最后，只需把 route 相關(guān)信息綁在 express 或者 koa 上就 ok 了。

至于為什么要定義在 descriptor 的 value 上，我們希望 mapRoute 函數(shù)的參數(shù)是一個(gè)實(shí)例，而非 class 本身（控制反轉(zhuǎn)）。

巧用 TypeScript（一）

深入理解 TypeScript