Wie kann ich bei Verwendung des TypeScript-Plugins für vs.net ein TypeScript-Dateiimportmodul in anderen TypeScript-Dateien deklarieren lassen?

Datei 1:

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

Datei 2:

//what goes here?

class bar extends moo.foo
{
}

Ab TypeScript Version 1.8 können Sie einfache importAnweisungen wie in ES6 verwenden:

import { ZipCodeValidator } from "./ZipCodeValidator";

let myValidator = new ZipCodeValidator();

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

Alte Antwort: Ab TypeScript Version 1.5 können Sie Folgendes verwenden tsconfig.json: http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Die Referenzierung des Kommentarstils entfällt vollständig.

Ältere Antwort:

Sie müssen auf die Datei oben in der aktuellen Datei verweisen.

Sie können dies folgendermaßen tun:

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

class Foo { }

etc.

Diese Pfade sind relativ zur aktuellen Datei.

Ihr Beispiel:

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

class bar extends moo.foo
{
}

Typescript unterscheidet zwei verschiedene Arten von Modulen: Interne Module werden verwendet, um Ihren Code intern zu strukturieren. Zur Kompilierungszeit müssen Sie interne Module mithilfe von Referenzpfaden in den Geltungsbereich bringen:

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

class bar extends moo.foo {
}

Andererseits werden externe Module verwendet, um auf externe Quelldateien zu verweisen, die zur Laufzeit mit CommonJS oder AMD geladen werden sollen . In Ihrem Fall müssen Sie Folgendes tun, um das Laden externer Module zu verwenden:

moo.ts

export class foo {
    test: number;
} 

app.ts

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

Beachten Sie die unterschiedliche Art und Weise, den Code in den Geltungsbereich zu bringen. Bei externen Modulen müssen Sie moduleden Namen der Quelldatei verwenden, die die Moduldefinition enthält. Wenn Sie AMD-Module verwenden möchten, müssen Sie den Compiler wie folgt aufrufen:

tsc --module amd app.ts

Dies wird dann zu kompiliert

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

Wenn Sie AMD-Module verwenden, funktionieren die anderen Antworten in TypeScript 1.0 (dem neuesten zum Zeitpunkt des Schreibens) nicht.

Je nachdem, wie viele Dinge Sie aus jeder .tsDatei exportieren möchten, stehen Ihnen verschiedene Ansätze zur Verfügung .

Mehrere Exporte

Foo.ts

export class Foo {}
export interface IFoo {}

Bar.ts

import fooModule = require("Foo");

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

Einmaliger Export

Foo.ts

class Foo
{}

export = Foo;

Bar.ts

import Foo = require("Foo");

var foo = new Foo();

Wenn Sie Module verwenden möchten und diese in eine einzelne JavaScript-Datei kompilieren möchten, haben Sie folgende Möglichkeiten:

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()
        {
        }
    }
}

Weitere Informationen finden Sie hier: http://www.codebelt.com/typescript/javascript-namespacing-with-typescript-internal-modules/

Ich würde es jetzt vermeiden, /// <reference path='moo.ts'/>nur für externe Bibliotheken zu verwenden, in denen die Definitionsdatei nicht im Paket enthalten ist.

Das reference pathbehebt Fehler im Editor, bedeutet aber nicht wirklich, dass die Datei importiert werden muss. Wenn Sie einen Gulp-Workflow oder JSPM verwenden, versuchen diese möglicherweise, jede Datei separat anstatt tsc -outin eine Datei zu kompilieren .

Aus Typescript 1.5

Stellen Sie einfach das, was Sie exportieren möchten, auf Dateiebene voran (Stammbereich).

aLib.ts

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

Sie können auch später am Ende der Datei hinzufügen, was Sie exportieren möchten

{
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
}

Oder mischen Sie sogar beide zusammen

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

Für den Import haben Sie 2 Möglichkeiten, zuerst wählen Sie erneut aus, was Sie wollen (eine nach der anderen)

anotherFile.ts

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

Oder die ganzen Exporte

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

Hinweis zu den Exporten: Wenn Sie doppelt denselben Wert exportieren, wird ein Fehler ausgegeben {export valueZero = 0; export {valueZero}; // valueZero ist bereits exportiert…}

Seit TypeScript können 1.8+Sie einfache einfache importAnweisungen verwenden wie:

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

oder die Wildcard-Version:

import * as YourName from 'global-or-relative';

Lesen Sie mehr: https://www.typescriptlang.org/docs/handbook/modules.html

verwendete eine Referenz wie "///<reference path="web.ts" /> und dann in den VS2013-Projekteigenschaften zum Erstellen von "app.ts", "Typescript Build" -> "Javascript-Ausgabe in Datei kombinieren:" (aktiviert) -> "app.js"

import {className} from 'filePath';

erinnere dich auch. Die Klasse, die Sie importieren, muss in die .ts-Datei exportiert werden.

Schneller und einfacher Prozess in Visual Studio

Ziehen Sie die Datei mit der Erweiterung .ts per Drag & Drop vom Lösungsfenster in den Editor. Sie generiert Inline-Referenzcode wie ..

/// <reference path="../../components/someclass.ts"/>