Як використовувати плагін TypeScript для vs.net, як зробити один модуль імпорту файлів TypeScript, оголошений в інших файлах TypeScript?
файл 1:
module moo
{
export class foo .....
}
файл 2:
//what goes here?
class bar extends moo.foo
{
}
Як використовувати плагін 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
{
}
referenceне створює жодного js-коду, який завантажує цей js після компіляції. Це просто для компілятора. У мене немає досвіду роботи з TypeScript і AMD, тому що я просто згрупую згенеровані файли js, тому все, що мені потрібно, є там. Але я бачу, що вам потрібно, і ви можете прочитати більше про це тут: typecriptlang.org/Content/… на сторінці 75 (глава 9). Однак варто прочитати всю специфікацію, вона порівняно коротка порівняно з іншими мовами.
--allпрапор з tsc в головному файлі .ts. Компілятор розраховує всі залежності на основі ваших довідкових тегів та генерує єдиний вихідний .js-файл для всієї програми:tsc --out app.js main.ts
es2015(або esnext) модулі, вказавши розширення файлу в importзаяві є обов'язковим (якщо ви не зробите цього ). TypeScript не додасть розширення для вас. Також на даний момент він не може вивести .mjs, тому розширення повинно бути .js.
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 {}
Бар.ц
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();
Якщо ви хочете використовувати модулі та хочете, щоб він збирався в один файл 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 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";
З 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
використано посилання типу "", "///<reference path="web.ts" />
а потім у властивості проекту VS2013 для побудови "app.ts", "Buildscriptcript" -> "Об'єднати вихід JavaScript у файл:" (перевірено) -> "app.js"
import {className} from 'filePath';
пам’ятайте також. Клас, який ви імпортуєте, який повинен бути експортований у файл .ts.
Швидкий простий процес у Visual Studio
Перетягуйте файл із розширенням .ts з вікна рішення в редактор, він генерує вбудований довідковий код на зразок ..
/// <reference path="../../components/someclass.ts"/>