こんにちは、かつコーチです。
前回はJavaScriptとTypeScriptで同じコードを書き比べて、型があることの安心感を確認しました。
今回からは、実際に型注釈の書き方を1つずつ学んでいきます。
まずは一番よく使う、文字列・数値・真偽値の3つの基本型からです。
型注釈の基本的な書き方
コロンで型を指定する
TypeScriptでは、変数名の後ろに: 型名という形で型注釈を書きます。
let userName: string = "かつコーチ";
let userAge: number = 35;
let isActive: boolean = true;
変数名: 型名 = 値という並び順を覚えておけば、基本の書き方はこれだけです。
string型：文字列を扱う
基本の書き方
文字列を扱う変数にはstring型を使います。
let message: string = "こんにちは";
let username: string = 'かつコーチ';
let template: string = `${username}さん、${message}`;
シングルクォート・ダブルクォート・バッククォート（テンプレートリテラル）、どの書き方で作った文字列もstring型として扱われます。
型に合わない値を代入しようとすると
let message: string = "こんにちは";
message = 100; // エラー: Type 'number' is not assignable to type 'string'.
一度stringと宣言した変数には、後から数値を代入しようとしてもエラーになります。
「この変数はずっと文字列専用」という約束が、代入のたびにチェックされるイメージです。
number型：数値を扱う
整数も小数もnumber型
JavaScriptと同じく、TypeScriptにも整数専用・小数専用の型はなく、数値はすべてnumber型でまとめて扱います。
let age: number = 35;
let price: number = 1980;
let taxRate: number = 0.1;
let temperature: number = -5;
整数・小数・マイナスの値、どれも同じnumber型として扱われます。
計算結果の型も自動で推論される
型注釈を書いていない変数でも、TypeScriptは代入された値から自動的に型を推論します。
let quantity = 3; // 型注釈がなくても number型と推論される
let unitPrice = 500;
let total = quantity * unitPrice; // total も number型と推論される
console.log(total); // 1500
この仕組みを「型推論」と呼びます。
すべての変数にいちいち: numberと書かなくても、TypeScriptが賢く型を判断してくれるため、実務では型が明らかな場面では型注釈を省略することも多いです。
boolean型：真偽値を扱う
trueかfalseの2択
条件分岐の結果などを扱うboolean型は、trueかfalseのどちらかしか入りません。
let isLoggedIn: boolean = false;
let hasPermission: boolean = true;
let isAdult: boolean = 20 >= 18; // 比較演算子の結果も boolean型
比較演算子（>=や===など）の結果は、自動的にboolean型になります。
型注釈の省略と型推論の使い分け
いつ型注釈を書き、いつ省略するか
先ほど触れたとおり、TypeScriptには型推論があるため、すべての変数に型注釈を書く必要はありません。
一般的には、次のような使い分けがよく行われます。
| 場面 | 型注釈 |
|---|---|
| 変数を宣言と同時に初期化する | 省略してOK（型推論に任せる） |
| 変数だけ先に宣言し、後から値を入れる | 明示的に書く |
| 関数の引数 | 必ず明示的に書く（推論できないため） |
| 関数の戻り値 | 書いておくと安全（省略も可能） |
// 宣言と同時に初期化 → 型推論に任せてOK
let count = 0;
// 先に宣言だけして、後から値を入れる → 型注釈が必須
let result: string;
result = "処理完了";
let result;のように型注釈なしで宣言すると、TypeScriptはany型（どんな値でも入る、型チェックが効かない特殊な型）として扱ってしまい、せっかくの型チェックの恩恵が受けられなくなります。
先に宣言だけする変数には、忘れずに型注釈を付けておきましょう。
かつコーチが実際につまずいたポイント：数値と数値文字列の混同
フォームの入力値はすべてstring型になる
私が型注釈に慣れてきた頃に実際にハマったのが、フォームの入力値の扱いです。
HTMLのフォーム（<input>要素）から取得できる値は、見た目が数字であっても、TypeScript上は必ずstring型として扱われます。
❌ Before：入力値をそのままnumber型の変数に入れようとする
// input要素の value は常に string型
const inputValue: string = "1980";
let price: number = inputValue; // エラー: Type 'string' is not assignable to type 'number'.
見た目は数字の"1980"でも、型としてはstringなので、そのままnumber型の変数には代入できません。
私は最初、「数字っぽい文字列なんだから、いい感じに扱ってくれるだろう」と思い込んでいて、このエラーの意味がすぐには理解できませんでした。
✅ After：Numberで明示的に変換してから代入する
const inputValue: string = "1980";
const price: number = Number(inputValue); // 明示的に number型へ変換
console.log(price + 20); // 2000
Number()という関数を使い、string型からnumber型へ明示的に変換することで、型のルールを守ったまま数値として扱えるようになります。
この「型が合わないときは、意図を込めて明示的に変換する」という考え方は、TypeScriptを書くうえで何度も登場する重要な感覚です。
エラーが出たときに焦って型を無理やり合わせるのではなく、「そもそもこの値は今どんな型なのか」を確認する癖をつけると、原因にすぐたどり着けるようになります。
まとめ
この記事のポイント
変数名: 型名 = 値という形で、基本の型注釈を書く- 文字列は
string型、数値はnumber型、真偽値はboolean型で扱う - 宣言と同時に初期化する場合は、型推論に任せて型注釈を省略できる
- 先に宣言だけする変数には、
any型になるのを防ぐため型注釈を明示する - フォームの入力値など
string型のデータを数値として使うときは、Number()で明示的に変換する
次に読むべき記事
基本の型が分かったところで、次は複数の値をまとめて扱う「配列」と「タプル」の型の書き方を見ていきましょう。
→ 次の記事：配列とタプルの型の書き方