Как импортировать другие файлы TypeScript?

При использовании плагина TypeScript для vs .net, как мне создать один модуль импорта файлов TypeScript, объявленный в других файлах TypeScript?

файл 1:

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

файл 2:

//what goes here?

class bar extends moo.foo
{
}

Ответ 1

Из TypeScript версии 1.8 вы можете использовать простые инструкции import, как в ES6:

import { ZipCodeValidator } from "./ZipCodeValidator";

let myValidator = new ZipCodeValidator();

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

Старый ответ: Из TypeScript версии 1.5 вы можете использовать tsconfig.json: http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Это полностью исключает необходимость ссылки на стиль комментария.

Старый ответ:

Вам нужно указать файл в верхней части текущего файла.

Вы можете сделать это вот так:

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

class Foo { }

и др.

Эти пути относятся к текущему файлу.

Ваш пример:

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

class bar extends moo.foo
{
}

Ответ 2

Typescript выделяет два разных типа модулей: Внутренние модули используются для структурирования вашего внутреннего кода. Во время компиляции вы должны вносить внутренние модули в область видимости с помощью ссылочных путей:

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

class bar extends moo.foo {
}

С другой стороны, внешние модули используются для ссылки на внешние исходные файлы, которые должны быть загружены во время выполнения с использованием CommonJS или AMD. В вашем случае для загрузки внешнего модуля вам необходимо сделать следующее:

moo.ts

export class foo {
    test: number;
} 

app.ts

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

Обратите внимание на другой способ добавления кода в область видимости. С помощью внешних модулей вы должны использовать module с именем исходного файла, содержащего определение модуля. Если вы хотите использовать модули AMD, вы должны вызвать компилятор следующим образом:

tsc --module amd app.ts

Затем он скомпилируется в

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

Ответ 3

Если вы используете модули AMD, другие ответы не будут работать в TypeScript 1.0 (самый новый на момент написания.)

У вас есть разные подходы, доступные в зависимости от того, сколько вещей вы хотите экспортировать из каждого файла .ts.

Несколько экспорта

Foo.ts

export class Foo {}
export interface IFoo {}

Bar.ts

import fooModule = require("Foo");

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

Отдельный экспорт

Foo.ts

class Foo
{}

export = Foo;

Bar.ts

import Foo = require("Foo");

var foo = new Foo();

Ответ 4

Если вы хотите использовать модули и хотите, чтобы они были скомпилированы в один файл JavaScript, вы можете сделать следующее:

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

Вы можете прочитать больше здесь: http://www.codebelt.com/typescript/javascript-namespacing-with-typescript-internal-modules/

Ответ 5

Я бы теперь избегал использования /// <reference path='moo.ts'/>, но для внешних библиотек, где файл определения не включен в пакет.

reference path решает ошибки в редакторе, но на самом деле это не означает, что файл нужно импортировать. Поэтому, если вы используете рабочий процесс gulp или JSPM, они могут попытаться скомпилировать отдельно каждый файл вместо tsc -out в один файл.

От Typescript 1.5

Просто префикс, который вы хотите экспортировать на уровне файла (область корневого каталога)

aLib.ts

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

В конце файла вы также можете добавить то, что хотите экспортировать

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

Или даже смешать вместе

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

Для импорта у вас есть 2 варианта, сначала вы снова выбираете то, что хотите (один за другим)

anotherFile.ts

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

Или весь экспорт

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

Примечание относительно экспорта: экспорт в два раза того же значения приведет к возникновению ошибки { export valueZero = 0; export {valueZero};//valueZero уже экспортируется... }

Ответ 6

Обновлено:

Начиная с версии 1.8+ вы можете использовать простой простой оператор import, например:

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

или подстановочная версия:

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

Ответ 7

использовал ссылку типа "///<reference path="web.ts" />  а затем в свойствах проекта VS2013 для построения "app.ts", "Typescript Build" → "Объединить вывод javascript в файл:" (отмечено) → "app.js"

Ответ 8

import {className} from 'filePath';

также помните. Класс, который вы импортируете, который должен быть экспортирован в файл .ts.

Ответ 9

Быстрый простой процесс в Visual Studio

Перетащить файл с расширением .ts из окна решения в редактор, он будет генерировать встроенный ссылочный код, например..

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