Aurelia中的打字稿自动注入

Question

我是Typescript和Aurelia的新手.我试图让@autoinject装饰器在VS2015 ASP.NET MVC 6项目中工作.

这是我的代码

import {autoinject} from "aurelia-framework";
import {HttpClient} from "aurelia-http-client";

@autoinject()
export class App {
       http: HttpClient;
       constructor(httpClient: HttpClient) {
          this.http = httpClient;
       }

       activate() {
          this.http.get("/api/test/")...
       }
}

当我运行这个时,我得到一个错误,说this.http是未定义的.

我相信我需要添加TypeScript的emitDecoratorMetadata标志,但我不知道如何.

我已经尝试将tsconfig.json文件添加到我的项目中并在编译器选项中设置该标志,但后来我得到了一堆错误(重复标识符).我该如何解决这些错误.我需要在"文件"中添加内容吗？到底是什么？

这是我的config.js文件

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "typescript",
  paths: {
    "npm:*": "jspm_packages/npm/*",
    "github:*": "jspm_packages/github/*"
  },

  map: {
    "aurelia-bootstrapper": "npm:aurelia-bootstrapper@1.0.0-beta.1",
    "aurelia-framework": "npm:aurelia-framework@1.0.0-beta.1.0.7",
    "aurelia-http-client": "npm:aurelia-http-client@1.0.0-beta.1",
    "typescript": "npm:typescript@1.7.5",
     ....
  }
  });

Answer 1

@autoInject()如何工作？

在您需要了解TypeScript的emitDecoratorMetadata标志之前,TypeScript编译器会对Metadata Reflection API进行填充,并为已转换的TypeScript代码添加特殊的装饰器定义.

Aurelia的@autoInject()装饰器使用TypeScript的装饰器创建的类型元数据,并以与@inject(...)装饰器相同的方式将其应用于类.

尝试如下,您需要启用compilerOptions类型脚本中的新选项.

TS配置:

{
    "version": "1.5.1",
    "compilerOptions": {
        "target": "es5",
        "module": "amd",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": false,
        "noLib": true,
        "emitDecoratorMetadata": true
    },
    "filesGlob": [
        "./**/*.ts",
        "!./node_modules/**/*.ts"
    ],
    "files": [
        // ...
    ]
}

文章的片段截图:

关于emitDecoratorMetadata的文章:
http : //blog.durandal.io/2015/05/06/getting-started-with-aurelia-and-typescript/ http://www.danyow.net/inversion-of-control-with-奥里利亚部分-2 /

可用类型脚本选项:https:
//github.com/Microsoft/TypeScript/wiki/Compiler-Options

您可以使用Gulp-Typescript以及Gulp选项来完成

选项:https://github.com/ivogabe/gulp-typescript#options
GitHub问题主题:https://github.com/ivogabe/gulp-typescript/issues/100

Gulp Code Snippet:gulp.task('build-ts',[],function(){

  return gulp.src(paths.typescript)
    .pipe(plumber())
    .pipe(changed(paths.output, {extension: '.js'}))
    .pipe(sourcemaps.init())
    .pipe(ts({
      declarationFiles: false,
      noExternalResolve: true,
      target: 'es5',
      module: 'commonjs',
      emitDecoratorMetadata: true,
      typescript: typescript
    }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.output));
});