Каков правильный способ использования requireJS с машинописным текстом?

Question

Примеры, которые я нашел here и here, говорят, чтобы использовать модуль(). Однако при компиляции я получаю «предупреждение TS7021:« module (...) »устарел. Вместо этого используйте« require (...) ».

Так несколько основных вопросов:

1. При использовании машинопись и requireJS, как я могу получить доступ к классу в одном .ts файл из другого .ts файл, где requireJS будет загружать второй файл и дать мне класс в первом файле?
2. Есть ли способ выполнить стандартный подход requireJS с двумя файлами .ts, где define() в верхней части загружает второй ts-файл и возвращает обратно объект, который он строит в конце?
3. Сортировка как вопрос № 2. From a java файл сценария, могу ли я использовать конструкцию define() в файле сценария типа, чтобы получить экземпляр объекта? Если да, то как?

Update: Ниже дает мне ошибку TSC компиляции:

///<reference path='../../libs/ExtJS-4.2.0.d.ts' /> 
///<reference path='../../libs/require.d.ts' /> 

import fdm = require("./file-definitions"); 
require(["../../scripts/ribbon"], function() { 

export module Menu { 

    export class MainMenu { 

Answer 1

Для:

When using typescript and requireJS, how do I access a class in one .ts file from another .ts file where requireJS will load the second file and give me the class in the first file? Is there a way to do the standard requireJS approach with two .ts files where the define() at the top loads the second ts file and returns back the object it builds at the end?

просто:

// from file a.ts 
export class Foo{ 

} 

// from file b.ts 
// import 
import aFile = require('a') 
// use: 
var bar = new aFile.Foo(); 

и скомпилировать оба файла --module amd флаг.

Для:

Sort-of the same as question #2. From a java script file, can I use the define() construct on a type script file to get the instantiated object? If so, how?

Чтобы использовать a.ts из b.js просто:

// import as a dependency: 
define(["require", "exports", 'a'], function(require, exports, aFile) { 

    // use: 
    var bar = new aFile.Foo(); 
}); 

Это похоже на то, что вы получите, если вы собираете б. ts

Answer 2

I играли с машинописным текстом, пытаясь интегрировать его в наш существующий проект javascript/requirejs. Как установка, у меня есть Visual Studio 2013 с TypScript для vs v 0.9.1.1. TypScript настроен (в visual studio) для компиляции модулей в формате amd.

Это то, что я нашел работает для меня (там может быть лучше, конечно)

1. Использование драм-зависимость сказать машинопись компилятор добавляет нужный модуль в список компонентов, которые должен быть загружен
2. В конструкторе экспортируемого класса используйте функцию requirejs require для фактического извлечения импортированного модуля (на этом этапе это синхронно из-за предыдущего шага). Для этого необходимо указать reference require.d.ц

Как примечание стороны, но так как на мой взгляд, необходимо машинопись, и потому, что он дал мне немного головной боли, в этом примере я покажу два способа экспортировать классы, которые используют интерфейсы. Проблема с интерфейсами заключается в том, что они используются для проверки типов, но они не производят никакого реального вывода (сгенерированный .js-файл пуст), и это вызывает проблемы типа «экспорт частного класса» Я нашел 2 способа экспорта классов, которые реализуют интерфейс:

1. Просто добавьте АМД-зависимость к интерфейсу (как в файле Logger.ts) и экспортировать типизированный переменную, держащим новый экземпляр класса Экспортируемого класса может быть потреблено напрямую (т.е. myClass.log ('hello'));
2. Не добавляйте amd-зависимость к интерфейсу (как в файле Import.ts) И экспортируйте функцию (например, Instantiate()), которая возвращает переменную типа, содержащую новый экземпляр класса экспортироваться класс может быть потреблен с помощью этой функции

похоже, что первый вариант лучше (т.е. myClass.instantiate() журнал («привет»).): вам не нужно вызывать функцию Instantiate, плюс вы получите типизированный класс для работы. Недостатком является то, что файл javascript [empty] интерфейса перемещается в браузер (но он все равно кэшируется, и, возможно, вы даже используете минификацию, и в этом случае это вообще не имеет значения).

В следующих блоках кода есть 2 машинописных модуля, загруженных с требованием (amd): Logger и Import.

ILogger.ts файл

interface ILogger { 
    log(what: string): void; 
} 

Logger.ts файл

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

//this dependency required, otherwise compiler complaints of private type being exported 
///<amd-dependency path="./ILogger"/> 

class Logger implements ILogger { 
     formatOutput = function (text) { 
      return new Date() + '.' + new Date().getMilliseconds() + ': ' + text; 
     }; 

     log = function (what) { 
      try { 
       window.console.log(this.formatOutput(what)); 
      } catch (e) { 
       ; 
      } 
     }; 
} 

//this approach requires the amd-dependency above for the interafce 
var exportLogger: ILogger = new Logger(); 
export = exportLogger; 

Использование Logger.ts в другом файле TS (Import.ts)

///<reference path="../../../ext/definitions/require.d.ts"/> 

///<amd-dependency path="Shared/Logger"/> 
///<amd-dependency path="./IImport"/> 

class _Import implements IImport{ 
    ko: any; 
    loggerClass: ILogger; 

    constructor() { 
     this.ko = require('knockout');//require coming from require.d.ts (in external_references.ts) 
     this.loggerClass = require('Shared/Logger'); 
    } 

    init(vm: any) { 
     this.loggerClass.log('UMF import instantiated...'); 
    } 
} 

////Alternative Approach: 
////this approach does not require adding ///<amd-dependency path="./IImport"/> 
////this can be consumed as <imported_module_name>.instantiate().init(); 
//export function instantiate() { 
// var r : any = new _Import();// :any required to get around the private type export error 
// return r; 
//} 

//this module can be consumed as <imported_module_name>.init(); 
var exported: IImport = new _Import(); 
export = exported; 

IImport.ts файл

interface IImport { 
    init(vm: any): void; 
} 

Употреблять модуль импорта прямо из Javascript использовать что-то вроде (жаль, что я не пробовал этот, но он должен работать)

define (['Import'], function (import) 
{ 
    //approach 1 
    import.init(); 

    ////approach 2 
    //import.instantiate().init(); 
}); 

Answer 3

Вы хотите заявление экспорта ниже класса вы создаете.

// Base.ts 
class Base { 

    constructor() { 
    } 

    public createChildren():void { 

    } 
} 

export = Base; 

Затем импортировать и использовать в другой класс, который вы должны сделать следующее:

// TestApp.ts 
import Base = require("view/Base"); 

class TestApp extends Base { 

    private _title:string = 'TypeScript AMD Boilerplate'; 

    constructor() { 
     super(); 
    } 

    public createChildren():void { 

    } 
} 

export = TestApp; 

Вы можете проверить пример кода на http://www.codebelt.com/typescript/typescript-internal-and-external-modules/

Answer 4

Я бы прокомментировал ответ Давида ответить basarat (в отношении модули и классы), но у меня нет репутации. Я знаю, что этот вопрос устарел, но я не нашел ответа в другом месте.

Мне удалось с помощью видеороликов basarat в сочетании с некоторыми другими ресурсами разобраться в таких классах, как David Thielen.Обратите внимание, что у меня больше нет записей для исходных файлов ts, но у меня есть amd-зависимые и импортные инструкции. В Eclipse с плагином TS от palantir мое завершение кода и возможность перехода от использования к определению работают только с операторами amd-dependency и import. Файлы заголовков по-прежнему нужны, поскольку они не имеют никакого отношения к развертыванию и используются только компилятором TS. Также обратите внимание, что расширения .ts-файлов используются для ссылочных операторов, но не для операторов amd и import.

В Utils.ts у меня есть:

///<reference path="headers/require.d.ts" /> 

export function getTime(){ 
    var now = new Date(); 
    return now.getHours()+":"+now.getMinutes()+':'+now.getSeconds(); 
} 

В OntologyRenderScaler у меня есть:

///<reference path="headers/require.d.ts" /> 

///<reference path="headers/d3.d.ts" /> 
///<reference path="headers/jquery.d.ts" /> 

///<amd-dependency path="Utils" /> 

import Utils = require('./Utils'); 

export class OntologyRenderScaler { 
... 
Utils.getTime(); 
... 
} 

В OntologyMappingOverview.ts у меня есть:

///<reference path="headers/require.d.ts" /> 

///<reference path="headers/d3.d.ts" /> 
///<reference path="headers/jquery.d.ts" /> 

///<amd-dependency path="Utils" /> 
///<amd-dependency path="OntologyGraph" /> 
///<amd-dependency path="OntologyFilterSliders" /> 
///<amd-dependency path="FetchFromApi" /> 
///<amd-dependency path="OntologyRenderScaler" /> 
///<amd-dependency path="GraphView" /> 

///<amd-dependency path="JQueryExtension" /> 

import Utils = require('./Utils'); 
import OntologyGraph = require('./OntologyGraph'); 
import OntologyRenderScaler = require('./OntologyRenderScaler'); 
import OntologyFilterSliders = require('./OntologyFilterSliders'); 
import GraphView = require('./GraphView'); 

export class OntologyMappingOverview extends GraphView.BaseGraphView implements GraphView.GraphView { 
    ontologyGraph: OntologyGraph.OntologyGraph; 
    renderScaler: OntologyRenderScaler.OntologyRenderScaler; 
    filterSliders: OntologyFilterSliders.MappingRangeSliders; 
... 
this.renderScaler = new OntologyRenderScaler.OntologyRenderScaler(this.vis); 
... 
} 

мне не удалось (еще!), чтобы заставить вещи работать, как codeBelt, предложенные выше, но обмен, который мы имели в его блоге, показал, что если Я использую его подход (с экспортом MyClass в нижней части файла), тогда мне не нужно будет удвоить импортированный идентификатор с именем класса. Я предполагаю, что он будет экспортировать класс интересов, а не пространство имен, в котором оно определено (неявный внешний модуль, то есть имя файла TypeScript).