web-dev-qa-db-ja.com

TypeScriptおよびjQueryなどのライブラリ（.d.tsファイル付き）

私はインターネット全体を見ましたが、jqueryなどのライブラリを取得してTypeScriptプロジェクトで使用する方法を説明する包括的なガイドをまだ見つけていません。存在するガイドがある場合、私はこれらが私が本当に知る必要があるものである他の場所を知りたいです：

  1. .d.tsファイルはインテリセンス専用であることを理解しているため、jqueryを実際に動作させるには何が必要ですか（tsにコンパイルしますか？）
  2. VS2013を使用するときにrequiresまたは//referenceが必要ですか？その場合、実際に何をしているのですか？
  3. これらの.d.tsおよびjquery jsファイルから、tsプロジェクトでライブラリ（または任意のライブラリ）を使用するために必要なもの。

私は他のほとんどすべてを理解することができましたが、これはかなりイライラしていました。

javascriptjquerytypescript
30
dlkulp

JqueryをTypeScriptにコンパイルする必要はありません。JavaScriptライブラリの動作をTypeScriptに伝える定義ファイルを使用するだけです。

ここで定義を取得します： https://github.com/DefinitelyTyped/DefinitelyTyped

またはVisual Studioを使用している場合はNuGetから。

次に、通常どおりTypeScriptを記述し、必要に応じてライブラリを宣言します。

declare var library : libraryTypedName

たとえば、jqueryのd.tsファイルは既にこれを実行しています（下を確認）。

declare module "jquery" {
    export = $;
}
declare var jQuery: JQueryStatic;
declare var $: JQueryStatic;

https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/jquery

.ts入力したファイル$これは、TypeScriptインテリセンスを提供するはずです。

これで、bundleconfig/<script>は.jsファイルで、あなたのものとjquery /その他のライブラリの両方です。 TypeScriptはコンパイル時のみです！

20
John

TypeScriptの規則では、これらの外部参照を取り込むプロジェクトにreference.tsまたはreference.d.tsファイルを使用します。

したがって、reference.tsファイルでjquery.d.tsにパスを追加します（パスはreference.tsファイルに相対的です）。

/// <reference path="../relative/path/to/jquery.d.ts"/>

その後、プロジェクトでjQuery定義を使用できるようになります。

注：reference.tsファイルは規則ですが、必要に応じて、TypeScriptファイルに<reference path="..."/>ディレクティブを実際に追加できます。

TypeScript言語仕様（PDF） 11.1.1から：

/// <reference path="…"/>という形式のコメントは、path引数で指定されたソースファイルへの依存関係を追加します。パスは、含まれているソースファイルのディレクトリを基準にして解決されます。

10
Sly_cardinal

私はVS 2015でそれを使用していますが、TypeScriptは初めてです。私のプロジェクトではjQueryとリーフレットを使用しました。私の解決策は次のとおりです。

  1. VS 2015でNuGetマネージャーからこれらすべてのライブラリをダウンロードします。 enter image description here

  2. このチュートリアルの指示に従って、ライブラリファイル（.js）をドラッグします。

https://taco.visualstudio.com/en-us/docs/get-started-first-mobile-app/

  1. これらの行を追加して、index.htmlファイルを変更します。

    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/leaflet.css" />

<script src="scripts/jquery-2.2.3.min.js"></script>
<script src="scripts/jquery.mobile-1.4.5.min.js"></script>
<script src="scripts/leaflet-0.7.3.min.js"></script>

  2. Index.tsファイルを変更します。最初にこれらの行を上に追加して、ライブラリを参照します。パスを変更する必要がある場合があります。

    enter image description here

  3. OnDeviceReady（）内に獲得したコードを追加します。そうしないと、sysmbol "$"が定義されていないなどのjavascriptランタイムエラーが発生する可能性があります。これは、デバイスがまだ準備ができていないときにコードが何らかの機能をロードしようとするためだと思います。これは私のために働いた。それがあなたにも役立つことを願っています。

        function onDeviceReady() {

    document.addEventListener('pause', onPause, false);
    document.addEventListener('resume', onResume, false);


    var parentElement = document.getElementById('deviceready');
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');
    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');

    // your code goes here

    }
7
Luo Lei

このソリューションはTypeScriptの純粋主義者向けではありません:)が、1行のソリューションが必要な場合は、次の行を.tsファイルに追加してください。

declare var $: any

そして、$ jsコードを使用しているかのように、TypeScriptコードのどこにでも。

0
Peter