web-dev-qa-db-ja.com

TypeScriptとは何ですか。また、JavaScriptの代わりに使用するのはなぜですか。

TypeScript言語とは何ですか。

JavaScriptや利用可能なライブラリでできないことは何ができるのでしょうか。それを検討する理由がありますか?

1513
Mohammed Thabet

私はもともとTypeScriptがまだ活気のない時代にこの答えを書きました。 5年後、これは大まかな概要ですが、詳細については Lodewijkの答え をご覧ください

1000ftビュー...

TypeScript は、主にオプションの静的型付け、クラス、およびインターフェースを提供するJavaScriptのスーパーセットです。大きな利点の1つは、コードを入力するときにIDEが一般的なエラーを見つけるためのより豊かな環境を提供できるようにすることです

私の言いたいことを理解するには、言語の Microsoftの紹介ビデオ をご覧ください。

大規模なJavaScriptプロジェクトの場合、TypeScriptを採用すると、より堅牢なソフトウェアになる可能性がありますが、通常のJavaScriptアプリケーションが実行される場所にデプロイできます。

これはオープンソースですが、サポートされているIDEを使用している場合、入力するだけで賢いIntellisenseが得られます。当初、これはMicrosoftのVisual Studioのみでした( Miguel de Icaza からのブログ投稿にも記載されています)。最近では、 他のIDEもTypeScriptサポートを提供しています

そのような他の技術はありますか?

CoffeeScript がありますが、実際には別の目的に役立ちます。私見、CoffeeScriptは人間に可読性を提供しますが、TypeScriptはオプションの静的型付けによりtoolsに深い可読性も提供します(これを参照してください 最近のブログ投稿 もう少し批評するため)。 Dart もありますが、これはJavaScriptの代替としては十分です(ただし JavaScriptコードを生成できます

例として、TypeScriptをいくつか示します(これは TypeScript Playground で再生できます)

class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}  

そして、これが生成するJavaScriptです

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

TypeScriptがメンバー変数のタイプとクラスメソッドパラメーターをどのように定義するかに注目してください。これはJavaScriptに変換するときに削除されますが、IDEおよびコンパイラが数値型をコンストラクタに渡すなどのエラーを見つけるために使用します。

また、明示的に宣言されていない型を推測することもできます。たとえば、greet()メソッドが文字列を返すと判断します。

TypeScriptのデバッグ

多くのブラウザとIDEは、ソースマップを介した直接デバッグサポートを提供します。詳細については、このスタックオーバーフローの質問を参照してください。 Visual StudioでTypeScriptコードをデバッグする

もっと知りたい?

私はもともとTypeScriptがまだ活気のない時代にこの答えを書きました。 Lodewijk's answer をチェックして、現在の詳細を確認してください。

1228
Paul Dixon

受け入れられた答えは大丈夫ですが、私はそれが本当に現時点でTypeScriptの正義をしていないと感じました。それはもう初期の日ではありません。 TypeScriptは、TypeScriptで記述されたいくつかの一般的なフレームワークとともに、さらに多くの採用を見いだしています。 JavaScriptの代わりにTypeScriptを選択する必要がある理由はたくさんあります。

JavaScriptとの関係

TypeScriptは現代のJavaScript +型です。それは、JavaScriptコミュニティを活用しながら、バグを早期に発見してより効率的な開発者にすることです。

JavaScriptはECMAScript標準を通して標準化されています。古いブラウザは新しいECMAScript標準のすべての機能をサポートしているわけではありません(こちらの table )を参照してください)。TypeScriptは新しいECMAScript標準をサポートしています。これは、古いブラウザとの後方互換性を保ちながら、モジュール、ラムダ関数、クラス、スプレッド演算子、デストラクチャリングなど、ES2015以降の機能を使用できることを意味します。

型サポートはECMAScript標準の一部ではなく、JavaScriptのコンパイル済みの性質ではなく解釈済みの性質によるものではない可能性があります。 TypeScriptの型システムは非常に豊富で、インターフェース、列挙型、ハイブリッド型、総称型、共用体/交差型、アクセス修飾子などがあります。 TypeScriptの 公式Webサイト でこれらの機能の概要を説明しています。今日のTypeScriptの型システムは他の型付けされた言語と同等で、場合によってはもっと強力です。

他のJavaScriptターゲティング言語との関係

TypeScriptは、JavaScriptにコンパイルされる他の言語と比較して独自の哲学を持っています。 JavaScriptコードは有効なTypeScriptコードです。 TypeScriptはJavaScriptのスーパーセットです。 .jsファイルの名前を.tsファイルに変更してTypeScriptを使い始めることができます(下記の「JavaScriptの相互運用性」を参照)。 TypeScriptファイルは読み取り可能なJavaScriptにコンパイルされているので、マイグレーションバックは可能であり、コンパイルされたTypeScriptを理解することはまったく難しくありません。 TypeScriptはJavaScriptの成功を土台にしながら、その弱点を改善します。

一方では、最新のECMAScript標準を取り入れて、それを古いJavaScriptバージョンにコンパイルする将来性のある証明ツールがあります。Babelが最も普及しているものです。一方、Coffeescript、Clojure、Dart、Elm、Haxe、ScalaJ、さらにはホスト全体など、JavaScriptをターゲットとするJavaScriptとはまったく異なる言語があります(こちらの list )を参照)。 JavaScriptの将来が先導する可能性よりも優れている可能性があり、将来のために十分な採用が保証されていない可能性が高いというリスクがあります。 JavaScriptとの相互運用機能は、実際のJavaScriptからはさらに削除されているため、もう少し複雑になる可能性があります。

TypeScriptはこれら2つの両極端の中間に位置しているため、リスクのバランスがとれています。 TypeScriptはどの規格でも危険な選択ではありません。 JavaScriptはまったく異なる言語ではなく、優れたJavaScriptの相互運用性をサポートし、最近多くの採用が見られるようになったため、JavaScriptに慣れていれば慣れるのにほとんど労力はかかりません。

オプションで静的な型付けと型推論

JavaScriptは動的に型付けされています。つまり、JavaScriptは、実行時に実際にインスタンス化されるまで、変数の型がわからないということです。これはまた遅すぎることを意味します。 TypeScriptはJavaScriptに型サポートを追加します。ある変数がある型であるという誤った仮定によって引き起こされるバグは、あなたがカードを正しくプレイした場合、完全に根絶することができます(あなたがコードを入力する厳しさまたはあなたがコードを入力することはあなた次第)。

TypeScriptでは、型推論を使用することにより、入力が少し簡単になり、明示的になることも少なくなります。例えば、TypeScriptのvar x = "hello"var x : string = "hello"と同じです。型は単にその使用から推測されます。型を明示的に入力しなくても、実行時エラーが発生するようなことをしないようにするために、それらはまだ存在します。

TypeScriptはオプションでデフォルトで入力されます。例えばfunction divideByTwo(x) { return x / 2 }はTypeScriptでは有効な関数で、 any 種類のパラメータで呼び出すことができますが、文字列で呼び出すと明らかに runtime エラーになります。あなたがJavaScriptで慣れ親しんでいるように。 divideByTwoの例のように、型が明示的に割り当てられず、型が推測できない場合、TypeScriptは暗黙的に型anyを割り当てるため、これは機能します。これはdivideByTwo関数の型シグネチャが自動的にfunction divideByTwo(x : any) : anyになることを意味します。この動作を許可しないコンパイラフラグがあります:--noImplicitAny。このフラグを有効にすると、より高い安全性が得られますが、入力を増やす必要があります。

型にはコストがかかります。まず第一に学習曲線があり、そして第二に、もちろん、適切な厳密な型付けを使用してコードベースを設定するにはもう少し時間がかかります。私の経験では、これらのコストは、あなたが他の人と共有している深刻なコードベースではまったく価値があります。 Githubでのプログラミング言語とコード品質の大規模な研究 は示唆しています 「静的型付けされた言語一般は動的型よりも欠陥が少なく、同じ点で強い型付けは弱い型付けより優れています」 。

興味深いことに、これとまったく同じ論文で、TypeScriptはJavaScriptよりもエラーが少ないということがわかりました。

正の係数を持つ人々のために我々は、言語がceteris paribus、より多くの欠陥修正と関連していることを期待することができます。これらの言語には、C、C++、 JavaScript 、Objective-C、Php、およびPythonが含まれます。 Clojure、Haskell、Ruby、Scala、および TypeScript の各言語にはすべて負の係数があり、これらの言語が平均よりも欠陥が確定しないことを示しています。

強化されたIDEのサポート

TypeScriptの開発経験は、JavaScriptを大幅に上回っています。 IDEは、TypeScriptコンパイラから豊富な型情報についてリアルタイムで通知されます。これには、いくつかの大きな利点があります。たとえば、TypeScriptを使用すると、コードベース全体で名前の変更などのリファクタリングを安全に実行できます。コード補完を通して、あなたはライブラリが提供するかもしれないどんな関数でもインラインヘルプを得ることができます。それらを覚えていたり、オンラインの参考文献で調べたりする必要はもうありません。あなたがコーディングに忙しい間、コンパイルエラーは赤い波線でIDEに直接報告されます。これらすべてをまとめると、JavaScriptを使用した作業と比較して生産性が大幅に向上します。コーディングに時間がかかり、デバッグに時間がかかりません。

Visual Studio Code、WebStorm、Atom、Sublimeなど、TypeScriptを非常によくサポートする幅広いIDEがあります。

厳密なnullチェック

cannot read property 'x' of undefinedまたはundefined is not a functionの形式の実行時エラーは、JavaScriptコードのバグが原因でよく起こります。 (any型付き変数のプロパティを除いて)TypeScriptコンパイラに知られていない変数を使用することはできないので、TypeScriptは、この種のエラーが発生する可能性をすでに減らします。それでもなお、undefinedに設定されている変数を誤って利用することは可能です。ただし、TypeScriptのバージョン2.0では、null入力不可の型を使用することで、これらの種類のエラーをまとめて排除できます。これは次のように機能します。

厳密なnullチェックを有効にすると(--strictNullChecksコンパイラフラグ)、明示的にnull許容型であると宣言しない限り、TypeScriptコンパイラはundefinedを変数に割り当てることを許可しません。たとえば、let x : number = undefinedはコンパイルエラーになります。 undefinedは数値ではないので、これは型理論と完全に一致します。これを修正するためにxnumberundefinedの合計型として定義することができます:let x : number | undefined = undefined

型がNULL可能、つまりnullまたはundefinedの値になる可能性がある型であることがわかったら、TypeScriptコンパイラは制御フローに基づいて型分析を行い、コードが安全に変数を使用できるかどうかを判断できます。言い換えれば、例えばundefinedステートメントを介して変数がifであることをチェックすると、TypeScriptコンパイラはあなたのコードの制御フローのそのブランチの型がもうnullを許容できないので安全に使用できると推論します。これは簡単な例です:

let x: number | undefined;
if (x !== undefined) x += 1; // this line will compile, because x is checked.
x += 1; // this line will fail compilation, because x might be undefined.

TypeScript Anders Hejlsbergのビルド2016年の会議の共同デザイナーの間にこの機能の詳細な説明とデモンストレーションを行いました: video (44:30から56:30まで))。

編集

TypeScriptを使用するには、JavaScriptコードにコンパイルするためのビルドプロセスが必要です。プロジェクトのサイズにもよりますが、ビルドプロセスには通常数秒しかかかりません。 TypeScriptコンパイラはインクリメンタルコンパイル(--watchコンパイラフラグ)をサポートしているので、それ以降のすべての変更はより高速にコンパイルできます。

TypeScriptコンパイラは、生成された.jsファイルにソースマップ情報をインライン化したり、個別の.mapファイルを作成したりできます。ソースマップ情報は、JavaScriptの行とTypeScriptで生成された行を関連付けるために、Chrome DevToolsや他のIDEなどのデバッグユーティリティで使用できます。これにより、実行時にTypeScriptコードでブレークポイントを設定したり変数を調べたりすることができます。ソースマップ情報は非常にうまく機能し、TypeScriptよりずっと前にありましたが、TypeScriptのデバッグは一般にJavaScriptを直接使用する場合ほど優れていません。たとえばthisキーワードを取ります。 ES2015以降、クロージャーを囲むthisキーワードのセマンティクスが変更されたため、thisは実際には実行時に_thisという変数として存在する可能性があります( this answer )を参照)。それについて知っているか、またはJavaScriptコードを調べてくださいBabelも同じ種類の問題を抱えていることに注意すべきです。

TypeScriptコンパイラには、 decorators に基づくインターセプトコードの生成、さまざまなモジュールシステム用のモジュールロードコードの生成、および JSX の解析)など、他にもいくつかのトリックがあります。 TypeScriptコンパイラ以外のツールたとえば、コードを圧縮したい場合は、ビルドプロセスに他のツールを追加して圧縮する必要があります。

WebpackGulpGrunt および他のほとんどすべてのJavaScriptビルドツール)に使用可能なTypeScriptコンパイルプラグインがあります。TypeScriptのドキュメントには ビルドツールとの統合 のセクションがあります。ビルド時間のチェックをもっとしたい場合は、 linter )も利用できます。他にもたくさんのシードプロジェクトがあり、TypeScriptを他のテクノロジと組み合わせて使用​​することもできます。 Angular 2、React、Ember、SystemJ、WebPack、Gulpなど。

JavaScriptの相互運用性

TypeScriptはJavaScriptと非常に密接に関連しているため、優れた相互運用性機能を備えていますが、TypeScriptでJavaScriptライブラリを操作するには追加の作業が必要です。 TypeScript定義 は、_.groupByangular.copy$.fadeOutのような関数呼び出しが実際には不正なステートメントではないことをTypeScriptコンパイラが理解するために必要です。これらの関数の定義は.d.tsファイルに置かれます。

定義がとることができる最も簡単な形式は、識別子がいかなる方法でも使われることを可能にすることです。たとえば、 Lodash を使用する場合、単一行の定義ファイルdeclare var _ : anyを使用すると、_で必要な関数を呼び出すことができますが、もちろん間違いもあります。_.foobar()は、正当なTypeScript呼び出しです。適切な型サポートとコード補完が必要な場合は、定義ファイルをより正確にする必要があります(例として lodash definitions を参照)。

独自の型定義があらかじめパッケージされている Npmモジュール は、TypeScriptコンパイラによって自動的に認識されます( documentation )を参照してください)。これらのモジュールは "@ types /"で始まり、 DefinitelyTyped )というGithubリポジトリから来ています。

注意点が1つあります。型定義は、実行時に使用しているライブラリのバージョンと一致している必要があります。一致しない場合、TypeScriptは、コンパイル時に型が実行時と一致しないという理由だけで、関数の呼び出しまたは存在する変数の間接参照を許可しない、または関数の呼び出しまたは存在しない変数の間接参照を許可します。 。そのため、使用しているライブラリの適切なバージョン用の適切なバージョンの型定義を必ずロードしてください。

正直に言うと、これには少々手間がかかるため、TypeScriptを選択しない理由の1つかもしれませんが、代わりに型定義を取得する必要がないBabelのようなものを選択してください。その一方で、自分が何をしているのかを知っていれば、定義ファイルが誤っているか欠けていることによって引き起こされるあらゆる種類の問題を簡単に克服することができます。

JavaScriptからTypeScriptへの変換

どんな.jsファイルも.tsにリネームされ、TypeScriptコンパイラを通して実行され、構文的に出力と同じJavaScriptコードを得ることができます(そもそも構文的に正しい場合)。 TypeScriptコンパイラがコンパイルエラーを受け取った場合でも、.jsファイルが生成されます。 .jsフラグを使って--allowJsファイルを入力として受け取ることもできます。これにより、すぐにTypeScriptから始めることができます。残念ながら、コンパイルエラーは最初に発生する可能性があります。他のコンパイラで慣れ親しんでいるような、見せかけのエラーではないことを覚えておく必要があります。

JavaScriptプロジェクトをTypeScriptプロジェクトに変換するときに最初に発生するコンパイルエラーは、TypeScriptの性質上避けられません。 TypeScriptは all codeの妥当性をチェックするので、使用されるすべての関数と変数について知る必要があります。したがって、型定義はそれらすべてに対して適切に設定されている必要があります。そうしないと、コンパイルエラーが発生します。上の章で述べたように、ほとんどすべてのJavaScriptフレームワークのために DefinitelyTyped packages のインストールで簡単に入手できる.d.tsファイルがあります。ただし、TypeScript定義のない曖昧なライブラリを使ったことがあるかもしれません。その場合は、コンパイルエラーをなくすためにこれらのビットの型定義を指定する必要があります.d.tsファイルを作成してtsconfig.jsonのfiles配列に含めるだけです。 TypeScriptで認識されていない部分はType anyとして宣言されていますので、すべてのエラーを取り除いた後は、必要に応じてそれらの部分に型を追加することができます。

TypeScriptをビルドパイプラインに組み込むには、ビルドパイプラインを(再)構成する作業も必要になります。コンパイルの章で述べたように、そこにはたくさんの良いリソースがあります、そしてあなたが働きたいツールの組み合わせを使うシードプロジェクトを探すことをお勧めします。

最大のハードルは学習曲線です。最初は小さなプロジェクトで遊ぶことをお勧めします。それがどのように動作するか、どのように構築するか、どのファイルを使用するか、どのように構成するか、IDEでどのように機能するか、どのように構造化するか、どのツールを使用するかなどを調べてください。何をしているの。このブログを読んでください。例えば 72時間で600k行をTypeScriptに変換する )。ジャンプする前に、言語をよく理解していることを確認してください。

採択

TypeScriptはオープンソース(Apache 2ライセンス、 github )を参照、Microsoftの支援を受けています。 Anders Hejlsberg 、C#の主任アーキテクトはプロジェクトを率いています。これは非常に活発なプロジェクトです。TypeScriptチームがリリースしています。ここ数年の間にたくさんの新機能とたくさんのすばらしい機能がまだ来る予定です( ロードマップ )を見てください)。

2017 StackOverflow開発者アンケート TypeScriptは最も人気のあるJavaScriptトランスピーラー(全体で9位)で、最も愛されているプログラミング言語のカテゴリーで3位を獲得しました。

922

TypeScriptはCSSに対してlessやsassがすることに似たことをします。それらはそのスーパーセットです。つまり、あなたが書くすべてのJSコードは有効なTypeScriptコードです。それに加えて、あなたはそれが言語に追加する他のグッズを使うことができ、そして変換されたコードは有効なjsになるでしょう。結果のコードが欲しいJSバージョンを設定することさえできます。

現在TypeScriptはES2015のスーパーセットなので、新しいjs機能を学び始め、プロジェクトに必要な標準に変換するのに適しています。

71
lebobbi

"TypeScriptの基礎" - による複数のビデオコース - Dan WahlinJohn Papaは本当に良い、現在(2016年3月25日)、TypeScript 1.8、TypeScriptの紹介を反映するように更新されました。

私にとって本当に良い機能は、IntelliSenseのNiceの可能性に加えて、classesinterfacesmodules、AMDの実装の容易さ、そしてIEで起動するときは、Visual Studio TypeScriptデバッガを使用してください。

要約すると :TypeScriptを意図したとおりに使用すると、JavaScriptプログラミングの信頼性が高まり、より簡単になります。完全なSDLCよりもJavaScriptプログラマーの生産性を大幅に向上させることができます。

36

すべてのブラウザがサポートし、プリコンパイルしたEcmaスクリプト5(ES5)。 ES6/ES2015とES/2016は、たくさんの変更を加えて来ました。そのため、これらの変更をポップアップ表示するには、TypeScriptについて注意が必要です。

•TypeScriptはTypes - >各プロパティとメソッドのデータ型を定義するためのものです。 C#を知っていれば、TypeScriptを理解するのは簡単です。

TypeScriptの大きな利点は、本番に入る前の早い段階でタイプ関連の問題を特定できることです。これにより、型の不一致があると単体テストが失敗する可能性があります。

11
Mayank Jain