TypeScriptの型

概要：このチュートリアルでは、TypeScriptの型とその目的について学習します。

TypeScriptにおける型とは

TypeScriptでは、型とは、値が持つさまざまなプロパティ と関数を参照するための便利な方法です。

値とは、変数に代入できるもの、例えば、数値、文字列、配列、オブジェクト、関数などです。

例えば、次の値を見てください。

'Hello'Code language: JavaScript (javascript)

この値を見ると、文字列であることがわかります。この値は、文字列が持つプロパティとメソッドを持っています。

例えば、'Hello'という値は、文字数を返すlengthというプロパティを持っています。

console.log('Hello'.length); // 5Code language: JavaScript (javascript)

また、match()、indexOf()、toLocaleUpperCase()などの多くのメソッドも持っています。例えば、

console.log('Hello'.toLocaleUpperCase()); // HELLO Code language: JavaScript (javascript)

'Hello'という値を見て、そのプロパティとメソッドを列挙して説明するのは不便です。

値を参照するより短い方法は、型を割り当てることです。この例では、'Hello'は文字列であると言います。そうすれば、'Hello'という値に対して文字列のプロパティとメソッドを使用できることがわかります。

結論として、TypeScriptでは

• 型とは、値が持つさまざまなプロパティとメソッドを記述するラベルです。
• すべての値には型があります。

TypeScriptの型

TypeScriptは、JavaScriptから組み込み型を継承しています。TypeScriptの型は、以下のように分類されます。

• プリミティブ型
• オブジェクト型

プリミティブ型

TypeScriptのプリミティブ型を以下に示します。

オブジェクト型

オブジェクト型は、関数、配列、クラスなどです。後で、カスタムオブジェクト型の作成方法を学習します。

TypeScriptにおける型の目的

TypeScriptにおける型の目的は、主に2つあります。

• 1つ目は、TypeScriptコンパイラがコードのエラーを分析するために型を使用することです。
• 2つ目は、型によって、変数に関連付けられている値を理解できることです。

TypeScriptの型の例

次の例では、querySelector()メソッドを使用して、<h1>要素を選択します。

const heading = document.querySelector('h1');Code language: JavaScript (javascript)

TypeScriptコンパイラは、headingの型がHTMLHeadingElementであることを認識しています。

そして、headingがアクセスできるHTMLHeadingElement型のメソッドのリストを表示します。

存在しないプロパティまたはメソッドにアクセスしようとすると、TypeScriptコンパイラはエラーを表示します。例えば、

まとめ

• TypeScriptでは、すべての値は型に関連付けられています。
• 型とは、値が持つプロパティとメソッドを記述するラベルです。
• TypeScriptコンパイラは、バグやエラーを検出するために型を使用してコードを分析します。