TypeScriptの型とは？型注釈・型推論・プリミティブ型を初心者向けにやさしく解説
TypeScriptを学び始めると、まず最初に「型」という概念にぶつかりますよね。
この記事では、TypeScriptの「型」とは何か、なぜ必要なのかという基本の考え方から、よく使うプリミティブ型の書き方、型推論の仕組み、anyとunknownの違いまでを整理して解説します。
この記事は次のような方におすすめです。
- TypeScriptの型という概念が何なのかよくわからない方
- 型注釈の書き方を学びたい初心者の方
- 型推論とは何か、毎回型を書く必要があるのか知りたい方
- anyを使っていいのか迷っている方
- 型エラーが出たときにどう考えればいいかわからない方
この記事を読み終えると、TypeScriptの主なプリミティブ型の種類と書き方がわかり、型推論によって型を省略できる場面の感覚もつかめます。また、anyをなぜ避けるべきかの理由も理解できるようになります。
それでは、順を追って詳しく見ていきましょう！
- 未経験で後悔したくない
【実体験】未経験からITエンジニアに転職して後悔した話｜4社経験してわかった「最初の選択ミス」 - 年収が低くて不安
4年間ずっと年収260万だったエンジニアが、転職で510万になるまでの全記録
TypeScriptで「型」を書く意味を先に押さえておこう
型の種類や書き方を覚える前に、まず「なぜ型を書くのか」を理解しておくと、その後の内容がぐっと腑に落ちやすくなります。
型がないコードで何が起きるのか
JavaScriptでは、変数にどんな値でも自由に入れられます。これは柔軟な反面、意図しない値が紛れ込んでもエラーにならないという問題があります。
// JavaScript の例
let price = 1000;
price = "千円"; // 数値のつもりだった変数に文字列が入っても動く
console.log(price * 1.1); // NaN（意図しない結果）
price * 1.1 という計算を想定して書いたコードなのに、文字列が入っていたせいで NaN（計算できない値）が返ってきます。これがコードを動かして初めてわかるのが、JavaScriptの「動的型付け」の特徴です。
バグが実行時まで気づけない、というのが一番の問題です。
TypeScriptが型でチェックしてくれること
TypeScriptでは、変数に「この変数は数値しか入れられない」というルールを設定できます。これが型注釈です。
// TypeScript の例
let price: number = 1000;
price = "千円"; // ← コンパイルエラー！ここで止まってくれる
price = "千円" の行は、コードを実行する前の時点でエラーとして検出されます。これが TypeScript の強みで、バグをコードを書いている段階で見つけられるという仕組みです。
変数名の後ろに : 型名 を付けるのが型注釈の基本構文です。この : が「この変数の型は〜です」という宣言の印だと覚えておいてください。
TypeScriptの基本プリミティブ型 — string・number・booleanから始めよう
TypeScriptにはさまざまな型がありますが、まず最初に覚えるべきなのがプリミティブ型と呼ばれる基本的な値の型です。「プリミティブ」は「原始的な・基本の」という意味で、TypeScript（JavaScriptも）における最も基礎的な値の分類です。
プリミティブ型の一覧と型注釈の基本書き方
よく使うプリミティブ型を整理するとこうなります。
| 型名 | 用途 | 例 |
|---|---|---|
string |
文字列 | "こんにちは" / "TypeScript" |
number |
数値（整数・小数どちらも） | 42 / 3.14 |
boolean |
真偽値 | true / false |
null |
意図的に「値がない」ことを示す | null |
undefined |
値がまだ代入されていないことを示す | undefined |
型注釈の書き方は、変数名の直後に : 型名 を付けるだけです。
let username: string = "田中";
let age: number = 25;
let isLoggedIn: boolean = false;
username に文字列、age に数値、isLoggedIn に真偽値しか入れられないことが型で明示されています。シンプルですが、これが TypeScript の型注釈の基本形です。
各プリミティブ型の使い方をより詳しく知りたい方はこちらもどうぞ。
null と undefined はプリミティブ型として扱われる
null と undefined も TypeScript では型として存在します。
let selectedItem: null = null; // nullしか入れられない
let inputValue: undefined = undefined; // undefinedしか入れられない
ただし、実際のコードでは null や undefined を他の型と組み合わせて使うことがほとんどです（例：string | null のように）。null や undefined まわりは初心者がつまずきやすい部分でもあるので、安全な扱い方については別記事で詳しくまとめています。
型推論 — TypeScriptが型を自動で決めてくれる仕組み
「毎回全部の変数に型を書かないといけないの？」と思った方、安心してください。TypeScript には型推論という仕組みがあって、場合によっては型を書かなくても TypeScript が自動で型を判断してくれます。
let message = "こんにちは"; // 型注釈を書いていない
このコードでも、TypeScript は "こんにちは" という文字列から「この変数は string だ」と自動で判断します。試しにこの後で message = 123; と書くと、型注釈なしでもエラーが出ます。
型推論が効く場面では、型を省略してもTypeScriptは型チェックをしてくれています。
「どこで型を書くべきか・どこは省略できるか」の判断基準は少し奥が深いので、別記事で詳しく解説しています。
関数に型を付ける — 引数と戻り値の型注釈
変数への型注釈がわかったら、型を書く場所としてもう一つ押さえておきたいのが関数です。引数（受け取る値）と戻り値（返す値）の2か所に型注釈を付けられます。
// 引数に `: 型名`、戻り値は `)` の後ろに `: 型名`
function add(a: number, b: number): number {
return a + b;
}
// 何も返さない関数には void を付ける
function greet(name: string): void {
console.log("こんにちは、" + name + "さん");
}
引数への型注釈があることで、誤った値を渡すとその時点でエラーが検出されます。greet(123) のように数値を渡そうとすれば、実行前に気づけます。
void は「この関数は何も値を返さない」という意味の型で、return を持たない関数に付けます。
any型とunknown型 — 使っていいのかを整理する
TypeScript を使い始めるとよく見かけるのが any という型です。これをどう扱えばいいか、迷う方が多いテーマなので整理します。
any型を使うとどうなるか — 型チェックが効かなくなる問題
any は「どんな型でも受け付ける」という型です。一見便利に思えますが、any を使うと TypeScript の型チェックが無効になります。
let value: any = "文字列";
value = 123; // エラーにならない
value = true; // エラーにならない
value.toFixed(2); // 実行時エラーになる可能性があるが、コンパイルエラーにならない
any の変数はどんな操作をしても TypeScript は文句を言いません。型のルールを完全に無視した状態になるため、型エラーを防ぐというTypeScriptの恩恵がなくなってしまいます。
「型エラーが出てとりあえず any にしたら直った」という経験をした方もいるかもしれませんが、それはエラーを解決したのではなく、チェックを無効にしただけという状態です。
unknown型との違い — anyより安全に「型不明」を扱う
「型がわからない値を扱いたいけど、anyは怖い」というときに使えるのが unknown です。
let input: unknown = "文字列かもしれないし、数値かもしれない";
// unknown のまま使おうとするとエラーになる
console.log(input.toUpperCase()); // エラー：型を確認してから使わないといけない
// 型を確認してから使うのが unknown の使い方
if (typeof input === "string") {
console.log(input.toUpperCase()); // OK：string だと確認してから使う
}
unknown は「型がわからない」という点では any と似ていますが、unknown の値をそのまま使おうとするとエラーになるという大きな違いがあります。typeof などで型を確認してから使う必要があるため、安全さが保たれます。
実装時は次のように考えておくと迷いにくいです。
- 「型が何でもいい」→ 基本的には避ける。型を正しく付けることを先に検討する
- 「外から来た値で型がわからない」→
anyよりunknownを選ぶ anyを使うなら、なぜ使うかを意識した上で使う
any と unknown の詳しい使い分けについては、別記事でより丁寧に解説しています。
【付録】さらに学びを深めるためのリソース
さらにTypescriptの学習を進めたい方のために、いくつかのリソースを紹介します。
これらのリソースを活用することで、TypeScriptの型システムについてより深い知識を得ることができるでしょう。
おすすめの書籍
ゼロからわかる TypeScript入門
技術評論社から出版されている「ゼロからわかる TypeScript入門」は、プログラミング初心者や本職プログラマーではない方を主な対象にした入門書です。
変数・条件分岐・ループといった基本から、クラスやインターフェース、モジュールまで段階的に学べる構成になっています。最終章ではWeb APIとJSONを使った非同期Webアプリの作成も体験できるので、「実際に動くものを作る」ところまで到達できます。
プロを目指す人のためのTypeScript入門
技術評論社の「プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで」、通称 ブルーベリー本 です。
JavaScriptの仕様とTypeScript独自の機能を両方押さえつつ、リテラル型・ユニオン型・keyof型・ジェネリクスなど、高度な型表現まで踏み込んで解説しています。TypeScriptの型システムの表現力を本格的に学べる一冊です。
オンラインで参照できる公式ドキュメント
TypeScript公式ハンドブック
https://www.typescriptlang.org/docs/
TypeScriptの公式ドキュメントです。
intersection型を含む、すべての型システムの機能について詳細な説明があります。
TypeScript Deep Dive
https://basarat.gitbook.io/typescript/
TypeScriptの深い部分まで掘り下げて解説しているオンラインブックです。
無料で読むことができ、intersection型についても詳しく説明されています。
TypeScriptの学習は終わりがありません。
新しい機能が常に追加され、より良い書き方が発見されています。
継続的に学習を続けることで、より良いTypeScriptプログラマーになれるはずです。
まとめ — TypeScriptの型システムの最初の地図
この記事で押さえたことを整理します。
型を書く意味
- TypeScript は変数に型を付けることで、コードを書く段階でバグを検出できる
: 型名が型注釈の基本構文
基本プリミティブ型
string（文字列）・number（数値）・boolean（真偽値）が最もよく使う3つnullとundefinedも型として存在する
型推論
- 初期値から TypeScript が型を自動で判断してくれる仕組み
- 型を書かなくても型チェックは効いている
関数の型注釈
- 引数と戻り値の2か所に付ける
- 何も返さない関数には
voidを付ける
any と unknown
anyは型チェックを無効にするので、なるべく避けるunknownは型が不明な値を安全に扱うための型
TypeScript の型は最初は「書くべきことが増えた」と感じるかもしれませんが、慣れてくると「コードを書く前にバグが見つかる」という安心感のほうが上回ります。
型の基本がつかめたら、次は各プリミティブ型の詳細や、実際のコードの書き方も読んでみてください。
※本記事の本文案はAIを活用して作成していますが、記載している内容およびコードは筆者が実際に調査、検証・実行し、内容の正確性を確認した上で公開しています。
