如何让打字稿了解动态添加到类中的静态成员的存在？

Question

我有一个 QueryBuilder，并希望将其所有方法作为静态成员呈现在 Model 类中。

显然，这是有效的 Javascript 代码。但是，我怎么能让打字稿理解Model上那些静态方法的存在呢？

function queryable (target: any) {
  for (const prop in target.prototype.builder) {
    if (prop === 'constructor' || target.prototype.hasOwnProperty(prop)) {
      continue;
    }
    target[prop] = (...args: any[]): any => {
      return target.prototype.builder[prop](...args);
    };
  }
}

class QueryBuilder {
  where(prop: string, value: string) {
    console.log(prop, value);
    console.log("I've presented on model class as static method.");
  }
  // ...
}

@queryable
class Model {
  get builder () {
    return new QueryBuilder();
  }
  // ...
}


// calling static where
Model.where('color', 'red');

类型“typeof Model”上不存在属性“where”。

见Typescript Playground

Answer 1

您应该注意的问题是TypeScript#4881，但从目前 (3.5.1) 开始，装饰器 无法更改它正在装饰的类的类型。

话虽如此，您仍然可以以相同的方式定义装饰器，但显式调用它而不是作为装饰器，因为许多使用 redux 流行的connect 装饰器的打字稿项目必须这样做。

class _Model {
  get builder () {
    return new QueryBuilder();
  }

  // ...
}
const Model = queryable(_Model);

或者如果它是一个模块的主要导出，你可以使用一个名称：

class Model {
  get builder () {
    return new QueryBuilder();
  }

  // ...
}
export default queryable(Model);

然后诀窍是更好地注释装饰器以教打字稿queryable对其target所做的所有添加：

function queryable<T extends new (...args: any[]) => {builder: any}>(target: T): InstanceType<T>['builder'] & (typeof target) {
  for (const prop in target.prototype.builder) {
    if (prop === 'constructor' || target.prototype.hasOwnProperty(prop)) {
      continue;
    }
    (target as any)[prop] = (...args: any[]): any => {
      return target.prototype.builder[prop](...args);
    };
  }
  return target as any
}

Playground link

Answer 2

由于 Typescript 是一种强类型语言，它总是检查类型使用是否与类型接口匹配。这种检查发生在编译期间，当 Typescript 不知道你要添加一个新方法时。因为您在运行时添加它。调用这种方法的唯一方法是转换为像any 这样的通用方法：

(<any>Model).where('color', 'red');

这就像你对 Typescript 说你确定方法存在并且 transpiller 不应该担心它。