При использовании плагина TypeScript для vs .net, как мне создать один модуль импорта файлов TypeScript, объявленный в других файлах TypeScript?
файл 1:
module moo
{
export class foo .....
}
файл 2:
//what goes here?
class bar extends moo.foo
{
}
Из 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
{
}
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);
})
Если вы используете модули 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();
Если вы хотите использовать модули и хотите, чтобы они были скомпилированы в один файл 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/
Я бы теперь избегал использования /// <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 уже экспортируется... }
import {AClass} from "./aLib.ts";
Обновлено:
Начиная с версии 1.8+
вы можете использовать простой простой оператор import
, например:
import { ClassName } from '../relative/path/to/file';
или подстановочная версия:
import * as YourName from 'global-or-relative';
использовал ссылку типа "///<reference path="web.ts" />
а затем в свойствах проекта VS2013 для построения "app.ts", "Typescript Build" → "Объединить вывод javascript в файл:" (отмечено) → "app.js"
import {className} from 'filePath';
также помните. Класс, который вы импортируете, который должен быть экспортирован в файл .ts.
Быстрый простой процесс в Visual Studio
Перетащить файл с расширением .ts из окна решения в редактор, он будет генерировать встроенный ссылочный код, например..
/// <reference path="../../components/someclass.ts"/>
reference
не генерирует код js, который загружает этот код после компиляции. Это только для компилятора. У меня нет опыта работы с TypeScript и AMD, потому что я просто объединяю сгенерированные файлы js, чтобы все, что мне нужно, было там. Но я вижу, что вам нужно, и вы можете прочитать об этом подробнее здесь: typescriptlang.org/Content/… на странице 75 (глава 9). Кстати, стоит прочитать всю спецификацию, она относительно короткая по сравнению с другими языками.