サンプルコードで身につける: 型注釈 — 変数に型を書く

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1はじめての型注釈

変数名の後ろにコロンと型名を書く、型注釈の最も基本の形です。string と注釈した変数には文字列だけが入り、同じ型なら何度でも再代入できることを確かめます。

TypeScript

let greetingText: string = "こんにちは";
console.log(greetingText);

// 同じ string 型の値なら再代入できる
greetingText = "こんばんは";
console.log(greetingText);

// greetingText = 123; // string に number は入れられないのでエラー

2数値の変数に型を付ける

number 型の注釈を付けた変数は、そのまま計算に使えます。価格と個数のように「数値であるべき値」に型を付けておくのは、実務のあらゆる計算処理の第一歩です。

TypeScript

let itemPrice: number = 480;
let itemCount: number = 3;

console.log(itemPrice);
console.log(itemCount);

// number 同士なので安心して計算できる
console.log(itemPrice * itemCount);

3間違った代入はその場でエラー

型注釈の最大の恩恵である「書いた瞬間にエラーで気づける」ことを確かめる例です。実行して初めて壊れるのではなく、コンパイル時点で違う型の代入が止められます。

TypeScript

let stockMessage: string = "在庫あり";
console.log(stockMessage);

// 同じ string なら何度でも再代入できる
stockMessage = "残りわずか";
console.log(stockMessage);

// stockMessage = 0; // 数値を入れようとした瞬間にコンパイルエラー
// 実行する前に間違いに気づけるのが型注釈の価値

4プロフィール変数の型付け

ユーザー名は string、年齢は number と、値の意味に合わせて型を選ぶ例です。複数の変数を組み合わせて文章を作る処理は、画面表示やメッセージ生成で毎日のように書きます。

TypeScript

let userName: string = "Taro";
let userAge: number = 28;

let profileText: string = userName + "さん(" + userAge + "歳)";
console.log(profileText);

// 年齢を更新しても型が合っていれば問題ない
userAge = 29;
console.log(userName + "さんは" + userAge + "歳になりました");

5売上レポートの変数

単価・販売数・合計のような業務データを、すべて型注釈付きの変数で組み立てる例です。計算結果を入れる変数にも型を書いておくと「合計は必ず数値」という前提をコードで保証できます。

TypeScript

let unitPrice: number = 480;
let soldCount: number = 120;
let salesTotal: number = unitPrice * soldCount;

let reportTitle: string = "本日の売上レポート";
let reportBody: string = "売上合計は " + salesTotal + " 円です";

console.log(reportTitle);
console.log(reportBody);