web-dev-qa-db-ja.com

Typescriptのタイピングとは

私はAngular2の初心者で、これまで楽しんでいますが、1つの問題があります：Typings。それらの使い方と正確な意味はわかりません。タイピングを使用すると言う場所もあれば、npmを使用して定義をインストールすると言う場所もあります。

よくわかりません！！

typescripttypescript-typings
31
Alfy

JavaScriptは型付けされていないため、制約なしでデータ、オブジェクト、関数をやり取りして使用できます。オブジェクトに存在しないメソッドを呼び出すコードを作成したり、所有していない変数を参照したりできます。この種の間違いは、コードを書いているときに発見するのが難しく、不安定でバグのあるコードにつながる可能性があります。コードの大きな変更を行うと、一部の変更が他のコードの残りの部分と競合するかどうかがすぐにわからないため、困難で危険になります。

TypeScriptの主な目的は、JavaScriptに types を追加することです。つまり、TypeScriptでは、オブジェクトとデータの形式を正確に記述する必要があります。これを行うと、コンパイラがコードを調査してエラーを発見できることを意味します。間違った種類の引数を使用して関数を呼び出すか、現在のスコープでアクセスできない変数を参照しようとしていることがわかります。

TypeScriptを自分で記述する場合、このコードの正式な記述はコード自体の一部です。

ただし、jQueryやmoment.jsなどの外部ライブラリを使用する場合、そのコードにはタイプの情報はありません。そのため、TypeScriptで使用するには、そのコードのタイプを記述したファイルも取得する必要があります。これらは型宣言ファイルであり、ほとんどの場合、ファイル拡張子名は.d.ts。幸いなことに、ほとんどの一般的なjavascriptライブラリ用にこの種の型宣言ファイルを作成している人がいます。

Typings は、これらのファイルをインストールするための単なるツールでした。 npmを使用する がベストプラクティスになりました。

これらのファイルをインストールすると、基本的にそれらをダウンロードしてプロジェクトに配置するだけで、TypeScriptコンパイラはその外部コードを理解*し、それらのライブラリを使用できるようになります。そうしないと、どこでもエラーが発生します。

*プロジェクトの設定方法と構成方法によっては、TypeScriptを構成してそれらのファイルを具体的に探す必要がある場合や、一部の構成がなくても機能する場合があります。

107
Alex

タイピングとは何ですか？

つまり、TypeScriptはJavaScriptに静​​的型付けを追加します。 JavaScriptだけではそのような型定義は定義されないため、追加のメカニズムを使用してTypeScriptコンパイルプロセスに記述して含める必要があります。言い換えれば、JavaScriptライブラリは関数を定義する場合があります。

export function createPerson(name, age, initScore) { ... }

しかし、TypeScriptの静的に型付けされた環境では、開発者が次のようなものを持つ方がはるかに便利です。

interface Person {
    name: string,
    age: number,
    score: number
}

export function createPerson(name: string, age: number, initScore?: number): Person;

型宣言の目的は、しばしばtypings、type definitionまたは単にtypesと呼ばれます実装に関するこれらの詳細を入力して、ライブラリ全体でAPIの誤用を特定します。通常、それらは.d.ts拡張子を持つファイルに存在し、コンパイラを使用して.tsファイルから構築できます。ただし、プログラムがTypeScriptで記述されていない場合、これらの宣言は通常手動で記述されます。

そうは言っても、混乱はいくぶん正当化されます。TypeScript宣言をインストールおよび管理するための複数のアプローチが時間の経過とともに行われました。ただし、現時点では、宣言ファイルをインストールして使用する公式の（したがって推奨される）手段があり、文書化されています here ：

TypeScript 2.0では、宣言ファイルを取得、使用、および検索する際に、宣言ファイルを使用することが非常に簡単になりました。このページでは、3つすべての実行方法を詳しく説明しています。

[...]

TypeScript 2.0以降で型宣言を取得するには、npm以外のツールは必要ありません。

例として、Angularの宣言を取得するのは、この依存関係をプロジェクトにインストールするのと同じくらい簡単です。

npm install --save @types/angular

@types名前空間のパッケージは、型宣言を取得するためにコンパイラによって自動的に考慮されます。さらに、これらの宣言が既にnpmパッケージに埋め込まれている場合、そのパッケージをインストールする以外に何もする必要はありません（そのようなパッケージの例は redux です）。詳細については、 tsconfig.json のドキュメントを参照してください。 独自の宣言ファイルの作成 に関するセクション全体もあります。これは、型宣言を独自のライブラリに追加することを希望するすべての開発者に推奨される読み物です。

18
E_net4

ASP.NET（クラシック）プロジェクトでTypeScriptを使用しただけなので、これを行うための一般的な方法を説明することはできません。しかし、多少正統ではないオプションがいくつかあります。

  • * .d.tsファイルを自分で見つけて、プロジェクトのどこかにコピーするだけです。ただし、ライブラリとともに自動更新されることはありません。
  • ライブラリが提供するものは何でも宣言してください。たとえば、JQueryタイピングがまだインストールされていない場合、JQueryに対してこれを行うことができます：declare var $: any;
0
libertyernie

簡単な例で説明しようと思います。 AngularまたはTypeScriptプロジェクトでjQueryのようなサードパーティライブラリを使用している場合

Angularプロジェクトでjqueryファイル（angular.jsonファイル）を直接参照し、以下に示すように$またはjQueryを宣言してコードを記述できます。

以下に示すように

declare var $: any;
ngOnInit() {
   $(document).ready(function() {
     alert('I am Called From jQuery');
   });
}

コードは機能します。しかし問題は、TypeScriptがすべて型チェックであり、コンパイル時のみにコードのエラーを発見することです。

TypeScriptはjqueryライブラリについて何も知らないため、静的型チェックを実行できません。以下のコードはエラーなしでコンパイルされます

ngOnInit() {
   $(document).ready(function() {
     $('#my-button').click(1);
 });
}

Jqueryのクリック関数に間違ったパラメーターを渡すと、上記のコードがコンパイルされ、実行時にボタン要素をクリックするとエラーがスローされます。

タイピングが登場する場所です。ただし、jqueryプラグインの型の定義がある場合、この種のエラーはコンパイル時にのみキャッチできます。

ノードパッケージからjqueryタイピングをインストールし、コードで参照する

npm install --save jquery
npm install --save @types/jquery

そして、以下に示すようにjqueryオブジェクトをコードにインポートします

import * as $ from 'jquery';

そして今、上記のコードはコンパイルされず、エラーをスローします

Argument of type ‘1’ is not assignable to parameter of type ‘false | EventHandlerBase<HTMLElement, ClickEvent<HTMLElement, null, HTMLElement, HTMLElement>>’

詳しくは JQueryをインストールして使用する方法Angular Projects

0
Arun