我如何导入其他类型的文件?

When using the TypeScript plugin for vs.net, how do I make one TypeScript file import modules declared in other TypeScript files?

当使用vs.net的TypeScript插件时，如何在其他类型文件中声明一个类型文件导入模块?

file 1:

文件1:

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

file 2:

文件2:

//what goes here?

class bar extends moo.foo
{
}

9 个解决方案

#1

From TypeScript version 1.8 you can use simple import statements just like in ES6:

从TypeScript版本1.8中，您可以使用简单的import语句，就像在ES6中一样:

import { ZipCodeValidator } from "./ZipCodeValidator";

let myValidator = new ZipCodeValidator();

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

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

Old answer: From TypeScript version 1.5 you can use tsconfig.json: http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

旧的答案:从TypeScript版本1.5中可以使用tsconfig。json:http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

It completely eliminates the need of the comment style referencing.

它完全消除了注释风格引用的需要。

Older answer:

年长的回答:

You need to reference the file on the top of the current file.

您需要在当前文件的顶部引用该文件。

You can do this like this:

你可以这样做:

/// <reference path="../typings/jquery.d.ts"/>
/// <reference path="components/someclass.ts"/>

class Foo { }

etc.

等。

These paths are relative to the current file.

这些路径是相对于当前文件的。

Your example:

你的例子:

/// <reference path="moo.ts"/>

class bar extends moo.foo
{
}

#2

Typescript distinguishes two different kinds of modules: Internal modules are used to structure your code internally. At compile-time, you have to bring internal modules into scope using reference paths:

Typescript区分了两种不同的模块:内部模块用于内部构造代码。在编译时，您必须使用引用路径将内部模块引入范围:

/// <reference path='moo.ts'/>

class bar extends moo.foo {
}

On the other hand, external modules are used to refernence external source files that are to be loaded at runtime using CommonJS or AMD. In your case, to use external module loading you have to do the following:

另一方面，外部模块用于引用外部源文件，这些源文件将在运行时使用CommonJS或AMD加载。在您的情况下，要使用外部模块加载，您必须执行以下操作:

moo.ts

moo.ts

export class foo {
    test: number;
} 

app.ts

app.ts

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

Note the different way of brining the code into scope. With external modules, you have to use module with the name of the source file that contains the module definition. If you want to use AMD modules, you have to call the compiler as follows:

请注意将代码压缩到范围的不同方法。对于外部模块，您必须使用包含模块定义的源文件名称的模块。如果你想使用AMD模块，你必须调用编译器如下:

tsc --module amd app.ts

This then gets compiled to

然后编译成。

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

#3

If you're using AMD modules, the other answers won't work in TypeScript 1.0 (the newest at the time of writing.)

如果你使用的是AMD的模块，其他的答案在TypeScript 1.0中是行不通的(在写作的时候是最新的)。

You have different approaches available to you, depending upon how many things you wish to export from each .ts file.

您可以使用不同的方法，这取决于您希望从每个.ts文件导出多少内容。

Multiple exports

Foo.ts

Foo.ts

export class Foo {}
export interface IFoo {}

Bar.ts

Bar.ts

import fooModule = require("Foo");

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

---

Single export

Foo.ts

Foo.ts

class Foo
{}

export = Foo;

Bar.ts

Bar.ts

import Foo = require("Foo");

var foo = new Foo();

#4

If you are looking to use modules and want it to compile to a single JavaScript file you can do the following:

如果您希望使用模块并希望它编译成一个JavaScript文件，您可以执行以下操作:

tsc -out _compiled/main.js Main.ts

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

ClassOne.ts

///<reference path='CommonComponent.ts'/>

module AnotherNamespace
{
    export class ClassOne
    {
        private _component:CommonComponent;

        constructor()
        {
            this._component = new CommonComponent();
        }
    }
}

CommonComponent.ts

CommonComponent.ts

module AnotherNamespace
{
    export class CommonComponent
    {
        constructor()
        {
        }
    }
}

You can read more here: http://www.codebelt.com/typescript/javascript-namespacing-with-typescript-internal-modules/

您可以在这里阅读更多信息:http://www.codebelt.com/typescript/javascript-namespacing-with- types- internal-modules/。

#5

I would avoid now using /// <reference path='moo.ts'/>but for external libraries where the definition file is not included into the package.

现在我将避免使用/// ，但对于外部库，在包中不包含定义文件。

The reference path solves errors in the editor, but it does not really means the file needs to be imported. Therefore if you are using a gulp workflow or JSPM, those might try to compile separately each file instead of tsc -out to one file.

引用路径可以解决编辑器中的错误，但这并不意味着需要导入文件。因此，如果您使用的是gulp工作流或JSPM，那么可能会尝试单独编译每个文件，而不是将tsc输出到一个文件。

From Typescript 1.5

从打字稿1.5

Just prefix what you want to export at the file level (root scope)

只需要在文件级别(根范围)中导出您想要导出的前缀

aLib.ts

aLib.ts

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

You can also add later in the end of the file what you want to export

您还可以在文件的末尾添加您想要导出的内容。

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

Or even mix both together

或者甚至混合在一起。

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

For the import you have 2 options, first you pick again what you want (one by one)

对于导入，您有2个选项，首先选择您想要的(一个一个)

anotherFile.ts

anotherFile.ts

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

Or the whole exports

或全部出口

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

Note regarding the exports: exporting twice the same value will raise an error { export valueZero = 0; export {valueZero}; // valueZero is already exported… }

关于出口的说明:出口两倍相同的值会引起错误{出口value0 = 0;出口{ valueZero };// valueZero已经出口…

#6

Updated:

更新:

Since version 1.8+ you can use simple simple import statement like:

由于版本1.8+，您可以使用简单的简单导入语句:

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

or the wildcard version:

或通配符版本:

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

#7

used a reference like "///<reference path="web.ts" /> and then in the VS2013 project properties for building "app.ts","Typescript Build"->"Combine javascript output into file:"(checked)->"app.js"

使用“/// ，然后在VS2013项目属性中构建“app.ts”，“Typescript构建”->“将javascript输出合并到文件中:”(检查)->“app.js”

#8

import {className} from 'filePath';

remember also. The class you are importing , that must be exported in the .ts file.

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

#9

Quick Easy Process in Visual Studio

在Visual Studio中快速简单的过程。

Drag and Drop the file with .ts extension from solution window to editor, it will generate inline reference code like..

从解决方案窗口到编辑器拖放文件，它将生成内联引用代码。

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