本文へスキップ
BecomeCoder

TypeScriptコース · 第1章 TypeScriptをはじめる · レッスン2

基本の型と型推論 ― number・boolean

ブラウザで完結

導入

文字列 string のほかにも、数値 number真偽値 boolean といった基本の型があります。また TypeScript は、値を見て型を自動で判断してくれる型推論も持っています。

説明

代表的な基本型は3つです。

let count: number = 10;       // 数値(整数も小数も number)
let title: string = "本";      // 文字列
let done: boolean = true;      // 真偽値(true / false)
console.log(count, title, done);

初期値を代入するときは、型注釈を省略できます。TypeScript が右辺の値から型を推論してくれるからです。

let price = 500;      // number と推論される
let label = "税込";    // string と推論される
console.log(price, label);

推論があるので、明らかな場合は型注釈を書かないことも多いです。ただし「あとで値を入れる変数」や「意図を明確にしたいところ」では型注釈を書きます。

やってみよう

price に文字列を入れる行 price = "ただ"; を足して実行し、どんなエラーになるか確かめてみましょう(price は number と推論されています)。

演習

isMember という変数に boolean 型で false を入れ、console.log() で表示してください。

ヒント1を見る

let isMember: boolean = false; と書きます。

実際に動かしてみよう

下のエディタにTypeScriptを書いて「実行」を押すと、その場でJavaScriptに変換してブラウザ内で実行し、出力が表示されます。本文の例をそのまま試したり、型注釈を書き換えたりしてみましょう(console.log の結果が下に出ます。初回だけコンパイラの読み込みに少し時間がかかります)。

TypeScript — ブラウザ内で実行

TypeScriptコンパイラ(同梱)でTS→JSに変換してから実行する学習用環境を読み込みます(初回のみコンパイラの読み込みに少し時間がかかります)。
スクロールして表示された時点でも自動で読み込まれます。