先生と生徒の会話形式で理解しよう

生徒

「TypeScriptって、JavaScriptと何が違うんですか？」

先生

「TypeScriptは、JavaScriptに型注釈（アノテーション）という機能を追加した言語なんです。」

生徒

「型注釈ってなんですか？」

先生

「それは、変数や関数にどんな種類の値を使うか、あらかじめ決めておくルールのことです。基本から説明していきましょう！」

1. 型注釈（アノテーション）とは？

TypeScriptでは、変数や関数などに対して「どんな種類のデータを使うか」を指定することができます。これを型注釈（アノテーション）と呼びます。

たとえば、「これは数値（number）です」と決めておくことで、間違って文字列（string）などを入れようとしたときにエラーを出してくれます。

これは、プログラムが「思った通り」に動かないという失敗を防ぐのに、とても役立ちます。

2. 型注釈の基本的な書き方

TypeScriptで型注釈を使うには、変数や関数の後に「:（コロン）」をつけて、型の名前を書きます。

次の例を見てみましょう。


let age: number = 30;
let name: string = "たろう";
let isStudent: boolean = true;

上のコードでは、ageには数値（number）、nameには文字列（string）、isStudentには真偽値（boolean）という型が使われています。

3. 型注釈を使うメリット

型注釈を使うことで、次のようなメリットがあります：

間違いを早めに発見できる（例えば、数字のつもりで文字を入れていた場合など）
プログラムの意味がわかりやすくなる（どんな値を扱うのかが明確）
補完機能が使いやすくなる（エディタが型情報を元にサポートしてくれる）

これらの理由から、TypeScriptを使う人のほとんどが、型注釈を積極的に使っています。

4. よく使う基本の型

TypeScriptで使われる基本の型には、次のようなものがあります：

number：数値（例：1, 100, -50など）
string：文字列（例："こんにちは", 'TypeScript'など）
boolean：真偽値（trueまたはfalse）
null：値が空であることを示す
undefined：まだ何も代入されていない状態

これらを覚えておけば、基本的な型注釈は問題なく書けます。

5. 型が間違っていた場合のエラー例

間違った型の値を入れてしまうと、TypeScriptはエラーを出して教えてくれます。


let score: number = "高得点"; // エラー：string型はnumber型に代入できない


型 '"高得点"' を型 'number' に割り当てることはできません。

このように、事前にプログラムのミスをチェックしてくれるのが、TypeScriptの大きな強みです。

6. 関数にも型注釈をつけられる

型注釈は、関数でも使えます。引数や戻り値（結果として返す値）に型を指定しておくことで、より安全なコードになります。


function add(a: number, b: number): number {
    return a + b;
}

この関数は、「2つの数値を受け取って、その合計を返す」という意味です。もし違う型を入れようとしたら、すぐに教えてくれます。

7. 型推論との違い

TypeScriptには、型推論（かたすいろん）という便利な仕組みもあります。これは、プログラマが型を書かなくても、TypeScriptが「これは数値だな」などと自動で判断してくれる機能です。


let height = 180; // TypeScriptが自動的に「number型」と判断する

ただし、明確に型を決めたいときや、コードの意味をはっきりさせたいときは、型注釈を使うのがおすすめです。

8. 型注釈はTypeScriptの基礎

型注釈は、TypeScriptを学ぶ上で最も基本的で重要な機能です。変数や関数に型を指定することで、コードのミスを未然に防ぎ、読みやすさや安全性も大きく向上します。

まずは、number、string、booleanといった基本の型から覚えて、使い慣れていくのがおすすめです。

まとめ

TypeScriptの型注釈は、プログラムの安全性と読みやすさを高めるために欠かせない基本機能です。変数や関数に明確な型を指定しておくことで、値の種類が意図とずれている場合に早い段階でエラーを発見でき、開発中のトラブルを大幅に減らせます。特に大規模なアプリケーション開発では、型の情報がコード全体の理解を助け、チーム開発でも統一感と保守性を高める重要な役割を担います。

また、TypeScriptでは型注釈と型推論の両方が利用でき、柔軟に書き方を選べる点も魅力です。型推論に任せる部分と、明確に型を書く部分をバランスよく使うことで、短く書きながらも安全で読みやすいコードを維持できます。特に、関数の引数や戻り値には型注釈を付けておくことで、誤ったデータを扱うことを防ぎ、後から見返した際にも処理内容が理解しやすくなります。

ここまでの記事では、number・string・boolean・null・undefinedといった基本型や、関数への型注釈、誤った型の例など、初心者がまず覚えておくべき要素を体系的に解説してきました。TypeScriptを扱う上で、これらの型を理解し正しく使えるようになることは、プログラムの品質を安定させるための大きな第一歩です。実際にプロジェクトでコードを書く際には、基本型だけでなく、オブジェクト型や配列型、ユニオン型など、より応用的な型の利用も増えていきます。そのため、今回学んだ型注釈の基礎をしっかりと身につけておくことで、今後の学習や開発をスムーズに進めることができるでしょう。

サンプルプログラム


class UserProfile {
    name: string;
    age: number;
    isActive: boolean;

    constructor(name: string, age: number, isActive: boolean) {
        this.name = name;
        this.age = age;
        this.isActive = isActive;
    }

    getProfile(): string {
        return `ユーザー名: ${this.name} / 年齢: ${this.age} / アクティブ: ${this.isActive}`;
    }
}

const user = new UserProfile("たろう", 25, true);
console.log(user.getProfile());

先生と生徒の振り返り会話

生徒「先生、TypeScriptの型注釈って、結局どんな場面で役立つんですか？」

先生「開発中のミスを早めに見つけられるのが一番大きいですね。型が決まっていれば、間違った値を入れた瞬間にエラーで気づけます。」

生徒「確かに、JavaScriptだと動かしてみないと気づかないミスって多いですよね…。」

先生「そうなんです。TypeScriptの型注釈は“事前の安全確認”のようなものです。さらに、自分や他の人が後で読み返したときにも、とても理解しやすいコードになります。」

生徒「関数の引数や戻り値にも型を書くと安心っていう理由もよく分かりました！」

先生「これから複雑な型も学んでいきますが、今日覚えた“基本の型注釈”がすべての土台になりますよ。」