判定 TypeScriptとは何ですか?なぜJavaScriptの代わりに使用するのですか?




typescript interface 判定 (4)

TypeScript言語が何であるか記述できますか?

JavaScriptや利用可能なライブラリができないことは、それが私にそれを考慮する理由を与えることができますか?


私はもともと、Typescriptがまだホット・オフ・ザ・プレスであったときにこの答えを書きました。 5年後、これはOKの概要ですが、以下のLodewijkの答えを見てください。

1000フィートのビュー...

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

私が何を意味するのかを知るには、 Microsoftの紹介ビデオを見てください。

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

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

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

CoffeeScriptがありますが、それは本当に別の目的を果たします。 IMHO、CoffeeScriptは人間に読みやすくしてくれますが、TypeScriptはオプションの静的型付けによってツールの読みやすさを向上させています(この最近のブログ記事を少し批評してください)。 Dartもありますが、JavaScriptの代わりにそれ完全です( JavaScriptコードを生成することはできますが

一例として、ここにいくつかのTypeScriptがあります(これはTypeScriptのプレイグラウンドでプレイできます)

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の答えをご覧ください。


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

•TypeScriptはTypes - >各プロパティとメソッドのデータ型を定義する必要があります。 あなたがC#を知っているなら、Typescriptは分かりやすいです。

•TypeScriptの大きな利点は、私たちのアイデンティティです。 これは、タイプの不一致があればユニットテストが失敗することを許します。


" TypeScript Fundamentals " - Dan WahlinJohn Papaの PluralsightビデオコースはTypescriptの紹介であるTypeScript 1.8を反映するように更新されました(2016年3月25日)。

インテリセンスの素晴らしい可能性の他に、 クラスインターフェイスモジュール 、AMDの実装が容易で、IEで起動したときにVisual Studio Typescriptデバッガを使用することができます。

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


受け入れられた答えは問題ありませんが、私は実際にこの時点でTypeScriptの正義をしていないと感じました。 もはや早い時期ではありません。 TypeScriptは、TypeScriptで書かれているいくつかの一般的なフレームワークで、今より多くの採用を見出しています。 JavaScriptの代わりにTypeScriptを選択すべき理由は今やたくさんあります。

JavaScriptとの関係

TypeScriptは現代のJavaScript +型です。 JavaScriptコミュニティを活用しながら、早い段階でバグを捕まえ、より効率的な開発者にすることです。

JavaScriptは、ECMAScript標準によって標準化されています。 古いブラウザーは、新しいECMAScript標準のすべての機能をサポートしていません(このtable参照)。 TypeScriptは新しいECMAScript標準をサポートし、あなたの選択した(古い)ECMAScriptターゲットにコンパイルします(現在のターゲットは3,5,6 [aka 2015])。 つまり、ES2015以降のモジュール、ラムダ関数、クラス、スプレッド演算子、構造解除などの機能を旧式のブラウザと下位互換性を保ちながら使用できます。

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

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

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

一方で、近代的なECMAScript標準を採用し、Babelが最も一般的な古いJavaScriptバージョンにコンパイルする将来の証明ツールがあります。 一方、Coffeescript、Clojure、Dart、Elm、Haxe、ScalaJsなどのJavaScriptをターゲットとするJavaScriptとは完全に異なる言語があり、さらにホスト全体(このlist参照)があります。 これらの言語は、JavaScriptの未来がもたらす可能性があるよりも優れているかもしれませんが、将来の保証が十分に採用されていないという大きなリスクがあります。 また、経験豊かな開発者をこれらの言語のいくつかで見つけるのに苦労するかもしれませんが、見つかるものはしばしばより熱心になることがあります。 JavaScriptを使用したInteropは、実際にJavaScriptとは別のものになっているため、もう少し複雑になる可能性があります。

TypeScriptは、これらの2つの極限の間に位置し、リスクをバランスさせます。 TypeScriptは、どの標準でも危険な選択ではありません。 JavaScriptに慣れていれば、それはまったく異なる言語ではなく、優れたJavaScript相互運用性をサポートしており、近年多くの採用が見られているため、慣れ親しんだことはほとんどありません。

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

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

TypeScriptは、型推論の使い方で、型を少し簡単にし、あまり明示しません。 例: var x = "hello"は、 var x : string = "hello"と同じです。 タイプは、その使用から単純に推測されます。 明示的に型をタイプしていなくても、実行時エラーが発生するようなことからあなたを救うことはできます。

TypeScriptは、オプションでデフォルトで入力されます。 たとえば、 function divideByTwo(x) { return x / 2 }は、文字列で呼び出しても明らかにランタイムエラーが発生しますが、 あらゆる種類のパラメータでfunction divideByTwo(x) { return x / 2 } TypeScriptの有効な関数です。 あなたがJavaScriptで慣れているように。 divideByTwoの例のように、型が明示的に割り当てられておらず、型を推論できなかった場合、TypeScriptは型anyを暗黙的に割り当て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コード、WebStorm、Atom、Sublimeなど、TypeScriptの優れたサポートを持つ幅広い種類のIDEがあります。

厳密なヌルチェック

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

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

Typeがnullまたはundefined型であることを意味する型がnullableであることが判明すると、TypeScriptコンパイラは、制御フローベースの型分析によって、コードで変数を安全に使用できるかどうかを判断できます。 言い換えると、たとえばif文などで変数がチェックされていundefined if 、TypeScriptコンパイラはコードのコントロールフローのその分岐の型がnullableでなくなって安全に使用できると推論します。 ここに簡単な例があります:

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ファイルを作成することができます。 ソースマップ情報は、ChromeのDevToolsやその他のIDEのようなユーティリティをデバッグすることで、JavaScriptの行をTypeScriptで生成した行に関連付けることができます。 これにより、実行時にTypeScriptコードでブレークポイントを設定し、変数を直接検査することができます。 ソースマップの情報はうまくいきますが、これはTypeScriptよりずっと前でしたが、TypeScriptのデバッグは一般的にJavaScriptを直接使うほど大きくはありません。 たとえば、 thisキーワードを取る。 ES2015以降、 thisキーワードのクロージャに関するセマンティクスが変更されたため、実際には実行時に_thisという変数( この回答を参照)として存在する可能性があります。 これはデバッグ中にあなたを混乱させるかもしれませんが、あなたがそれについて知っていたり、JavaScriptコードを調べていれば、一般的に問題はありません。 バベルはまったく同じ種類の問題に苦しんでいることに注意する必要があります。

decoratorsに基づくインターセプトコードの生成、異なるモジュールシステム用のモジュールローディングコードの生成、 JSX解析など、TypeScriptコンパイラが実行できるその他のトリックがいくつかあります。 しかし、Typescriptコンパイラ以外のビルドツールが必要になることがあります。 たとえば、コードを圧縮する場合は、ビルドプロセスに他のツールを追加する必要があります。

WebpackWebpackGrunt 、その他のJavaScriptビルドツールで使用できるTypeScriptコンパイルプラグインがあります。 TypeScriptのドキュメントには、それらをすべてカバーするビルドツールとの統合に関するセクションがあります。 linterは、さらにビルド時間のチェックが必要な場合に利用できます。 また、Angular 2、React、Ember、SystemJs、WebPack、Gulpなどの他のテクノロジーと組み合わせて、TypeScriptを使い始めることができるたくさんの種子プロジェクトがあります。

JavaScriptの相互運用性

TypeScriptはJavaScriptと非常に密接に関連しているため、相互運用性に優れていますが、TypeScriptのJavaScriptライブラリで作業するには余分な作業が必要です。 TypeScriptコンパイラは、 _.groupByangular.copy$.fadeOutなどの関数呼び出しが実際には違法な文ではないことを理解できるように、 TypeScriptの定義が必要です。 これらの関数の定義は、 .d.tsファイルに格納されます。

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

独自の型定義であらかじめパッケージ化されているNpmモジュールは、TypeScriptコンパイラによって自動的に理解されます( documentation参照)。 他のほとんど普及していないJavaScriptライブラリのために、独自の定義を含まない誰かが既に他のnpmモジュールを通して型定義を利用できるようにしています。 これらのモジュールの接頭辞は "@ types /"で、 DefinitelyTypedというGithubリポジトリから来ています。

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

正直言って、これにはほんの少しの面倒があり、TypeScriptを選んでいない理由の1つかもしれませんが、タイプ定義をまったく取得する必要がないBabelのようなものになります。 一方、あなたが何をしているのかを知っていれば、間違った定義ファイルや不足している定義ファイルによって引き起こされるあらゆる問題を簡単に克服することができます。

JavaScriptからTypeScriptへの変換

任意の.jsファイルを.ts名前変更し、TypeScriptコンパイラを実行して、構文的に正しいJavaScriptコードを出力とすることができます(最初は構文的に正しい)。 TypeScriptコンパイラでコンパイルエラーが発生した場合でも、引き続き.jsファイルが生成されます。 --allowJsフラグをつけて.jsファイルを入力として受け付けることさえできます。 これにより、すぐにTypeScriptを使い始めることができます。 残念ながら、最初はコンパイルエラーが発生する可能性があります。 あなたが他のコンパイラに慣れ親しんでいるように、これらは表示停止エラーではないことを覚えておく必要があります。

JavaScriptプロジェクトをTypeScriptプロジェクトに変換するときに最初に取得されるコンパイルエラーは、TypeScriptの性質によって避けられません。 TypeScriptはすべてのコードの妥当性をチェックするため、使用されるすべての関数と変数について知る必要があります。 したがって、型定義をすべてのために定位置に置く必要があります。そうしないと、コンパイルエラーが発生する可能性があります。 上の章で述べたように、ほとんどのJavaScriptフレームワークには、 DefinitelyTypedインストールで簡単に入手できる.d.tsファイルがありDefinitelyTyped 。 しかし、タイプスクリプト定義が利用できないか、JavaScriptプリミティブをポリ充てんしてしまった、あいまいなライブラリを使用している可能性があります。 その場合、コンパイルエラーが消えるように、これらのビットの型定義を指定する必要があります。 .d.tsファイルを作成してtsconfig.jsonのfiles配列にfilesだけで、常にTypeScriptコンパイラによって考慮されるようになります。 そこではTypeScriptがtype anyとして知らないビットを宣言しany 。 すべてのエラーを除去したら、必要に応じて徐々にそれらの部品にタイピングを導入することができます。

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

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

採択

TypeScriptはオープンソースであり(Apache 2ライセンス、 github参照)、Microsoftの支援を受けています。 C#のリードアーキテクトのAnders Hejlsberg氏がプロジェクトの先導役を務めています。 これは非常に活発なプロジェクトです。 TypeScriptチームはここ数年で多くの新機能をリリースしており、今後も多くの素晴らしい機能が計画されています( roadmap参照)。

2017 の開発者調査では、TypeScriptが最も人気のあるJavaScriptトランスパイライザ(全体で9位)であり、最も愛されるプログラミング言語カテゴリで3位を獲得しました。







typescript