web-dev-qa-db-fra.com

Comment importer d'autres fichiers TypeScript?

Lorsque j'utilise le plug-in TypeScript pour vs., comment créer un module d'importation de fichier TypeScript déclaré dans d'autres fichiers TypeScript?

fichier 1:

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

fichier 2:

//what goes here?

class bar extends moo.foo
{
}
typescript
146
Roger Johansson

À partir de TypeScript version 1.8, vous pouvez utiliser des instructions import simples, comme dans ES6:

import { ZipCodeValidator } from "./ZipCodeValidator";

let myValidator = new ZipCodeValidator();

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

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

Cela élimine complètement la nécessité du référencement de style de commentaire.

Réponse plus ancienne: 

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

Vous pouvez faire ceci comme ceci:

/// <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
{
}
183
Peter Porfy

TypeScript distingue deux types de modules différents: Internal les modules sont utilisés pour structurer votre code en interne. Au moment de la compilation, vous devez intégrer les modules internes à l'aide de chemins de référence:

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

class bar extends moo.foo {
}

D'autre part, external modules sont utilisés pour faire référence aux fichiers source externes à charger au moment de l'exécution à l'aide de CommonJS ou AMD. Dans votre cas, pour utiliser le chargement de module externe, 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’apporter le code dans l’étendue. Avec les modules externes, vous devez utiliser module avec le nom du fichier source contenant la définition du module. Si vous souhaitez utiliser des modules AMD, vous devez appeler le compilateur comme suit:

tsc --module AMD app.ts

Ceci est ensuite compilé pour

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);
})
79
Valentin

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).

Vous avez différentes approches à votre disposition, en fonction du nombre d'éléments que vous souhaitez exporter de chaque fichier .ts.

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();
20
Drew Noakes

Si vous souhaitez utiliser des modules et souhaitez les compiler 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 en lire plus ici: http://www.codebelt.com/TypeScript/javascript-namespacing-with-TypeScript-internal-modules/

16
codeBelt

J'éviterais maintenant d'utiliser /// <reference path='moo.ts'/>but pour les bibliothèques externes où le fichier de définition n'est pas inclus dans le package.

Le reference path résout les erreurs dans l'éditeur, mais cela ne signifie pas vraiment que le fichier doit être importé. Par conséquent, si vous utilisez un flux de travail gulp ou JSPM, ceux-ci peuvent essayer de compiler séparément chaque fichier au lieu de tsc -out en un seul fichier.

À partir de TypeScript 1.5

Préfixez simplement ce que vous voulez exporter au niveau du fichier (portée racine)

aLib.ts

{
export class AClass(){} // exported i.e. will be available for import
export valueZero = 0; // will be available for import
}

Vous pouvez également ajouter plus tard à la fin du fichier ce que vous voulez exporter

{
class AClass(){} // not exported yet
valueZero = 0; // not exported yet
valueOne = 1; // not exported (and will not in this example)

export {AClass, valueZero} // pick the one you want to export
}

Ou même mélanger les deux

{
class AClass(){} // not exported yet
export valueZero = 0; // will be available for import
export {AClass} // add AClass to the export list
}

Pour l'importation, vous avez 2 options, vous devez d'abord choisir ce que vous voulez (une par une)

un autreFichier.ts

{
import {AClass} from "./aLib.ts"; // you import only AClass
var test = new AClass();
}

Ou l'ensemble des exportations

{
import * as lib from "./aLib.ts"; // you import all the exported values within a "lib" object
var test = new lib.AClass();
}

Remarque concernant les exportations: exporter deux fois la même valeur provoquera une erreur { Export valueZero = 0; Export {valueZero}; // valueZero est déjà exporté… }

11
Flavien Volken

Mis à jour:

Depuis la version 1.8+, vous pouvez utiliser une simple instruction import comme:

import { ClassName } from '../relative/path/to/file';

ou la version générique:

import * as YourName from 'global-or-relative';
7
Szymon Dudziak

utilisé une référence comme "///<reference path="web.ts" /> puis dans les propriétés du projet VS2013 pour la construction de "app.ts", "TypeScript Build" -> "Combiner la sortie javascript dans le fichier:" (vérifié) -> "app.js"

3
user3461121
import {className} from 'filePath';

souviens-toi aussi. La classe que vous importez, qui doit être exportée dans le fichier .ts.

1
Ahmed Raza

Quick Easy Process dans Visual Studio  

Drag and Drop le fichier avec l'extension .ts de la fenêtre de solution à éditeur, il va générer un code de référence en ligne comme ..

/// <reference path="../../components/someclass.ts"/>
0
Mark Macneil Bikeio