tutorial - ¿Cómo importo otros archivos de TypeScript?

typescript object type

Question

Al utilizar el plugin de TypeScript para vs.net, ¿cómo puedo hacer que un archivo de TypeScript importe los módulos declarados en otros archivos de TypeScript?

archivo 1:

module moo
{
export class foo .....
}

archivo 2:

//what goes here?
class bar extends moo.foo
{
}

Answer 1

Actualizado:

Desde la versión 1.8+ , puede usar declaraciones de import simples y simples como:

import { ClassName } from ''../relative/path/to/file'';

o la versión comodín:

import * as YourName from ''global-or-relative'';

Answer 2

Desde TypeScript versión 1.8 puede usar declaraciones de import simples como en ES6:

import { ZipCodeValidator } from "./ZipCodeValidator";
let myValidator = new ZipCodeValidator();

https://www.typescriptlang.org/docs/handbook/modules.html

Respuesta anterior: desde TypeScript versión 1.5 puede usar tsconfig.json : http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Elimina por completo la necesidad de hacer referencia al estilo de comentario.

Respuesta anterior:

Debe hacer referencia al archivo en la parte superior del archivo actual.

Puedes hacer esto así:

/// <reference path="../typings/jquery.d.ts"/>
/// <reference path="components/someclass.ts"/>
class Foo { }

etc.

Estas rutas son relativas al archivo actual.

Tu ejemplo:

/// <reference path="moo.ts"/>
class bar extends moo.foo
{
}

Answer 3

Si está buscando utilizar módulos y desea que se compile en un único archivo JavaScript, puede hacer lo siguiente:

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

Puedes leer más aquí: http://www.codebelt.com/typescript/javascript-namespacing-with-typescript-internal-modules/

Answer 4

Si está utilizando módulos AMD, las otras respuestas no funcionarán en TypeScript 1.0 (la más nueva al momento de escribir).

Tiene diferentes enfoques disponibles para usted, dependiendo de cuántas cosas desea exportar de cada archivo .ts .

Múltiples exportaciones

Foo.ts

export class Foo {}
export interface IFoo {}

Bar.ts

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

Exportación única

Foo.ts

class Foo
{}
export = Foo;

Bar.ts

import Foo = require("Foo");
var foo = new Foo();

Answer 5

Typescript distingue dos tipos diferentes de módulos: los módulos internos se utilizan para estructurar el código internamente. En tiempo de compilación, debe incluir los módulos internos en el alcance mediante rutas de referencia:

/// <reference path=''moo.ts''/>
class bar extends moo.foo {
}

Por otro lado, los módulos externos se utilizan para referirse a los archivos fuente externos que se cargarán en tiempo de ejecución utilizando CommonJS o AMD . En su caso, para usar la carga del módulo externo, debe hacer lo siguiente:

moo.ts

export class foo {
test: number;
}

aplicaciones

import moo = module(''moo'');
class bar extends moo.foo {
test2: number;
}

Tenga en cuenta la forma diferente de poner el código en el alcance. Con los módulos externos, debe usar un module con el nombre del archivo de origen que contiene la definición del módulo. Si desea utilizar módulos AMD, debe llamar al compilador de la siguiente manera:

tsc --module amd app.ts

Esto luego se compila para

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

Answer 6

usó una referencia como "///<reference path="web.ts" /> y luego en las propiedades del proyecto VS2013 para compilar" app.ts "," compilación de Typescript "->" combinar salida de javascript en archivo: "(marcado ) -> "app.js"

Answer 7

/// <reference path=''moo.ts''/> ahora usar /// <reference path=''moo.ts''/> pero para bibliotecas externas donde el archivo de definición no está incluido en el paquete.

La reference path resuelve errores en el editor, pero en realidad no significa que el archivo deba importarse. Por lo tanto, si está utilizando un flujo de trabajo gulp o JSPM, es posible que intente compilar por separado cada archivo en lugar de tsc -out en un archivo.

Desde Typescript 1.5

Simplemente prefija lo que desea exportar a nivel de archivo (ámbito raíz)

aLib.ts

{
export class AClass(){} // exported i.e. will be available for import
export valueZero = 0; // will be available for import
}

También puede agregar más adelante al final del archivo lo que desea exportar

{
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
}

O incluso mezclar ambos juntos

{
class AClass(){} // not exported yet
export valueZero = 0; // will be available for import
export {AClass} // add AClass to the export list
}

Para la importación tiene 2 opciones, primero elige de nuevo lo que quiere (uno por uno)

anotherFile.ts

{
import {AClass} from "./aLib.ts"; // you import only AClass
var test = new AClass();
}

O todas las exportaciones

{
import * as lib from "./aLib.ts"; // you import all the exported values within a "lib" object
var test = new lib.AClass();
}

Nota sobre las exportaciones: exportar el doble del mismo valor generará un error {export valueZero = 0; exportar {valueZero}; // valueZero ya está exportado ...}

Answer 8

Proceso Quick Easy en Visual Studio

Arrastre y suelte el archivo con la extensión .ts desde la ventana de la solución al editor, generará código de referencia en línea como ...

/// <reference path="../../components/someclass.ts"/>

Answer 9

import {className} from ''filePath'';

recuerda también La clase que está importando, que debe exportarse en el archivo .ts.