TypeScriptとは何ですか？そして、バニラJSの代わりに使用すべきですか？

TypeScript は、Microsoft によって構築された JavaScript のカスタムバージョンで、静的型付け、クラス、列挙型、およびインターフェースのサポートを追加します。大規模な JavaScript プロジェクトで使用することで、コードがより整理され、統合が容易になります。

TypeScriptとは何ですか？

TypeScriptは新しい言語ではありません。それはJavaScriptの構文的なスーパーセットであり、すべての有効なJSコードは有効なTypeScriptコードです。TypeScriptは、どのブラウザでも動作するプレーンJavaScriptにコンパイルされます。純粋に追加的な言語であるため、翻訳レイヤーは非常に単純で、既存のJavaScriptプロジェクトに取り入れるのが簡単です。

TypeScriptが追加する主なことは、もちろん静的型付けです。JavaScriptは本質的に動的型付けです。これは、任意の変数やオブジェクトが実行時にその型を再割り当てできることを意味します。これにより、JSは非常に柔軟で使いやすくなりますが、残念ながら大規模なプロジェクトで作業する際には混乱を引き起こすことがあります。

静的型付けを使用すると、関数やオブジェクトが受け取るパラメータを定義することを強制されるため、文字列の引数を取る関数には数値を渡すことができず、もし渡そうとするとコンパイラはエラーを出します。

例えば、この基本的な機能は

message

型が割り当てられたパラメータ

string

と一緒に

x: type

構文。これはJavaScriptのプリミティブですが、自分自身のカスタムタイプや構造体を定義することもできます。その関数自体も文字列値を返します。この関数をコード内で後で使用するときには、その上にマウスを移動させると、関数が受け取る型と返す型が表示されます。

これは不要な余分な作業のように思えるかもしれませんが、非常に整理されたコードベースにつながり、全体的な生産性を向上させることができます。静的型付けがもたらす主な利点の一つは、より豊富なIDEサポートです。なぜなら、型が静的に定義されているため、IDEは単純なエラーをはるかに簡単にチェックできるからです。

こちらが一例です。IDEにはVS Codeを使用します。なぜなら、Microsoftからの組み込みTypeScriptサポートが付いているからです。しかし、TypeScriptプラグインは多くのテキストエディタでも利用可能です。このアプリでは、2つのプロパティを受け取り、一部のテキストをレンダリングするシンプルなReactコンポーネントがあります。バニラJSでは、これは次のようになります。

TypeScriptでは、私たちは〜を渡すことができません

props

型を割り当てずに変数を使用しているため、上記のエラーが発生します。このチェックを回避するには、

props: any

これは明示的に動的型付けであることを示しますが、型を上に定義する方が良いです。

このインターフェースは必要です

props

2つのキーを持つオブジェクトで、両方が文字列に設定されている必要があります。このタイプをインラインで定義することもできますが、プロジェクト内の他の場所で参照するために、このように名前を付ける方が良いです。

このコンポーネントをアプリケーションの他の場所で使用しようとすると、コンパイラはエラーを出して、「その」と言います。

Hello

コンポーネントには、定義された2つのプロパティが欠けています。

HelloProps

もしこれがより大きく複雑なコンポーネントであったなら、プロップを正しく定義するのを見逃したり、テスト中に問題が発生したり、最終的にデバッグを1分か2分してから自分のミスに気づくことがあったかもしれません。TypeScriptを使用すると、VS Codeが事前にそのことを指摘してくれます。

さらに良いことに、タイプする際にオートコンプリート機能が利用できます。VS Codeは、タイプしているときに必要な引数を教えてくれます。

そして、大規模なプロジェクト（またはTypeScriptベースの依存関係）で作業している場合、型定義をのぞき見ることでインラインドキュメントを取得できます:

この種の機能は、手動で膨大なインラインドキュメントを書くことなく、バニラJavaScriptでは単純に存在しません。

全体として、TypeScriptはJavaScriptコードベースを整理したいコーダーチームにとって非常に便利です。JavaScriptからTypeScriptへの移行はそれほど難しくありません。すでにJavaScriptを知っているなら簡単に習得できますし、JavaやC系の他の静的型付け言語での経験がある人には好まれるでしょう。

TypeScriptを始めたい場合は、設定方法についてのガイド（既存のJavaScriptコードベースでの作業方法を含む）を読むことができます。

その他のTypeScript機能

TypeScriptは単にスタティックタイプを追加するだけでなく、バニラJSの上に多くの文法上の甘味を加えます。私たちは彼らのハンドブックを読むことをお勧めしますが、ここでもいくつかのクールな機能について話しましょう。

列挙型（Enum）または列挙子は、名前付き定数のセットを定義する方法です。例えば、上（Up）、下（Down）、左（Left）、または右（Right）です。これを使用して、特定の値のリストを許可するカスタム型を定義できます。列挙型のリテラルを以下のように参照することができます。

EnumName.constant

:

インターフェースを使用すると、型として使用できるカスタム構造を定義することができます。基本的なプリミティブ型を割り当てるだけでなく、おそらくこれらを最も頻繁に使用することになるでしょう。例えば、あなたは次のようなものを持つことができます。

User

ユーザー名、メールアドレス、IDを持つオブジェクトを定義するインターフェースを作成し、その後、ユーザーのリストを受け取り、データベースから友達を検索する関数を作成します。

これらをより伝統的なインターフェースとして使用することもでき、クラスに実装し、そのクラスのフィールドとメソッドがコードで実装されることを要求します。たとえば、ユーザーインターフェースでは次のことが要求される場合があります。

getPosts()

実装されるべき関数で、Postオブジェクトの配列を返します。これにより、クラス間の通信を標準化するのに役立ちます。

ジェネリクスを使用すると、任意の型を受け入れることができる関数を通じて型情報を渡すことができます。ジェネリクスがなければ、できることは次のような関数で、任意の型の引数を取り、その引数を持つ変数を返すことです。

any

タイプ。

function identity(arg: any): any {


 return arg;

}

これにより、渡された値は保持されますが、それに関連付けられたすべての型情報は失われます。その代わりに、通常はTという型変数を設定し、それが型データを保持します。この新しい関数は、渡された型に応じた値を返します。

function identity<T>(arg: T): T {


 return arg;

}

このidentity関数をあなたのコードで使用し、文字列と数値の両方を渡すことができますが、TypeScriptは文句を言いません。渡された引数に基づいて型を自動的に推論しますが、手動で型を設定したい場合は、型名を角括弧で渡すことで設定できます:

identity<string>()