型アノテーションの基本：変数に型を定義しよう【TypeScript講座２】

こんにちは！
TypeScriptを使い始めると、最初に触れるのが型アノテーションです。これは、変数や関数に「どんなデータが入るのか」を明確に指定する方法です。型を指定することで、エラーを事前に防ぎ、より安全なコードを書くことができます。本記事では、型アノテーションの基本とその使い方を初心者向けに解説します。

型アノテーションとは？

型アノテーションとは、「この変数にはこういう型のデータしか入れられないよ」と宣言するものです。これにより、型に合わないデータを扱おうとした場合にエラーを出してくれます。

例えば、JavaScriptでは次のようなコードが問題なく動きます：

let message = "Hello, world!";
message = 123; // 動くが意図しない動作をする可能性あり

しかし、TypeScriptで型アノテーションを使うと、次のように書きます：

let message: string = "Hello, world!";
// message = 123; // エラー！型 'number' は型 'string' に割り当てられません

このように、TypeScriptでは型を明確に指定することで、意図しないデータ操作を防ぐことができます。

基本的な型アノテーションの使い方

変数に型を指定する

型アノテーションは変数の後ろに「: 型」と書きます。

let age: number = 25; // 数字のみを許可
let username: string = "Alice"; // 文字列のみを許可
let isStudent: boolean = true; // 真偽値のみを許可

number: 数値
string: 文字列
boolean: 真偽値

初期値から型を推論させる

TypeScriptでは、初期値がある場合、その値から自動で型を推論します。

let score = 90; // 型 'number' と推論
// score = "high"; // エラー！

型アノテーションを省略しても、初期値に基づいて型が設定されるため、基本的な用途では便利です。

複数の型を許可する

一つの変数に複数の型を許可したい場合、ユニオン型を使います。|で区切ることで、複数の型を指定できます。

let id: number | string = 123; // 数字または文字列
id = "abc"; // OK
// id = true; // エラー！

型アノテーションがサポートする主な型

プリミティブ型

TypeScriptでは、以下のプリミティブ型を指定することができます：

number：数値型（整数や浮動小数点数など）
string：文字列型
boolean：真偽値（true または false）
null：null型
undefined：undefined型

配列

配列には、各要素の型を指定できます。例えば、数値のみを含む配列や文字列のみを含む配列を定義する場合、次のように記述します：

let numbers: number[] = [1, 2, 3]; // 数字のみ
let names: string[] = ["Alice", "Bob"]; // 文字列のみ

また、配列に複数の型を許可する場合は、ユニオン型を使います。例えば、数値と文字列の両方を含む配列を定義するには以下のように書きます：

let mix: (number | string)[] = [1, "two", 3];

オブジェクト

オブジェクトのプロパティごとに型を定義することができます。例えば、ユーザーオブジェクトを定義する場合、次のように書きます：

let user: { name: string; age: number } = {
    name: "Alice",
    age: 25
};

プロパティを省略可能にする場合は、プロパティ名の後に?を付けます：

let user: { name: string; age?: number } = { name: "Bob" };

any型

any型は、すべての型を許可する特殊な型です。柔軟ですが、型チェックが無効になるため、使いすぎに注意が必要です。例えば、次のように記述できます：

let data: any = 42;
data = "hello"; // OK

any型を使いすぎると、型安全のメリットを失ってしまうため、慎重に使用することが重要です。

型アノテーションを使うメリット

コードの信頼性が向上する
- 型を明確に指定することで、意図しない型ミスを事前に防げます。
開発効率が上がる
- エディタが型情報をもとに補完を行い、より効率的にコードを書くことができます。
可読性が向上する
- 変数や関数の目的が明確になり、他の開発者がコードを理解しやすくなります。

型アノテーションを使いこなすためのコツ

型は厳密すぎなくてもよい
- 初めはanyを使い、徐々に適切な型に置き換えるアプローチも有効です。
型推論を活用する
- TypeScriptの型推論を活かし、冗長なアノテーションを省略するとコードが読みやすくなります。
必要に応じて型定義を分ける
- 型が複雑になる場合は、interfaceやtypeで型を別途定義すると管理が楽になります。

type User = { name: string; age?: number };
let user: User = { name: "Charlie" };

まとめ

型アノテーションは、TypeScriptの基本中の基本。これを使うだけで、コードの安全性と可読性が大幅に向上します。数値や文字列などの単純な型から始めて、配列やオブジェクトなど複雑な型にも挑戦してみてください。TypeScriptを学ぶ第一歩として、型アノテーションをしっかりマスターしましょう！

TypeScript公式ドキュメント – 型システム
TypeScriptの基本的な型についての公式ガイドです。プリミティブ型、配列、オブジェクト型などについて詳しく説明されています。もっと詳しく知りたい方は参考にしてみてください。