جافاسكريبت - حقن تلقائي لنوعسكريبت في أورليا

أنا جديد على 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 غير معرف.

أعتقد أنني بحاجة إلى إضافة علم emitDecoratorMetadata في TypeScript لكنني لا أعرف كيف.

لقد حاولت إضافة ملف tsconfig.json إلى مشروعي وضبط هذا العلم في خيارات المترجم ولكن بعد ذلك أحصل على الكثير من الأخطاء (معرف مكرر). كيف يمكنني إصلاح هذه الأخطاء؟ هل أحتاج إلى إضافة شيء إلى "files"؟ ماذا بالضبط؟

إليك ملف config.js الخاص بي

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

  map: {
    "aurelia-bootstrapper": "npm:[email ",
    "aurelia-framework": "npm:[email ",
    "aurelia-http-client": "npm:[email ",
    "typescript": "npm:[email ",
     ....
  }
  });

الإجابة رقم 1

كيف يعمل @autoInject()؟

قبل أن تحتاج إلى أن تكون على دراية بأن علامة emitDecoratorMetadata في TypeScript تسبب للمترجم TypeScript بإضافة دعم واجهة برمجة التطبيقات Metadata Reflection و إضافة تعريف ديكور خاص إلى كود TypeScript الذي تم تحويله.

مزخرف @autoInject() الخاص بـ Aurelia يستهلك بيانات النوع التي تم إنشاؤها بواسطة مزخرف TypeScript ويطبقها على الفئة بنفس الطريقة التي يعمل بها المزخرف @inject(...).

حاول كما في الأسفل وتحتاج إلى تمكين الخيار الجديد في compilerOptions لـ Type Script.

تكوين 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/

خيارات Type Script المتاحة:
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: 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));
});

الإجابة رقم 2

ماذا يحتوي بالضبط @autoinject و @inject؟

وفقًا لمكتبة dependency-injection في إطار aurelia.

    /**
    * 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