数年前、メジャーバージョン間でAngularがどのように変更されたかを理解しようとして、TypeScriptを発見しました。 ご存知のように、このフレームワークの最初のバージョンと2番目のバージョンの間の変更は非常に大きかったので、試してみたかったのです。 すべてがTypeScriptで書かれていましたが、あなたと同じように、理由はわかりませんでした。 このJavaScriptのスーパーセットを使用する利点はどれかを見てみましょう🚀。

タイピング

ご存知のように、 JavaScriptにはタイプがないため、使用しているすべてのパラメーターと変数を制御して検証することは困難です。 変数の宣言を忘れたり、存在しない関数を呼び出したり、すべてのコードを壊す変数をパラメーターとして渡すなど、コードを間違えるのは非常に簡単です。

したがって、 TypeScriptはJavaScriptに似ていますが、typesを使用していると言えます。 これにより、コードが読みやすくなり、デバッグの悪夢になる可能性のあるエラーを回避できます。

コードがJavaScriptからTypeScriptにどのように変化するかの例を見てみましょう。

ワニ-service.js
class AlligatorsService {
  public alligators = [];

  public addAlligator(alligator) {
    if (this.isValid(alligator)) {
      alligators.push(alligator);
    }
  }

ワニ-service.ts
class AlligatorsService {
  public alligators: Alligator[] = [];

  public addAlligator(alligator: Alligator): void {
    if (this.isValid(alligator)) {
      alligators.push(alligator);
    }
  }

  private isValid(alligator: Alligator): boolean {
    return alligator.name;
  }
}

ここ、 Alligator はどこでも定義でき、ファイルにインポートできるインターフェースです。 インターフェイスは、タイプAlligatorのオブジェクトの形状を定義します。

強調表示されたコードからわかるように、パラメーターと戻り値のタイプのdescriptionを追加しました。 これにより、より多くのコンテキストが提供され、TypeScriptコンパイラがコードを変換すると、間違った場所で間違ったタイプを使用した場合にエラーが通知されます。

最新のJavaScript機能をサポート

TypeScriptのもう1つの優れた点は、コードで最後のJavaScript機能を使用できることです。 最新の機能を使用した場合、すべての最新のブラウザーがコードを理解できるわけではありません。通常、それを可能にするには、Babelなどの追加ツールを使用する必要があります。 ただし、TypeScriptを使用する場合、コンパイラーはすべてのハードワークを実行します。

TypeScriptはnpmを介してプロジェクトにインストールできるパッケージであるため、バージョンを更新し続けると、すべての新しいものが自動的に利用可能になります。

コンパイラはコードをJavaScriptに変換しているため、クライアントとサーバーの両方でTypeScriptを使用できます。 🔥

IDEサポート

最新のIDEのほとんどは、コーディング中に役立ちます。 TypeScriptは型付き言語であるため、IDEはコードヒントを提供します。

私の場合、Atomを使用していますが、TypeScript用の優れたパッケージが含まれているため、時間を大幅に節約できます。

ブラウザの互換性

ブラウザの互換性は私が最も気に入っている機能です。 IEの問題やコードとの互換性を忘れてください。コンパイラーは、コードを変換して最新のすべてのブラウザーと互換性を持たせるために魔法をかけます。 言い換えると、デフォルトでは、TypeScriptコンパイラが吐き出すコードはES5に準拠しており、最近のすべてのブラウザはJavaScriptのES5フレーバーを理解しています。

次のステップ

TypeScriptをまだ試したことがない場合は、試してみることを強くお勧めします。 JavaScript開発者として、それはあなたの仕事をより簡単にするいくつかの機能をあなたに提供します。 ひどいデバッグが少なく、ばかげたエラーが少ないと、貴重な時間を節約できます。

新しいTypeScriptプロジェクトの開始に関するガイダンスについては、新しいTypeScriptプロジェクトのセットアップに関する投稿を確認してください。

あなたがすでにTypeScript開発者であったなら、この投稿があなたが次のプロジェクトのためにそれを使い続けるべき理由を少しクリアしたかもしれないことを願っています。