requirejs - practicar - mecanografia online

¿Cuál es la forma correcta de utilizar requireJS con mecanografía?

Question

Los ejemplos que he encontrado here y here dicen usar módulo (). Sin embargo, cuando compilo obtengo "aviso TS7021: ''el módulo (...)'' está en desuso. Use ''require (...)'' en su lugar".

Así que un par de preguntas básicas:

1. Al usar mecanografia 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 en el primer archivo?
2. ¿Hay una manera de hacer el enfoque de requireJS estándar con dos archivos .ts donde define () en la parte superior carga el segundo archivo ts y devuelve el objeto que genera al final?
3. Del mismo modo que la pregunta # 2. Desde un archivo de script java , ¿puedo usar la construcción define () en un archivo de script de tipo para obtener el objeto instanciado? ¿Si es así, cómo?

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

Desea la declaración de exportación debajo de la clase que está creando.

// Base.ts
class Base {

    constructor() {
    }

    public createChildren():void {

    }
}

export = Base;

Luego, para importar y usar en otra clase harías:

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

class TestApp extends Base {

    private _title:string = ''TypeScript AMD Boilerplate'';

    constructor() {
        super();
    }

    public createChildren():void {

    }
}

export = TestApp;

Puede consultar el código de ejemplo en http://www.codebelt.com/typescript/typescript-internal-and-external-modules/

Answer 2

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

Logré usar los videos de basarat, combinados con algunos otros recursos, para descubrir las clases que David Thielen necesitaba. Tenga en cuenta que ya no tengo entradas para mis archivos de origen ts, pero sí tengo declaraciones de dependencia e importación. En Eclipse con el complemento TS de palantir, la finalización de mi código y la capacidad de saltar del uso a la definición funcionan solo con las declaraciones de dependencia e importación de amd. Los archivos de encabezado aún necesitan declaraciones, ya que no tienen nada que ver con la implementación y solo los utiliza el compilador de TS. Tenga en cuenta también que las extensiones de archivo .ts se utilizan para las declaraciones de referencia, pero no las declaraciones amd y de importación.

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

No logré (¡todavía!) Hacer que las cosas funcionen como codeBelt sugirió anteriormente, pero un intercambio que tuvimos en su blog reveló que si obtenía su enfoque de trabajo (con la exportación de MyClass al final del archivo), entonces no lo haría. Es necesario 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á definido (el módulo externo implícito, es decir, el nombre de archivo de TypeScript).

Answer 3

He estado jugando con mecanografiado, intentando integrarlo en nuestro proyecto existente de javascript / requirejs. Como configuración, tengo Visual Studio 2013 con Typescript para vs v 0.9.1.1. Typescript está configurado (en visual studio) para compilar módulos en formato amd.

Esto es lo que he encontrado que funciona para mí (podría haber una mejor manera, por supuesto)

1. Utilice amd-dependencia para decirle al compilador mecanografiado que agrega el módulo requerido a la lista de componentes que deben cargarse
2. En el constructor de la clase que se está exportando, utilice la función require de jsj para obtener el módulo importado (en este punto, esto es síncrono debido al paso anterior). Para ello debes hacer referencia a require.d.ts

Como nota al margen, pero dado que en mi opinión es esencial para escribir, y porque me dio un poco de dolor de cabeza, en el ejemplo muestro dos formas de exportar clases que usan interfaces. El problema con las interfaces es que se usan para la verificación de tipos, pero no producen resultados reales (el archivo .js generado está vacío), y causa problemas del tipo '''' exportación de una clase privada ". He encontrado 2 formas de Clases de exportación que implementan una interfaz:

1. Simplemente agregue una dependencia de amd a la interfaz (como se encuentra en el archivo Logger.ts) y exporte una variable con tipo que contenga una nueva instancia de la clase. La clase exportada se puede consumir directamente (es decir, myClass.log (''hola''));
2. No agregue la dependencia de amd a la interfaz (como está en el archivo Import.ts) y exporte una función (es decir, Instantiate ()) que devuelva una variable de tipo cualquiera que contenga una nueva instancia de la clase La clase exportada puede ser consumido a través de esta función (es decir, myClass.instantiate (). log (''hello''))

Parece que la primera opción es mejor: no necesita llamar a la función de instanciar, además de obtener una clase escrita con la que trabajar. El inconveniente es que el archivo javascript de la interfaz [vacío] se desplaza al navegador (pero de todos modos está guardado en caché, y quizás incluso esté utilizando la minificación, en cuyo caso esto no importa en absoluto).

En los siguientes bloques de código hay 2 módulos mecanografiados cargados con require (amd): Logger and Import.

Archivo ILogger.ts

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

Archivo 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;

Usando Logger.ts en otro archivo 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;

Archivo IImport.ts

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

Para consumir el módulo Importar directamente desde javascript use algo como (perdón, no he probado este, pero debería funcionar)

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

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

Answer 4

Por :

Al usar mecanografia 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 en el primer archivo? ¿Hay una manera de hacer el enfoque de requireJS estándar con dos archivos .ts donde define () en la parte superior carga el segundo archivo ts y devuelve el objeto que genera 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 --module amd flag.

Por :

Del mismo modo que la pregunta # 2. Desde un archivo de script java, ¿puedo usar la construcción define () en un archivo de script de tipo para obtener el objeto instanciado? ¿Si es así, cómo?

Para usar a.ts de 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