Typescript autoinject in Aurelia

Question

I am new to Typescript and Aurelia. I am trying to make @autoinject decorator work in a VS2015 ASP.NET MVC 6 project.

Here is my code

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/")... } } 

when i run this i get this.http undefined error message.

It seems to me that I need to add the Typescript flag emitDecoratorMetadata, but I do not know how to do this.

I tried to add the tsconfig.json file to my project and set this flag in the compiler options, but then I get a bunch of errors (duplicate identifier). How can I fix these errors. Do I need to add something to the "files"? What exactly?

Here is my config.js file

 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

How does @autoInject () work?

Before you need to know the TypeScript flag emitDecoratorMetadata , the TypeScript compiler will polyfill the Reflection metadata API and add a special decorator definition to the passed TypeScript code.

The Aurelia @autoInject () decorator consumes the type metadata created by the TypeScript decoder and applies it to the class in the same way as the @inject (...) decoder does.

Try as shown below and you need to enable the new option in compilerOptions type Script.

TS configuration:

 { "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": [ // ... ] } 

Screenshot from article:

Article about 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 /

Available Type Script Parameters:
https://github.com/Microsoft/TypeScript/wiki/Compiler-Options

You can do this with Gulp - Typescript, as well as with the Gulp option

Parameters: https://github.com/ivogabe/gulp-typescript#options
GitHub Issue Topic: 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

What exactly does @autoinject and @inject contain?

According to the dependency-injection library of the aurelia Framework.

  /** * 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 true then we injecting rest into function and not Class constructor if (descriptor) { const fn = descriptor.value; fn.inject = rest; } else { target.inject = rest; } }; } 

Source URL: https://github.com/aurelia/dependency-injection/blob/master/src/injection.js