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


164

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

файл 1:

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

файл 2:

//what goes here?

class bar extends moo.foo
{
}

Ответы:


203

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

1
Это работает нормально, однако, когда я компилирую код в js. нет никаких «require» или каких-либо ссылок на внешние файлы ... из того, что я вижу на других примерах, я должен сделать «import moo = module (« moo »)), однако он жалуется, что есть в нынешнем объеме нет никакой мысли
— Роджер Йоханссон

2
Да, referenceне генерирует js-код, который загружает этот js после компиляции. Это только для компилятора. У меня нет опыта работы с TypeScript и AMD, потому что я просто объединяю сгенерированные файлы js, чтобы все, что мне нужно, было там. Но я вижу, что вам нужно, и вы можете прочитать больше об этом здесь: typescriptlang.org/Content/… на странице 75 (глава 9). Кстати, стоит прочитать всю спецификацию, она относительно короткая по сравнению с другими языками.
— Питер Порфи

3
Вы можете использовать --allфлаг с tsc в вашем основном файле .ts. Компилятор вычисляет все зависимости на основе ваших ссылочных тегов и генерирует один выходной файл .js для всего приложения:tsc --out app.js main.ts
— null

@PeterPorfy, есть ли какой-нибудь способ, которым мы можем строго набирать ссылочные ссылки, используя T4MVC
— Марк Макнейл Бикио

Обратите внимание, что если TypeScript предписано генерировать es2015(или esnext) модули, указание расширения файла в importинструкции обязательно (если вы этого не сделаете ). TypeScript не добавит расширение для вас. Кроме того, в данный момент он не может выводить данные .mjs, поэтому расширение должно быть .js.
— Дан Даскалеску

83

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

7
Я чувствую себя совершенно потерянным сейчас, независимо от того, что я делаю, компилятор генерирует отдельные файлы .js для каждого файла .ts, и в каждом из них нет кода "require" ... также "import moo = module (" moo " ); "выдает ошибку, что имя moo не существует в текущей области, выделяя часть модуля (" moo ")
— Роджер Йоханссон

Несколько моментов, которые необходимо уточнить: вы работаете в Visual Studio? Вы пытались скомпилировать код, который я дал в ответе, используя tsc напрямую? Вы поместили оба файла в один и тот же каталог?
— Валентин

1
да, компиляция из командной строки, оба файла в одном каталоге.
— Роджер Йоханссон

2
Я разбудил и отправил вам запрос на удаление. Пожалуйста, дайте мне знать, если это сработало.
— Валентин

12
отлично :) для других читающих это: модули тоже нужно экспортировать, "экспорт модуля ххх"
— Роджер Йоханссон

20

Если вы используете модули 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();

Мне нравится описанный выше подход, и я обнаружил, что tsc.exe генерирует правильные зависимости при первоначальном вызове метода define (), что здорово! Для меня проблема в 2 отдельных классах, каждый в своем собственном файле, каждый из которых обернут в модуль экспорта - я могу выполнить «импорт», и один мог бы использовать другой, но может класс A наследовать от B, все еще используя расширения TypeScript. каким - то образом?
— Самуэль Мичам

@SamuelMeacham, конечно, я не понимаю, почему нет. Если у вас все еще есть проблемы, задайте новый вопрос и ссылку на него здесь. Я взгляну.
— Дрю Ноакс

1
Это разобрало меня, теперь все очень гладко. Зависимости, наследование, все это: stackoverflow.com/questions/21179144/…
— Сэмюэль Мичам

@SamuelMeacham Вы ссылаетесь на эту страницу или ссылку, которую вы предоставили, потому что этот ответ от Дрю кажется точным на ...
— Александр Миллс

Этот ответ довольно устарел (2014). Текущий синтаксис описан в разделе « Модули » справочника TypeScript.
— Дан Даскалеску

18

Если вы хотите использовать модули и хотите, чтобы они компилировались в один файл 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/


11

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

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

Из машинописного текста 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";
— Сэмюэль Слэйд

8

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

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

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

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

Подробнее: https://www.typescriptlang.org/docs/handbook/modules.html


глобальный путь поддерживается ??
— Владимир Венегас

@VladimirVenegas Я не уверен, что это именно то, что вы ищете, но, пожалуйста, посмотрите здесь: github.com/Microsoft/TypeScript/wiki/…
— Szymon Dudziak

Для тех, кто только сейчас входит в Typescript, это лучший ответ. Полный пример см .: github.com/bitjson/typescript-starter
— Джейсон Дрейзенер,

3

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



-1

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

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

/// <reference path="../../components/someclass.ts"/>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.