Як імпортувати інші файли 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. немає зовнішніх файлів "вимагати" або будь-якого роду ... з того, що я бачу на інших прикладах, я повинен зробити "імпорт moo = модуль (" moo "), однак він скаржиться, що існує жоден му в нинішньому масштабі
— Роджер Йоханссон

2
Так, referenceне створює жодного js-коду, який завантажує цей js після компіляції. Це просто для компілятора. У мене немає досвіду роботи з TypeScript і AMD, тому що я просто згрупую згенеровані файли js, тому все, що мені потрібно, є там. Але я бачу, що вам потрібно, і ви можете прочитати більше про це тут: typecriptlang.org/Content/… на сторінці 75 (глава 9). Однак варто прочитати всю специфікацію, вона порівняно коротка порівняно з іншими мовами.
— Пітер Порфі

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

@PeterPorfy чи є якийсь спосіб, коли ми можемо сильно набрати посилання за допомогою T4MVC
— Mark Macneil Bikeio

Зверніть увагу , що якщо машинопис розказана генерувати 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-файлу, і в жодному з них немає коду "вимагати" ... також "імпортувати moo = module (" moo " ); "видає помилку, що ім'я moo не існує в поточному діапазоні, виділяючи частину модуля (" moo ")
— Roger Johansson

Кілька моментів, щоб уточнити тут: Ви працюєте у Visual Studio? Ви спробували скласти код, який я дав у відповіді, використовуючи tsc безпосередньо? Ви розмістили обидва файли в одному каталозі?
— Валентин

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

2
Я розіслав і надіслав вам запит на тягнення. Будь ласка, дайте мені знати, якщо це спрацювало.
— Валентин

12
ідеально :) для інших, хто читає це: також потрібно експортувати модулі, "експортний модуль ххх"
— Роджер Йоханссон

20

Якщо ви використовуєте модулі AMD, інші відповіді не працюватимуть у TypeScript 1.0 (найновіший на момент написання.)

У вас є різні підходи, залежно від того, скільки речей ви хочете експортувати з кожного .tsфайлу.

Багаторазовий експорт

Foo.ts

export class Foo {}
export interface IFoo {}

Бар.ц

import fooModule = require("Foo");

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

Єдиний експорт

Foo.ts

class Foo
{}

export = Foo;

Бар.ц

import Foo = require("Foo");

var foo = new Foo();

Мені подобається вищезазначений підхід, і я виявляю, що tsc.exe генерує правильні залежності в цьому початковому виклику для визначення (), який ВЕЛИКИЙ! Проблема для мене - це два окремі класи, кожен у своєму власному файлі, кожен із загорнутих у експортний модуль - я можу зробити "імпорт", а один міг би використати інший, але можу успадкувати клас А від 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 workflow або JSPM, вони можуть спробувати скласти окремо кожен файл замістьtsc -out не один файл.

З Typescript 1.5

Просто встановіть, що потрібно експортувати на рівні файлу (root root)

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
}

Для імпорту у вас є два варіанти, спершу вибираєте ще раз те, що хочете (по одному)

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

Примітка щодо експорту: експортування вдвічі одного і того ж значення призведе до помилки {value valueZero = 0; експорт {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", "Buildscriptcript" -> "Об'єднати вихід JavaScript у файл:" (перевірено) -> "app.js"



-1

Швидкий простий процес у Visual Studio

Перетягуйте файл із розширенням .ts з вікна рішення в редактор, він генерує вбудований довідковий код на зразок ..

/// <reference path="../../components/someclass.ts"/>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.