他のTypeScriptファイルをインポートするにはどうすればよいですか?


164

vs.netのTypeScriptプラグインを使用する場合、他のTypeScriptファイルで宣言された1つのTypeScriptファイルインポートモジュールを作成するにはどうすればよいですか?

ファイル1:

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

ファイル2:

//what goes here?

class bar extends moo.foo
{
}

回答:


202

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

1
ただし、これをコードをjsにコンパイルするとうまくいきます。「require」や外部ファイルへのリンクはありません...他の例で見ることができるものから、「import moo = module( "moo")を実行する必要がありますが、現在のスコープにはmooはありません
— Roger Johansson

2
はい、referenceコンパイル後にjsをロードするjsコードを生成しません。コンパイラ専用です。TypeScriptとAMDの経験はありません。生成されたjsファイルをバンドルするだけなので、必要なものがすべて揃っています。しかし、私はあなたが必要とするものを理解しており、75ページ(第9章)のtypescriptlang.org/Content/…で詳細を読むことができます。ところで、仕様全体を読む価値はありますが、他の言語と比較すると比較的短いです。
— Peter Porfy 2012年

3
--allメインの.tsファイルのtscでフラグを使用できます。コンパイラご参照タグに基づいて、すべての依存関係アウトの数字とは、アプリケーション全体のための単一の出力.jsファイルを生成します:tsc --out app.js main.ts
— nullの

@PeterPorfyは、T4MVCを使用して参照リンクを強く入力できる方法があります
— Mark Macneil Bikeio '29

TypeScriptがモジュールes2015(またはesnext)を生成するように指示されている場合、importステートメントでファイル拡張子を指定することは必須です(これを行わない限り)。TypeScriptは拡張機能を追加しません。また、現時点では出力できない.mjsため、拡張子はにする必要があります.js。
— Dan Dascalescu

83

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

7
今、私は完全に道に迷っています。コンパイラは.tsファイルごとに個別の.jsを生成し、どちらにも「require」コードはありません...また、「import moo = module( "moo」 ); "mooという名前が現在のスコープに存在しないというエラーが発生し、module(" moo ")パーツが強調表示される
— Roger Johansson

ここで明確にするいくつかのポイント:Visual Studioで作業していますか?私が答えで私が与えたコードを直接tscを使用してコンパイルしようとしましたか?両方のファイルを同じディレクトリに配置しましたか?
— Valentin

1
はい、コマンドラインからコンパイルします。両方のファイルが同じディレクトリにあります。
— Roger Johansson、

2
フォークしてプルリクエストを送りました。うまくいったかどうか教えてください。
— Valentin

12
完璧:)これを読んでいる他の人のために:モジュールもエクスポートする必要があります。 "export module xxx"
— Roger Johansson

20

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

私は上記のアプローチが好きで、define()への最初の呼び出しでtsc.exeが正しい依存関係を生成していることがわかりました。私にとっての問題は、2つの個別のクラスであり、それぞれが独自のファイルにあり、それぞれがエクスポートモジュールでラップされています。何とかして?
— Samuel Meacham

@SamuelMeacham、確かに、私はなぜそうでないのかわかりません。それでも問題が解決しない場合は、新しい質問をして、ここにリンクしてください。見てみます。
— ドリューノークス2014

1
これで整理できました。すべてがスムーズになりました。依存関係、相続、それのすべて:stackoverflow.com/questions/21179144/...
— サミュエル・ミーチャム

@SamuelMeachamは、このページまたはあなたが提供したリンクを参照しています。Drewからのこの回答は、スポットになっているようです...
— Alexander Mills 14

この回答はかなり古くなっています(2014)。現在の構文は、TypeScriptハンドブックの「モジュール」セクションで説明されています。
— Dan Dascalescu

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

CommonComponent.ts

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

詳しくはこちらをご覧ください:http : //www.codebelt.com/typescript/javascript-namespacing-with-typescript-internal-modules/


11

今は使用し/// <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";
— Samuel Slade

8

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


グローバルパスがサポートされていますか?
— Vladimir Venegas

:私はないんだけど@VladimirVenegas必ず正確に探しているものということですが、ここで見てくださいgithub.com/Microsoft/TypeScript/wiki/...
— のSzymon Dudziakを

Typescriptを始めたばかりの人にとっては、これが最良の答えです。完全な例については、github.com
— Jason Dreyzehner

3

のような参照を使用"///<reference path="web.ts" /> し、VS2013プロジェクトプロパティで「app.ts」をビルドするために、「Typescript Build」->「Combine javascript output into file:」(checked)-> "app.js"



-1

Visual Studioでの簡単なプロセス

.ts拡張子のファイルをソリューションウィンドウからエディターにドラッグアンドドロップすると、インライン参照コードが生成されます。

/// <reference path="../../components/someclass.ts"/>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.