Website-Suche

javascript - Wie richtet man gulp-typescript für Angular 2 ein?

Derzeit benutze ich den tsc-Compiler mit dem Watch-Flag über die Eingabeaufforderung. Es funktioniert gut, lädt alle Definitionsdateien und kompiliert jede Angular2-Datei korrekt. Allerdings ist es sehr unbequem, es über das Shell-Fenster zu benutzen.

Mein Ziel ist es, eine Gulp-Aufgabe zu erstellen, die jede TypeScript-Datei gemäß den Angular2-Definitionen übersetzen kann. Ich habe gulp-typescript eingebunden, es scheint einfach zu benutzen zu sein, also ist dies der Code:

var tsProject = $.typescript.createProject(paths.src + '/tsconfig.json');
gulp.task('typescript', function() {
  gulp
    .src([
      paths.src + '/*.ts'
    ])
    .pipe($.typescript(tsProject)).js
    .pipe(gulp.dest(paths.tmp));
});

Und dies ist die Ordnerstruktur:

...
src/
---- app/
-------- ts/
------------ *.ts
---- typings/
-------- angular2/
------------ angular2.d.ts
------------ http.d.ts
-------- es6-promise/
------------ ...
-------- rx/
------------ ...
-------- tsd.d.ts
---- *.ts
---- tsconfig.json
gulpfile.js
...

Die tsconfig-Datei hat keine files-Liste, daher sollte der Compiler jede ts-Datei innerhalb von src (auf jeder Ebene) prüfen.

Wenn die Aufgabe aufgerufen wird, erhalte ich diese Fehler:

error TS2307: Cannot find module 'angular2/angular2'.
error TS2307: Cannot find module 'angular2/http'.

Wie kann ich dem TypeScript-Compiler mitteilen, welche d.ts-Dateien er verwenden soll?

Antwort #1

Es sieht so aus, als hätten Sie amd-reference in Ihren Dateien noch nicht deklariert.

Versuche, in Dateien, in denen du deine Module importierst, so etwas zu deklarieren:

/// <amd-dependency path="./src/typings/angular2/angular2.d.ts" />
/// <amd-dependency path="./src/typings/angular2/http.d.ts" />

import angular2 = require("angular2");
import http = require("http")

/// <amd-dependency teilt dem Compiler mit, dass spezielle Module im System existieren, und gibt die Möglichkeit, ohne Fehler zu kompilieren

Antwort #2

Ich würde empfehlen, Definitionen zu gulp.src hinzuzufügen. So etwas in der Art:

var tsProject = $.typescript.createProject(paths.src + '/tsconfig.json');
gulp.task('typescript', function() {
  gulp
    .src([
      paths.src + '/app/**/*.ts',
      paths.src + '/typings/**/*.d.ts'
    ])
    .pipe($.typescript(tsProject)).js
    .pipe(gulp.dest(paths.tmp));
});

Verwandte Artikel