型注釈とは何か
型注釈(type annotation)は、「この変数・この引数・この戻り値には、こういう型の値しか入れません」とコードの中で宣言するための書き方です。
TypeScriptでは、変数名や引数名の右側に : 型名 の形で書きます。
let age: number = 20;
const name: string = "Taro";
let isActive: boolean = true;
TypeScriptage: number と書いた瞬間、「age は number 型として扱う」という約束がコンパイラに伝わり、他の型(string など)を代入しようとするとエラーになります。
変数宣言での型注釈の基本
let / const と型注釈
変数や定数に型を付ける基本形は、とてもシンプルです。
let 変数名: 型;
let 変数名: 型 = 初期値;
const 定数名: 型 = 初期値;
TypeScriptたとえば、次のようになります。
let count: number;
count = 1;
// count = "1"; // エラー
const title: string = "TypeScript入門";
// title = "変更"; // エラー(const なので再代入不可)
TypeScriptここで重要なのは、「変数名の右に : 型名」という位置関係です。
Java や C# に慣れていると int num = 123; のように「型 → 変数名」の順で書きたくなりますが、TypeScriptでは逆なので、最初は意識して慣れるといいです。
関数の引数・戻り値への型注釈
引数の型注釈
関数の引数にも、同じように 引数名: 型 の形で書きます。
function add(a: number, b: number) {
return a + b;
}
TypeScriptこの時点で、「add は number を2つ受け取る関数」という情報が型として表現されています。add(1, 2) はOKですが、add(1, "2") のように string を渡すとコンパイルエラーになります。
戻り値の型注釈
戻り値の型は、引数リストの後ろに : 型 と書きます。
function add(a: number, b: number): number {
return a + b;
}
TypeScriptこれで、「add は number を受け取って number を返す関数」という契約がはっきりします。
もし return "結果"; のように文字列を返そうとすると、「戻り値の型が違う」とコンパイル時に怒られます。
配列やオブジェクトへの型注釈
配列の型注釈
配列には、型[] という形で「この配列は○○型の配列」と書きます。
const scores: number[] = [80, 90, 100];
const names: string[] = ["Taro", "Hanako"];
TypeScriptnumber[] は「number 型の要素だけを持つ配列」という意味です。scores.push("100"); のように文字列を入れようとするとエラーになります。
オブジェクトの型注釈(簡単な形)
オブジェクトには、「プロパティ名: 型」を並べた形で注釈できます。
const user: { id: number; name: string } = {
id: 1,
name: "Taro"
};
TypeScriptここでは、「user は id が number、name が string のオブジェクト」という型になっています。user.id = "1"; のように型の違う値を入れようとすると、コンパイル時に止めてくれます。
型注釈と型推論の関係
「全部に書かなくていい」が、書くべき場所はある
TypeScriptには「型推論」という仕組みがあり、初期値から型を自動で推測してくれます。
const num = 123; // number と推論
const fruits = ["apple"]; // string[] と推論
TypeScriptこの場合、あえて : number や : string[] と書かなくても、コンパイラは正しく理解してくれます。
ただし、
関数の引数・戻り値、
外から使われる値(APIの返り値など)、
「意図をはっきりさせたい場所」
には、あえて型注釈を書くことが多いです。
理由は、「ここはこういう型で使うつもりだ」という設計意図を、未来の自分や他の開発者に伝えられるからです。
初心者がまず押さえるべき型注釈の書き方
まとめると、最初は次の形だけしっかり押さえれば十分です。
変数・定数:
let age: number = 20;
const name: string = "Taro";
TypeScript関数の引数・戻り値:
function greet(name: string): string {
return `Hello, ${name}`;
}
TypeScript配列:
const scores: number[] = [80, 90];
TypeScriptオブジェクト(簡易形):
const user: { id: number; name: string } = { id: 1, name: "Taro" };
TypeScript「変数名や引数名の右に : 型 を書く」
「型を付けたら、その型以外は入れられない」
この2つの感覚が腹に落ちてくると、型注釈は「面倒な飾り」ではなく、「バグを事前に防ぐための宣言」に見えてきます。
