Comment importer d'autres fichiers TypeScript ?

Question

Lorsque j'utilise le plugin TypeScript pour vs.net, comment faire pour qu'un fichier TypeScript importe des modules déclarés dans d'autres fichiers TypeScript ?

dossier 1 :

module moo
{
    export class foo .....
}

dossier 2 :

//what goes here?

class bar extends moo.foo
{
}

Answer 1

À partir de la version 1.8 de TypeScript, vous pouvez utiliser de simples import comme dans l'ES6 :

import { ZipCodeValidator } from "./ZipCodeValidator";

let myValidator = new ZipCodeValidator();

https://www.typescriptlang.org/docs/handbook/modules.html

Vieille réponse : A partir de la version 1.5 de TypeScript, vous pouvez utiliser tsconfig.json : http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Il élimine complètement le besoin de référencement de type commentaire.

Une réponse plus ancienne :

Vous devez référencer le fichier en haut du fichier actuel.

Vous pouvez faire ça comme ça :

/// <reference path="../typings/jquery.d.ts"/>
/// <reference path="components/someclass.ts"/>

class Foo { }

etc.

Ces chemins sont relatifs au fichier actuel.

Votre exemple :

/// <reference path="moo.ts"/>

class bar extends moo.foo
{
}

Answer 2

Typescript distingue deux types de modules différents : Interne Les modules sont utilisés pour structurer votre code en interne. Au moment de la compilation, vous devez faire entrer les modules internes dans le champ d'application en utilisant des chemins de référence :

/// <reference path='moo.ts'/>

class bar extends moo.foo {
}

D'un autre côté, externe Les modules sont utilisés pour référencer les fichiers sources externes qui doivent être chargés. au moment de l'exécution en utilisant CommonJS o AMD . Dans votre cas, pour utiliser le chargement externe des modules, vous devez procéder comme suit :

moo.ts

export class foo {
    test: number;
} 

app.ts

import moo = module('moo');
class bar extends moo.foo {
  test2: number;
}

Notez la manière différente d'introduire le code dans la portée. Avec les modules externes, vous devez utiliser module avec le nom du fichier source qui contient la définition du module. Si vous voulez utiliser les modules AMD, vous devez appeler le compilateur comme suit :

tsc --module amd app.ts

Il est ensuite compilé en

var __extends = this.__extends || function (d, b) {
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
}
define(["require", "exports", 'moo'], function(require, exports, __moo__) {
    var moo = __moo__;

    var bar = (function (_super) {
        __extends(bar, _super);
        function bar() {
            _super.apply(this, arguments);

        }
        return bar;
    })(moo.foo);
})

Answer 3

Si vous utilisez des modules AMD, les autres réponses ne fonctionneront pas dans TypeScript 1.0 (la plus récente au moment de la rédaction).

Différentes approches s'offrent à vous, en fonction du nombre d'éléments que vous souhaitez exporter à partir de chaque site. .ts fichier.

Exportations multiples

Foo.ts

export class Foo {}
export interface IFoo {}

Bar.ts

import fooModule = require("Foo");

var foo1 = new fooModule.Foo();
var foo2: fooModule.IFoo = {};

---

Exportation unique

Foo.ts

class Foo
{}

export = Foo;

Bar.ts

import Foo = require("Foo");

var foo = new Foo();

Answer 4

Si vous souhaitez utiliser des modules et compiler le tout dans un seul fichier JavaScript, vous pouvez procéder comme suit :

tsc -out _compiled/main.js Main.ts

Main.ts

///<reference path='AnotherNamespace/ClassOne.ts'/>
///<reference path='AnotherNamespace/ClassTwo.ts'/>

module MyNamespace
{
    import ClassOne = AnotherNamespace.ClassOne;
    import ClassTwo = AnotherNamespace.ClassTwo;

    export class Main
    {
        private _classOne:ClassOne;
        private _classTwo:ClassTwo;

        constructor()
        {
            this._classOne = new ClassOne();
            this._classTwo = new ClassTwo();
        }
    }
}

ClassOne.ts

///<reference path='CommonComponent.ts'/>

module AnotherNamespace
{
    export class ClassOne
    {
        private _component:CommonComponent;

        constructor()
        {
            this._component = new CommonComponent();
        }
    }
}

CommonComponent.ts

module AnotherNamespace
{
    export class CommonComponent
    {
        constructor()
        {
        }
    }
}

Vous pouvez lire la suite ici : http://www.codebelt.com/typescript/javascript-namespacing-with-typescript-internal-modules/

Answer 5

A utilisé une référence comme "///<reference path="web.ts" /> et ensuite dans les propriétés du projet VS2013 pour la construction de "app.ts", "Typescript Build"->"Combine javascript output into file :"(checked)->"app.js"