TypeScript | 基礎文法:変数・基本型 – 型注釈の書き方

TypeScript
スポンサーリンク

型注釈とは何か

型注釈(type annotation)は、「この変数・この引数・この戻り値には、こういう型の値しか入れません」とコードの中で宣言するための書き方です。
TypeScriptでは、変数名や引数名の右側に : 型名 の形で書きます。

let age: number = 20;
const name: string = "Taro";
let isActive: boolean = true;
TypeScript

age: 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"];
TypeScript

number[] は「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つの感覚が腹に落ちてくると、型注釈は「面倒な飾り」ではなく、「バグを事前に防ぐための宣言」に見えてきます。

タイトルとURLをコピーしました