使用 vs.net 的 TypeScript 插件时，如何使一个 TypeScript 文件导入在其他 TypeScript 文件中声明的模块？
文件 1：
module moo
{
export class foo .....
}
文件 2：
//what goes here?
class bar extends moo.foo
{
}
问问题
283842 次
10 回答
220
从 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
{
}
于 2012-10-17T08:29:31.247 回答
85
Typescript 区分了两种不同类型的模块：内部模块用于在内部构建代码。在编译时，您必须使用引用路径将内部模块纳入范围：
/// <reference path='moo.ts'/>
class bar extends moo.foo {
}
另一方面，外部模块用于引用要在运行时使用CommonJS或AMD加载的外部源文件。在您的情况下，要使用外部模块加载，您必须执行以下操作：
辩论赛
export class foo {
test: number;
}
应用程序.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);
})
于 2012-10-17T09:12:29.857 回答
22
如果您使用的是 AMD 模块，则其他答案在 TypeScript 1.0（撰写本文时的最新版本）中不起作用。
您可以使用不同的方法，具体取决于您希望从每个.ts文件中导出多少内容。
多重出口
脚
export class Foo {}
export interface IFoo {}
巴茨
import fooModule = require("Foo");
var foo1 = new fooModule.Foo();
var foo2: fooModule.IFoo = {};
单一出口
脚
class Foo
{}
export = Foo;
巴茨
import Foo = require("Foo");
var foo = new Foo();
于 2014-01-22T10:44:51.650 回答
18
如果您正在寻找使用模块并希望将其编译为单个 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();
}
}
}
通用组件.ts
module AnotherNamespace
{
export class CommonComponent
{
constructor()
{
}
}
}
你可以在这里阅读更多：http: //www.codebelt.com/typescript/javascript-namespacing-with-typescript-internal-modules/
于 2013-12-18T06:01:02.883 回答
11
我现在会避免使用/// <reference path='moo.ts'/>但用于定义文件未包含在包中的外部库。
解决了编辑器中的reference path错误，但这并不意味着需要导入文件。因此，如果您使用的是 gulp 工作流或 JSPM，它们可能会尝试分别编译每个文件而不是tsc -out一个文件。
从打字稿 1.5
只需在文件级别（根范围）为要导出的内容添加前缀
一个Lib.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 个选项，首先您再次选择您想要的（一个一个）
另一个文件.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; 导出{valueZero}；// valueZero 已经被导出... }
于 2015-11-26T08:36:14.103 回答
11
由于 TypeScript 1.8+，您可以使用简单的简单import语句，例如：
import { ClassName } from '../relative/path/to/file';
或通配符版本：
import * as YourName from 'global-or-relative';
阅读更多：https ://www.typescriptlang.org/docs/handbook/modules.html
于 2016-11-17T11:45:06.940 回答
3
在 VS2013 项目属性中使用了一个参考"///<reference path="web.ts" />
，然后在 VS2013 项目属性中构建“app.ts”、“Typescript Build”->“将 javascript 输出组合到文件中：”(checked)->“app.js”
于 2014-08-04T23:12:22.930 回答
1
如果你正在为 web 做一些事情，你需要使用 js 文件扩展名：
import { moo } from 'file.js';
如果您正在为 nodejs 做某事，我认为不要使用 js 文件扩展名：
import { moo } from 'file';
于 2020-12-15T15:42:10.293 回答
0
import {className} from 'filePath';
还记得。您要导入的类，必须在 .ts 文件中导出。
于 2017-02-09T07:46:18.493 回答
-1
Visual Studio 中的快速简单流程
将扩展名为 .ts 的文件从解决方案窗口拖放到编辑器，它将生成内联参考代码，如..
/// <reference path="../../components/someclass.ts"/>
于 2017-06-29T17:58:49.023 回答