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-aurelia-part- 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));
});

Answer 2

究竟@autoinject和@inject包含什么？

根據aurelia框架的dependency-injection庫。

    /**
    * Decorator: Directs the TypeScript transpiler to write-out type metadata for the decorated class.
    */
    export function autoinject(potentialTarget?: any): any {
      let deco = function(target) {
        target.inject = metadata.getOwn(metadata.paramTypes, target) || _emptyParameters;
      };

      return potentialTarget ? deco(potentialTarget) : deco;
    }

    /**
    * Decorator: Specifies the dependencies that should be injected by the DI Container into the decoratored class/function.
    */
    export function inject(...rest: any[]): any {
      return function(target, key, descriptor) {
        // if it's true then we injecting rest into function and not Class constructor
        if (descriptor) {
          const fn = descriptor.value;
          fn.inject = rest;
        } else {
          target.inject = rest;
        }
      };
    }

來源網址： https ： //github.com/aurelia/dependency-injection/blob/master/src/injection.js