.d.tsなしのtypescriptから外部の非typescriptライブラリをどのように使用しますか?


100

私はこれらを.htmlファイルで定義しました:

<script type="text/javascript" src="bower_components/tree.js/tree.min.js"></script>
<script type="text/javascript" src="bower_components/q/q.js"></script>
<script type="text/javascript" src="test.js"></script>

次にtest.jsで:

 var myTree = Tree.tree({})

しかし、Typescriptは「名前 'Tree'が見つかりません」と言ってエラーになります。

また、test.jsファイル--module amdを使用import Tree = require("model/tree");してコンパイルして先頭に配置しようとしましたが、再びエラーが発生しました。Cannot find external module 'model/tree'.ただし、有効なインポートである必要があります。定義されている場所を参照してください。https//github.com/marmelab/tree .js / blob / master / src / main.js

私が使用したいすべての外部javascriptファイルに対して.d.tsファイルを書きたくないのですが、Typescriptが真剣に求めていることは何ですか?


1
あなたはする必要はありません .d.tsファイルを書き込みます。例については、stackoverflow.com
questions / 27273489 /…を

興味深いことに、それでもオブジェクトを宣言する必要があります。Typescriptは完全にjavascriptと互換性があるという印象を受けました。Typescriptの観点からは理にかなっていると思いますが、どういうわけかコードを読む必要があり、参照がうまくいかない場合はエラーになります。
Blub

回答:


124

使用したいすべての外部javascriptファイルに対して.d.tsファイルを書きたくないのですが、Typescriptが真剣に求めていることは何ですか?

いいえ。最も簡単で迅速な解決策は、変数があることを伝えることですTree。これは次のように簡単です。

declare var Tree:any; // Magic
var myTree = Tree.tree({})

TypeSafetyはTypeScriptのスライディングスケールです。この場合、あなただけと呼ばれるものがあることをコンパイラに言っているTreeあなたが管理し、という事実を超えて多くのtypesafetyのために気にしないということはありますが

もっと

私見:この行declare var Tree:any;は、他のJS検証ツールよりもはるかに単純な構文であり、コードに存在しない変数の使用を宣言するために作成する必要があります。

更新

interface ITree {
    .. further methods and properties...
}

interface ITreeFactory {
    tree(input: { [key: string]: any }): Itree
};

declare var Tree: ITreeFactory; // magic...

私がこの方法を使用したとき、それは私にとって不満でした。私はアントンが以下に示す方法を使わなければなりませんでした。あなたの走行距離は異なる場合があります!回答バサラトをありがとう。
Tiz

より優れたインテリセンスを提供するインターフェイスではなく、タイプをインターフェイスとして指定することもできます。
Akash Kava

24

「require」を自分で定義し、TypeScriptの文書化されていないamd依存機能を使用できます。

/// <amd-dependency path="model/tree" />
declare var require:(moduleId:string) => any;
var Tree = require("model/tree");

'amd-dependency'ディレクティブは、生成されたコードに引数を「定義」するためのモジュールを含めるようコンパイラーに指示し ますここのサンプルを参照してください

TypeScriptをRequireJSで使用する方法を説明した非常に優れた記事を確認することもできます。

ただし、既存のコードに適切なTypeScript定義を記述しないと、型情報が提供されないため、型の安全性チェックやツールでの高度なコード補完などを利用できません。したがって、「ツリー」は実際にはタイプ「any」になり、実際には他のTSコード内の動的JSピースになります。


webpackを使用する場合はあまり良い考えではありません。webpackでは、トランスパイル中にこのモジュールが存在する必要があります...
Akash Kava
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.