TypeScriptとは何ですか?なぜJavaScriptの代わりに使うのですか?
TypeScript言語とは何かを説明していただけますか?
また、JavaScriptや利用可能なライブラリではできない、検討する理由となるようなことができますか?
1630
3
TypeScript言語とは何かを説明していただけますか?
また、JavaScriptや利用可能なライブラリではできない、検討する理由となるようなことができますか?
1000ft view...
。 [TypeScript][1]は、主にオプションの静的型付け、クラス、インターフェースを提供するJavaScriptのスーパーセットです。大きな利点の1つは、IDEが、コードを入力する際に*よくあるエラーを発見するためのより豊かな環境を提供できるようになることです。私の言っていることを理解するには、この言語に関するMicrosoftの紹介ビデオをご覧ください。
大規模なJavaScriptプロジェクトでは、TypeScriptを採用することで、より堅牢なソフトウェアを実現できるかもしれませんが、その一方で、通常のJavaScriptアプリケーションを実行する場所に配置することも可能です。
TypeScriptはオープンソースですが、サポートされているIDEを使用している場合にのみ、入力時に賢いIntellisenseを得ることができます。当初はMicrosoftのVisual Studioだけだった(Miguel de Icazaのブログ記事にもある)。最近では、他のIDEもTypeScriptをサポートしています。
他にも似たような技術はありますか
? CoffeeScript][5]がありますが、これは本当に別の目的を持っています。IMHOでは、CoffeeScriptは人間にとっての読みやすさを提供していますが、TypeScriptはオプションの静的型付けによって、*ツール*にとっての深い読みやすさも提供しています(もう少し批評するには、この[最近のブログ記事][6]を参照してください)。Dart][7]もありますが、これはJavaScriptを完全に置き換えるものです(ただし、[JavaScriptのコードを生成することができる][8])。サンプル
。例として、ここにいくつかのTypeScriptがあります(TypeScript Playgroundでこれで遊ぶことができます)。
そして、これが生成するJavaScriptは次のとおりです。
TypeScriptがメンバー変数やクラスメソッドのパラメータの型を定義していることに注目してください。これは JavaScript に変換する際には削除されますが、IDE やコンパイラはコンストラクタに数値型を渡すなどのエラーを発見するために使用します。
また、明示的に宣言されていない型を推論することもできます。例えば、
greet()
メソッドが文字列を返すと判断することができます。Typescriptをデバッグする
。 多くのブラウザや IDE は、ソースマップを通じて直接デバッグをサポートしています。詳しくは Stack Overflow の質問を参照してください。[Debugging TypeScript code with Visual Studio][10]をご覧ください。もっと知りたいですか
? 私がこの回答を書いたのは、まだ Typescript が注目されていた頃でした。現在の詳細については、この質問に対する [Lodewijk's answer][11] をご覧ください。TypeScriptのJavaScriptとの関係
2016年のカンファレンス「build」では、TypeScriptの共同設計者であるAnders Hejlsberg氏が、この機能について詳細な説明とデモンストレーションを行いました。video(44:30から56:30まで)。
コンパイレーション
TypeScriptを使用するには、JavaScriptコードにコンパイルするためのビルドプロセスが必要です。もちろん、プロジェクトの規模にもよりますが、ビルドプロセスは通常、数秒で完了します。TypeScript コンパイラはインクリメンタルなコンパイル(
--watch
コンパイラフラグ)をサポートしており、後続のすべての変更をより高速にコンパイルすることができます。 TypeScript コンパイラは、生成される .js ファイルにソースマップ情報をインラインで記述したり、個別の .map ファイルを作成したりすることができます。ソースマップ情報は、Chrome DevToolsなどのデバッグユーティリティやその他のIDEで使用することができ、JavaScriptの行とTypeScriptで生成された行を関連付けることができます。これにより、ブレークポイントを設定したり、ランタイム中に変数を検査したりすることが、TypeScriptコード上で直接可能になります。ソースマップ情報は非常によく機能しており、TypeScriptよりもずっと前から存在していました。しかし、TypeScriptのデバッグは一般的に、JavaScriptを直接使用する場合ほど優れているわけではありません。例えば、this
キーワードを考えてみましょう。ES2015からクロージャに関するthis
キーワードのセマンティクスが変更されたため、this
は実行時に_this
という変数として実際に存在することがあります(この回答参照)。これはデバッグ中に混乱するかもしれませんが、一般的にはそれを知っていたり、JavaScriptのコードを検査していれば問題はありません。なお、Babelも全く同じような問題を抱えています。 TypeScript コンパイラには、decoratorsに基づいたインターセプトコードの生成、異なるモジュールシステムのためのモジュールローディングコードの生成、JSXの解析など、他にもいくつかのトリックがあります。しかし、TypeScript コンパイラ以外のビルドツールが必要になることもあるでしょう。たとえば、コードを圧縮したい場合は、そのための他のツールをビルドプロセスに追加する必要があります。 Webpack]13、Gulp、Gruntなど、世の中にあるほとんどの JavaScript ビルドツールで利用できる TypeScript コンパイルプラグインがあります。TypeScriptのドキュメントには、integrating with build toolsというセクションがあり、これらすべてを網羅しています。ビルド時のチェックをさらに強化したい場合は、linterも利用できます。また、Angular 2、React、Ember、SystemJS、Webpack、Gulpなどの他の技術と組み合わせてTypeScriptを使い始めるためのシードプロジェクトも数多く存在しています。JavaScriptの相互運用性
TypeScriptはJavaScriptと非常に密接に関連しているため、優れた相互運用性を備えていますが、TypeScriptでJavaScriptライブラリを扱うにはいくつかの追加作業が必要です。TypeScriptコンパイラが、
_.groupBy
やangular.copy
、$.fadeOut
などの関数呼び出しが実際には違法なステートメントではないことを理解するために、TypeScript定義が必要です。これらの関数の定義は.d.ts
ファイルに記述されます。 定義の最も単純な形は、識別子をどのようにでも使用できるようにすることです。例えば、Lodashを使用する場合、1行の定義ファイルdeclare var _ : any
を作成すると、_
に対して好きな関数を呼び出すことができますが、もちろん、間違いを犯すこともあります。_.foobar()`は、TypeScriptの呼び出しとしては合法ですが、実行時にはもちろん違法な呼び出しとなります。型サポートやコード補完を適切に行いたい場合は、定義ファイルをより正確にする必要があります(例としてlodash definitionsを参照)。 独自の型定義があらかじめパッケージされている Npm modules は、TypeScript コンパイラによって自動的に理解されます(documentation 参照)。独自の型定義を含んでいない他のほとんどの半人気のJavaScriptライブラリについては、誰かが別のnpmモジュールを通じて型定義をすでに利用可能にしています。これらのモジュールは「@types/」というプレフィックスを持ち、DefinitelyTypedというGithubリポジトリから提供されています。 注意点が1つあります。型定義は、実行時に使用しているライブラリのバージョンと一致している必要があります。型定義が一致していないと、コンパイル時に型がランタイムと一致していないという理由だけで、TypeScriptは存在する関数の呼び出しや変数の参照解除を許可しなかったり、存在しない関数の呼び出しや変数の参照解除を許可したりすることがあります。ですから、使用しているライブラリの正しいバージョンの型定義を読み込むようにしてください。 正直なところ、これには若干の手間があり、TypeScriptを選択せずに、型定義を取得する必要のないBabelのようなものを選択する理由の1つになるかもしれません。一方で、自分が何をしているのかを理解していれば、間違った定義ファイルや欠落した定義ファイルに起因するあらゆる問題を簡単に解決することができます。JavaScriptからTypeScriptへの変換
.js
ファイルは、
.tsファイルにリネームして、TypeScriptコンパイラに通すことで、構文的に同じJavaScriptコードを出力することができます(そもそも構文的に正しければの話ですが...)。TypeScriptコンパイラがコンパイルエラーを起こした場合でも、
.jsファイルを生成します。また、
--allowJsフラグを指定すれば、
.jsファイルを入力として受け取ることもできます。これにより、TypeScriptをすぐに使い始めることができます。残念ながら、最初のうちはコンパイルエラーが発生することがあります。しかし、これは他のコンパイラでよくあるような、目に見えないエラーではないことを覚えておく必要があります。 JavaScriptのプロジェクトをTypeScriptのプロジェクトに変換するときに最初に発生するコンパイルエラーは、TypeScriptの性質上避けられません。TypeScriptはすべてのコードの有効性をチェックするため、使用されているすべての関数や変数について知る必要があります。そのため、すべての関数や変数に対して型定義を行う必要があり、そうしないとコンパイルエラーが発生してしまいます。上の章で述べたように、ほとんどのJavaScriptフレームワークには、[DefinitelyTyped package][23]をインストールすることで簡単に入手できる
.d.tsファイルがあります。しかし、TypeScriptの定義が利用できない曖昧なライブラリを使用していたり、JavaScriptのプリミティブをポリフィルしていたりする場合もあるでしょう。そのような場合、コンパイルエラーをなくすためには、これらのビットの型定義を提供する必要があります。.d.ts
ファイルを作成して、tsconfig.jsonのfiles
配列にインクルードすることで、TypeScriptコンパイラが常に考慮するようにします。このファイルでは、TypeScriptが知らないビットをany
型として宣言します。すべてのエラーを排除したら、必要に応じてそれらの部分に徐々に型付けを導入することができます。 TypeScriptをビルドパイプラインに組み込むためには、ビルドパイプラインを(再)設定する作業も必要です。コンパイルの章で述べたように、世の中には良いリソースがたくさんあるので、自分が使いたいツールの組み合わせを使ったシードプロジェクトを探すことをお勧めします。 最大のハードルは、学習曲線です。最初は小さなプロジェクトで遊んでみることをお勧めします。どのように動作するのか、どのようにビルドするのか、どのファイルを使うのか、どのように設定するのか、IDEでどのように機能するのか、どのように構成するのか、どのツールを使うのか、などを確認してください。大規模なJavaScriptのコードベースをTypeScriptに変換することは、自分が何をしているかを知っていれば可能です。72時間で600k行をTypeScriptに変換]24の例として、このブログを読んでみてください)。ただ、ジャンプする前に言語をよく理解しておく必要があります。採用
TypeScriptはオープンソース(Apache 2ライセンス、[GitHub][25]参照)で、Microsoftが支援しています。2626がこのプロジェクトの指揮を執っています。非常に活発なプロジェクトです。TypeScriptチームはここ数年で多くの新機能をリリースしており、現在も多くの素晴らしい機能が計画されています(ロードマップ参照)。 採用と人気に関するいくつかの事実。
"TypeScript Fundamentals" -- Pluralsightのビデオコースで、Dan WahlinとJohn Papaによるものですが、現在(2016年3月25日)はTypeScript 1.8を反映して更新されており、Typescriptの入門としてはとても良い内容です。
私にとって本当に良い機能は、インテリセンスの素晴らしい可能性の他に、classes、interfaces、modules、AMDの実装のしやすさ、そしてIEで起動したときにVisual StudioのTypescriptデバッガを使用できることです。
結論から言うと。意図した通りに使用すれば、Typescript は JavaScript プログラミングをより信頼性の高い、より簡単なものにすることができます。SDLC全体を通して、JavaScriptプログラマーの生産性を大幅に向上させることができます。