如何在打字稿中导入/使用 Reflect

Question

我正在尝试使用此 SO answer 中的代码。 它使用反射。 这是一个副本：

export function CustomComponent(annotation: any) {
  return function (target: Function) {
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;
    var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);

    var parentAnnotation = parentAnnotations[0];
    Object.keys(parentAnnotation).forEach(key => {
      if (isPresent(parentAnnotation[key])) {
        annotation[key] = parentAnnotation[key];
      }
    });
    var metadata = new ComponentMetadata(annotation);

    Reflect.defineMetadata('annotations', [ metadata ], target);
  }
}

首先，我得到了这两个错误：

Property 'getMetadata' does not exist on type 'typeof Reflect'.
Property 'defineMetadata' does not exist on type 'typeof Reflect'.

然后我运行npm install reflect-metadata ，但我不知道如何使用它。

import { Reflect } from reflect-metadata;

Module '".../node_modules/reflect-metadata/index"' has no exported
member 'Reflect'.

或者

import { Reflect } from 'reflect-metadata/Reflect';

Cannot find name 'Record'. 
Type '{}' is not assignable to type 'V'.
File '.../node_modules/reflect-metadata/Reflect.ts' is not a module.

或者

import "reflect-metadata"

rollup: Treating 'fs' as external dependency 
bundle update failed: Error transforming .../node_modules/typescript/lib/typescript.js
with 'commonjs' plugin: The keyword 'package' is reserved (57066:28) in
.../node_modules/typescript/lib/typescript.js 

或者

var reflect = require("reflect-metadata");

Cannot find name 'require'.

或者

declare var require: any;
var reflect = require("reflect-metadata");
var Reflect = reflect.Reflect;

    rollup: Treating 'fs' as external dependency 
bundle update failed: Error transforming .../node_modules/typescript/lib/typescript.js
with 'commonjs' plugin: The keyword 'package' is reserved (57066:28) in
.../node_modules/typescript/lib/typescript.js

当然，我只是错过了一些愚蠢的东西，甚至是一个错字。 我该怎么做才能使用此代码？

Answer 1

您必须将类型声明与 (js) 库一起导入

npm install reflect-metadata -D

在 .ts 文件中：

 import "reflect-metadata";

Answer 2

截至今天， @types/reflect-metadata已被弃用，因为reflect-metadata已经包含了它自己的类型。

因此，要使用它们，您只需要导入库（使用全局范围）。 就是这样。

1. 安装它：
   npm install reflect-metadata --save

2. 导入它：
   import 'reflect-metadata';

Answer 3

Typescript 使用的模块加载范式与 JavaScript 的加载范式略有不同。

假设您有一个模块Modulus ，它定义了三个类A 、 B和C 。

import { A } from "Modulus"

将从模块Modulus导入类（或函数） A并使其在您当前的模块中可用。 如果 Typescript 在Modulus找不到名为A导出，则会抛出错误。

// Equivalent to the following in JavaScript:
// var ModuleNameOfYourChoice = require("Modulus")

import * as ModuleNameOfYourChoice from "Modulus"

将导入在Modulus声明的所有导出，并使它们可用于名称为ModuleNameOfYourChoice的当前模块。

对于您的代码，您需要reflect-metadata模块中定义的所有导出，因此需要将其导入为

import * as Reflect from "reflect-metadata"

祝一切顺利！

打字稿文档：http ://www.typescriptlang.org/docs/handbook/modules.html#import

Answer 4

如果您可以使用 es7+，我找到了另一个解决方案。 因此，在您的tsconfig.json文件中，您只需要更改一行。 将"target"分配更改为至少es2017 。 这就是现在您可以开箱即Reflect使用Reflect的全部内容。 我认为这是非常好的解决方案，因为您不必关心额外的依赖项

示例tsconfig.json

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "outDir": "../dist",
    "module": "umd",
    "target": "es2017",
    "sourceMap": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "removeComments": false,
    "moduleResolution": "node"
  },
  "exclude": [
    "node_modules",
    "bower_components",
    "dist"
  ]
}