多次导出

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

使用"///<reference path="web.ts" />之类的引用然后在VS2013项目属性中构建“app.ts”，“Typescript Build” - ＆gt;“将javascript输出合并到文件中：”（选中） - ＆gt;“app.js”

Answer 7

import {className} from 'filePath';

还记得。要导入的类，必须在.ts文件中导出。

Answer 8

Visual Studio中的快速简易过程

拖放扩展名为.ts的文件从解决方案窗口移至编辑器，它将生成内联参考代码，如..

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

Answer 9

如果您要为网络做某事，则需要使用js文件扩展名：

import { moo } from 'file.js';

如果您要为Node.js做一些事情，我认为不要使用js文件扩展名：

import { moo } from 'file';

如何导入其他TypeScript文件？

9 个答案:

多次导出

单次导出