Gulp + Browserify + TypeScript vers le navigateur

Question

Mon problème est le suivant :

J'utilise gulp+browserify pour compiler mon TypeScript en JavaScript que vous pouvez utiliser sur des pages HTML normales, le problème est que ma classe n'est jamais disponible sur le navigateur :

VM633:1 Uncaught ReferenceError: Test is not defined
    at <anonymous>:1:13

C'est mon fichier TypeScript :

class Test {
        public test(): void {
            console.log("aa");
        }
}

Voici mon gulpfile

var gulp = require("gulp");
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var tsify = require("tsify");

gulp.task("default", function () {
    return browserify({
        //basedir: '.',
        debug: true,
        entries: ['app/Resources/typescript/Test.ts'],
        cache: {},
        packageCache: {}
    })
        .plugin(tsify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest("web/bundles/framework/js"));
});

Le fichier se compile sans problème, et est inclus dans mon index.html (le fichier js compilé).

Mais quand j'essaie :

 var t = new Test();

Je reçois l'erreur suivante :

VM633:1 Uncaught ReferenceError: Test is not defined
    at <anonymous>:1:13

Je n'arrive pas à le résoudre, j'ai beaucoup lu et je n'ai rien trouvé de clair, j'ai tout essayé et rien n'a marché.

Answer 1

Il y a quelques choses qui manquent ici :

Si vous voulez que votre classe soit accessible en dehors de votre module, vous devez export il :

export class Test {
    // ...
}

Browserify crée des fonctions au-dessus des classes que vous définissez. Elles ne seront donc pas accessibles globalement (ce qui est une bonne chose). Normalement, vous devriez l'importer dans un autre fichier et l'utiliser :

// in any TS file that wants to use `Test` class. Make sure this is included in the gulp entries as well
import {Test} from "test";
var t = new Test();
console.log(t);

Ou, si vous voulez vraiment qu'il soit accessible à l'échelle mondiale, vous pouvez le joindre à l'adresse suivante window objet :

// Dans le fichier Test.ts :

(window as any).Test = Test; // This can be useful when debuging. But don't do this in production code.