TypeScript 型アノテーションの概要

概要: このチュートリアルでは、TypeScript の型アノテーションについて学習します。

TypeScriptにおける型アノテーションとは

TypeScript は型アノテーションを使用して、変数、関数、オブジェクトなどの識別子に明示的な型を指定します。

TypeScript では、識別子の後に `: type` という構文を使用して型アノテーションを記述します。ここで `type` は任意の有効な型です。

識別子に型アノテーションが付けられると、その型としてのみ使用できます。異なる型で使用しようとすると、TypeScript コンパイラがエラーを報告します。

変数と定数における型アノテーション

変数と定数に型アノテーションを指定する構文を以下に示します。

let variableName: type;
let variableName: type = value;
const constantName: type = value;Code language: JavaScript (javascript)

この構文では、型アノテーションは変数名または定数名の後にコロン（`:`）を付けて記述します。

次の例では、変数に `number` アノテーションを使用しています。

let counter: number;Code language: JavaScript (javascript)

これ以降、`counter` 変数には数値しか代入できません。

counter = 1;

`counter` 変数に文字列を代入しようとすると、エラーが発生します。

let counter: number;
counter = 'Hello'; // compile error Code language: JavaScript (javascript)

エラー

Type '"Hello"' is not assignable to type 'number'.Code language: JavaScript (javascript)

変数の型アノテーションと初期化を単一のステートメントで記述することもできます。

let counter: number = 1;Code language: JavaScript (javascript)

この例では、`counter` 変数に number アノテーションを使用し、1 に初期化しています。

プリミティブ型アノテーションの他の例を以下に示します。

let name: string = 'John';
let age: number = 25;
let active: boolean = true;Code language: JavaScript (javascript)

この例では、`name` 変数は `string` 型、`age` 変数は `number` 型、`active` 変数は `boolean` 型になります。

型アノテーションの例

配列

配列型 にアノテーションを付けるには、特定の型に続けて角括弧 `: type[]` を使用します。

let arrayName: type[];Code language: JavaScript (javascript)

例えば、以下は文字列の配列を宣言しています。

let names: string[] = ['John', 'Jane', 'Peter', 'David', 'Mary'];Code language: JavaScript (javascript)

オブジェクト

オブジェクトの型を指定するには、オブジェクト型アノテーションを使用します。例えば

let person: {
  name: string;
  age: number;
};

person = {
  name: 'John',
  age: 25,
}; // validCode language: JavaScript (javascript)

この例では、`person` オブジェクトは、`string` 型の `name` プロパティと `number` 型の `age` プロパティを持つオブジェクトのみを受け入れます。

関数引数と戻り値の型

パラメータの型アノテーションと戻り値の型アノテーションを含む関数アノテーションを以下に示します。

let greeting : (name: string) => string;Code language: JavaScript (javascript)

この例では、文字列を受け取り文字列を返す任意の関数を `greeting` 変数に代入できます。

greeting = function (name: string) {
    return `Hi ${name}`;
};Code language: JavaScript (javascript)

`greeting` 変数に代入された関数が、その 関数型 と一致しないため、次のコードはエラーになります。

greeting = function () {
    console.log('Hello');
};Code language: JavaScript (javascript)

エラー

Type '() => void' is not assignable to type '(name: string) => string'. Type 'void' is not assignable to type 'string'.Code language: JavaScript (javascript)

まとめ

• `: [type]` という構文を使用して型アノテーションを使用し、変数、関数、関数の戻り値などに型を明示的に指定します。