如何导入其他TypeScript文件？

Question

使用vs.net的TypeScript插件时,如何在其他TypeScript文件中声明一个TypeScript文件导入模块？

档案1:

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

档案2:

//what goes here?

class bar extends moo.foo
{
}

Answer 1

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

Answer 2

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

Answer 3

如果您使用的是AMD模块,其他答案将无法在TypeScript 1.0中使用(最新的编写时).

您可以使用不同的方法,具体取决于您希望从每个.ts文件导出的内容.

多次出口

Foo.ts

export class Foo {}
export interface IFoo {}

Bar.ts

import fooModule = require("Foo");

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

单一出口

Foo.ts

class Foo
{}

export = Foo;

Bar.ts

import Foo = require("Foo");

var foo = new Foo();

Answer 4

如果您希望使用模块并希望将其编译为单个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/

Answer 5

我现在会避免使用/// <reference path='moo.ts'/>但是对于外部库,其中定义文件未包含在包中.

该reference path编辑器解决了错误,但它并没有真正意味着文件需从国外进口.因此,如果您正在使用gulp工作流或JSPM,那些可能会尝试单独编译每个文件而不是tsc -out一个文件.

来自Typescript 1.5

只需在文件级别(根范围)添加要导出的内容

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
}

对于导入,您有2个选项,首先您再次选择您想要的(逐个)

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

关于导出的注意事项:导出两次相同的值会引发错误{export valueZero = 0; export {valueZero}; // valueZero已导出...}

Answer 6

更新:

从版本开始,1.8+您可以使用简单的简单import语句:

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

或通配符版本:

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