Búsqueda de sitios web

¿Cuál es la forma correcta de usar requireJS con TypeScript?

Los ejemplos que he encontrado aquí y aquí dicen que use module(). Sin embargo, cuando compilo obtengo "advertencia TS7021: 'module(...)' está en desuso. Use 'require(...)' en su lugar."

Así que un par de preguntas básicas:

  1. Cuando se usa TypeScript y RequireJS, ¿cómo accedo a una clase en un archivo .ts desde otro archivo .ts donde RequireJS cargará el segundo archivo y me dará la clase del primer archivo?
  2. ¿Hay una manera de hacer el enfoque estándar de requireJS con dos archivos .ts donde el define() en la parte superior cargue el segundo archivo ts y devuelva el objeto que construye al final?
  3. Algo parecido a la pregunta #2. Desde un archivo java script, ¿puedo usar la construcción define() en un archivo type script para obtener el objeto instanciado? Si es así, ¿cómo?

Actualización: Lo siguiente me da un error de compilación de 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 {

Respuesta #1

Habría comentado sobre la respuesta de David a la respuesta de basarat (respecto a módulos y clases), pero no tengo la reputación. Sé que esta pregunta está desactualizada, pero no encontré una respuesta en otro lugar.

Tuve éxito usando los videos de basarat, combinados con algunos otros recursos, para resolverlo para clases como las que necesitaba David Thielen. Nota que ya no tengo entradas para mis archivos fuente ts, pero sí tengo declaraciones amd-dependency e import. En Eclipse con el plugin TS de Palantir, la autocompletación de código y la capacidad de saltar de uso a definición funciona solo con las declaraciones amd-dependency e import. Los archivos de encabezado todavía necesitan declaraciones ya que no tienen nada que ver con la implementación y solo son usados por el compilador TS. También nota que las extensiones de archivo .ts se usan para declaraciones de referencia pero no para las declaraciones amd e import.

En Utils.ts tengo:

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

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

En OntologyRenderScaler tengo:

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

En OntologyMappingOverview.ts tengo:

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

¡Aún no logré hacer que las cosas funcionen como sugirió codeBelt arriba, pero un intercambio que tuvimos en su blog reveló que si hago funcionar su enfoque (con export MyClass al final del archivo), entonces no necesitaría duplicar el identificador importado con el nombre de la clase. Supongo que exportaría la clase de interés en lugar del espacio de nombres en el que está definida (el módulo externo implícito, es decir, el nombre del archivo TypeScript).

Respuesta #2

Para :

Cuando se usa TypeScript y RequireJS, ¿cómo accedo a una clase en un archivo .ts desde otro archivo .ts donde RequireJS cargará el segundo archivo y me dará la clase del primer archivo? ¿Hay alguna manera de hacer el enfoque estándar de RequireJS con dos archivos .ts donde el define() en la parte superior carga el segundo archivo .ts y devuelve el objeto que construye al final?

simplemente :

// from file a.ts
export class Foo{

}

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

y compile ambos archivos con la bandera --module amd.

Para :

Más o menos lo mismo que la pregunta #2. Desde un archivo de JavaScript, ¿puedo usar la construcción define() en un archivo de TypeScript para obtener el objeto instanciado? Si es así, ¿cómo?

Para usar a.ts desde b.js simplemente :

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

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

Esto es similar a lo que obtendrías si compilas b.ts

Artículos relacionados