← 解説「プリミティブ型 string / number / boolean」に戻る

サンプルコードで身につける: プリミティブ型 string / number / boolean

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

13つの基本型をそろえて使う

string・number・boolean の3つを1つずつ宣言する、最も素朴な例です。商品名・価格・販売中かどうか、のように現実のデータを3つの型に対応させる感覚をつかみます。

TypeScript

let productTitle: string = "ブレンドコーヒー";
let productPrice: number = 480;
let isAvailable: boolean = true;

console.log(productTitle);
console.log(productPrice);
console.log(isAvailable);

2整数も小数も number

TypeScript の number は整数と小数を区別しない、という性質を確かめる例です。歩数のような整数も体温のような小数も同じ number 型で、そのまま混ぜて計算できます。

TypeScript

let stepCount: number = 8200;
let bodyTemperature: number = 36.5;

console.log(stepCount);
console.log(bodyTemperature);

// 整数と小数を混ぜた計算もすべて number
let walkedKm: number = stepCount * 0.0007;
console.log(walkedKm.toFixed(2) + " km");

3boolean で状態を表す

ログイン中か・未読があるか、のような「はい / いいえ」の状態を boolean で持つ例です。boolean の変数は if 文の条件にそのまま使えるので、画面の出し分けなど実務の分岐処理の中心になります。

TypeScript

let isLoggedIn: boolean = true;
let hasUnreadMail: boolean = false;

if (isLoggedIn) {
  console.log("ようこそ!");
}

if (!hasUnreadMail) {
  console.log("未読メールはありません");
}

4string のメソッドが安全に使える

型が string と分かっている変数では、toUpperCase などの文字列メソッドを補完つきで安全に呼べます。逆にメソッド名を打ち間違えるとコンパイルエラーになる、という型の恩恵を体感する例です。

TypeScript

let messageText: string = "TypeScript is fun";

console.log(messageText.toUpperCase());
console.log(messageText.toLowerCase());
console.log(messageText.length);

// メソッド名の打ち間違いはコンパイルエラーで止まる
// console.log(messageText.toUpperCaes()); // エラー

5税込価格の計算と判定

number で計算し、その結果から boolean の判定値を作る、3つの型を組み合わせた実務寄りの例です。EC サイトの価格表示のように「計算 → 判定 → 表示」と型が連携する流れを示します。

TypeScript

let priceBeforeTax: number = 1980;
let taxRate: number = 0.1;

let priceWithTax: number = Math.floor(priceBeforeTax * (1 + taxRate));
let isExpensive: boolean = priceWithTax >= 2000;

console.log("税込価格: " + priceWithTax + "円");
console.log("2000円以上か: " + isExpensive);