vs.netのTypeScriptプラグインを使用する場合、他のTypeScriptファイルで宣言された1つのTypeScriptファイルインポートモジュールを作成するにはどうすればよいですか?
ファイル1:
module moo
{
export class foo .....
}
ファイル2:
//what goes here?
class bar extends moo.foo
{
}
vs.netのTypeScriptプラグインを使用する場合、他のTypeScriptファイルで宣言された1つのTypeScriptファイルインポートモジュールを作成するにはどうすればよいですか?
ファイル1:
module moo
{
export class foo .....
}
ファイル2:
//what goes here?
class bar extends moo.foo
{
}
回答:
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
{
}
referenceコンパイル後にjsをロードするjsコードを生成しません。コンパイラ専用です。TypeScriptとAMDの経験はありません。生成されたjsファイルをバンドルするだけなので、必要なものがすべて揃っています。しかし、私はあなたが必要とするものを理解しており、75ページ(第9章)のtypescriptlang.org/Content/…で詳細を読むことができます。ところで、仕様全体を読む価値はありますが、他の言語と比較すると比較的短いです。
--allメインの.tsファイルのtscでフラグを使用できます。コンパイラご参照タグに基づいて、すべての依存関係アウトの数字とは、アプリケーション全体のための単一の出力.jsファイルを生成します:tsc --out app.js main.ts
es2015(またはesnext)を生成するように指示されている場合、importステートメントでファイル拡張子を指定することは必須です(これを行わない限り)。TypeScriptは拡張機能を追加しません。また、現時点では出力できない.mjsため、拡張子はにする必要があります.js。
Typescriptは、2種類のモジュールを区別します。内部モジュールは、コードを内部で構造化するために使用されます。コンパイル時に、参照パスを使用して内部モジュールをスコープに含める必要があります。
/// <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);
})
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();
モジュールの使用を検討していて、それを単一の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/
今は使用し/// <reference path='moo.ts'/>ませんが、定義ファイルがパッケージに含まれていない外部ライブラリの場合は使用します。
reference pathエディタで解きエラーが、それは本当にファイルをインポートする必要があることを意味していません。したがって、gulpワークフローまたはJSPMを使用している場合、それらはtsc -out1つのファイルではなく各ファイルを個別にコンパイルしようとする可能性があります。
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つのオプションがあります。まず、必要なものをもう一度選択します(1つずつ)。
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();
}
エクスポートに関する注意:同じ値を2回エクスポートすると、エラーが発生します{export valueZero = 0; {valueZero}をエクスポートします。// valueZeroはすでにエクスポートされています…}
import {AClass} from "./aLib.ts";
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
のような参照を使用"///<reference path="web.ts" />
し、VS2013プロジェクトプロパティで「app.ts」をビルドするために、「Typescript Build」->「Combine javascript output into file:」(checked)-> "app.js"
import {className} from 'filePath';
また覚えておいてください。インポートするクラス。これは.tsファイルにエクスポートする必要があります。
Visual Studioでの簡単なプロセス
.ts拡張子のファイルをソリューションウィンドウからエディターにドラッグアンドドロップすると、インライン参照コードが生成されます。
/// <reference path="../../components/someclass.ts"/>