Blog Article
TypeScript の基本型をまとめて解説
はじめに
TypeScript を学び始めると、string や number、boolean、interface、type など、さまざまな型が登場します。最初は「種類が多くて、どれを使えばよいのか分からない」と感じやすい部分です。この記事では、TypeScript でよく使う基本的な型を、単に一覧として紹介するのではなく、「どのような値を扱うための型なのか」「どのような場面で使うのか」という観点から整理します。特に、初心者が混同しやすい object、undefined、void、unknown の違いについても確認していきます。
参考リンク
- TypeScript Handbook
- TypeScript for the New Programmer
- TypeScript Object Types
- TypeScript More on Functions
TypeScript の型とは？
TypeScript の型は、変数や関数などが「どのような値を扱うのか」を TypeScript に伝えるための仕組みです。TypeScript は JavaScript に静的な型チェックを加えた言語で、コードを実行する前に型の矛盾を検出できます。ただし、TypeScript の型情報がそのまま JavaScript の実行時に残るわけではありません。TypeScript を JavaScript に変換すると、型注釈などの型情報は取り除かれます。そのため、TypeScript の型は主に「実行前にコードの問題を見つける」「コードがどのような値を扱うのかを明確にする」ために利用されます。
静的な型チェックとは？
静的な型チェックとは、プログラムを実行する前に、型に関する問題をチェックする仕組みです。例えば、string 型の変数に number 型の値を代入しようとすると、TypeScript は問題として知らせてくれます。これによって、実行してから初めて問題に気付くのではなく、開発中の段階で間違いを発見できます。
let userName: string = "田中太郎";
userName = 123;このコードでは、userName に string 型を指定しています。そのため、後から number 型である 123 を代入すると型エラーになります。なお、TypeScript ではすべての変数に手動で型を書く必要があるわけではありません。代入された値などから型を推測する「型推論」も行われます。
TypeScript と JavaScript の違い
JavaScript は動的型付けの言語なので、同じ変数に異なる型の値を代入できます。
let price = 100;
price = "100";JavaScript ではこのようなコード自体は記述できます。一方、TypeScript では型を指定することで、意図しない値への変更を検出できます。
let price: number = 100;
price = "100";この場合、price は number 型として扱われるため、string 型の "100" を代入するとエラーになります。これが TypeScript の型チェックによって得られる代表的なメリットです。
まず覚えたい基本的な型
TypeScript には多くの型がありますが、最初からすべて覚える必要はありません。まずは、文字列を表す string、数値を表す number、真偽値を表す boolean、配列を表す配列型、そしてオブジェクトを扱うための型を理解すると、日常的な TypeScript のコードを読みやすくなります。ここでは、それぞれが「どのような値を表すのか」を中心に確認します。
string 型（文字列型）
string は文字列を表す型です。名前や住所、メールアドレスなど、文字として扱う値に使用します。
let userName: string = "田中太郎";
let message: string = "こんにちは";string 型の変数には文字列を代入できます。一方、数値を直接代入することはできません。
let userName: string = "田中太郎";
userName = 123;TypeScript では、このように異なる型の値を代入した場合にエラーとして検出できます。
number 型（数値型）
number は数値を表す型です。整数だけではなく、小数も number で表します。
let age: number = 20;
let price: number = 1980;
let rate: number = 1.5;JavaScript では 1、1.5 のような数値を区別せず、TypeScript でもどちらも number 型として扱います。金額、年齢、個数、計算結果など、数値として扱うデータに使用します。
boolean 型（真偽値型）
boolean は true または false の 2 つの値を表す型です。条件が成立しているか、ログインしているか、処理が完了しているかなど、「はい / いいえ」のような状態を表す場合に使用します。
let isLoggedIn: boolean = true;
let isAdmin: boolean = false;boolean 型では、true と false 以外の値を扱いません。状態を明確に表現できるため、条件分岐と組み合わせてよく使用されます。
Array 型（配列型）
複数の同じ種類の値をまとめて扱う場合は、配列を使用します。TypeScript では、配列の中にどのような型の値を入れられるのかも指定できます。
let scores: number[] = [80, 90, 75];
let names: string[] = ["田中", "佐藤", "鈴木"];number[] は「number 型の値を要素として持つ配列」、string[] は「string 型の値を要素として持つ配列」を意味します。
let scores: number[] = [80, 90, 75];
scores.push("100");このように、number[] に文字列を追加しようとするとエラーになります。配列の中身についても型を決められることが、TypeScript を使うメリットの一つです。
object 型（オブジェクト型）
object は、プリミティブではない値を表す型です。例えば、オブジェクトや配列、関数などが該当します。
let user: object = {
name: "田中太郎",
age: 20,
};ただし、object と指定しただけでは、「name というプロパティが存在する」「age は number 型である」といった具体的なオブジェクトの構造までは表現できません。そのため、特定のオブジェクトの形を表したい場合は、後述する interface や type、オブジェクト型を使用することが一般的です。
複数の型や特殊な値を扱う方法
基本的な型を理解したら、次は「1 つの型だけでは表現できない値」を扱う方法を覚えると、TypeScript の型システムをより実践的に使えるようになります。例えば、文字列と数値のどちらも受け取れる値や、特定の値だけを許可したい場合があります。また、「値が存在しない」ことを表す undefined や、関数から意味のある値を返さないことを表す void も重要です。
Union 型（ユニオン型）
Union 型は、複数の型のうち、いずれかを取り得ることを表します。| を使って型を組み合わせます。
let id: string | number;
id = "user-001";
id = 100;
この場合、id は string または number のどちらかを持つことができます。
Union 型は、「何でも入れられるようにする」ための仕組みではありません。あらかじめ許可する型を限定するための仕組みです。例えば、文字列または数値のどちらかしか許可しない、と明確に表現できます。
また、特定の値だけを許可することもできます。
type Status = "pending" | "success" | "error";
let status: Status = "success";この場合、status に指定できるのは "pending"、"success"、"error" のいずれかです。このように Union 型は、実際の開発でも非常によく使用します。
Tuple 型（タプル型）
Tuple 型は、配列の要素数や、それぞれの位置に入る値の型を指定したい場合に使用します。
let user: [string, number] = ["田中太郎", 20];この例では、1 番目の要素が string、2 番目の要素が number であることを表しています。通常の配列では「すべての要素が同じ型」というケースが多いですが、Tuple 型では「決まった順番で異なる型の値を持つ」という構造を表現できます。
undefined 型
undefined は、値が存在しないことを表す値です。変数やプロパティなどが undefined になるケースがあります。
let value: undefined = undefined;ただし、「まだ値を持っていない状態」とだけ覚えると少し狭すぎます。undefined は JavaScript に存在する値そのものであり、TypeScript ではその値を型としても扱えます。
例えば、オプショナルなプロパティでは、値が存在しない場合に undefined になることがあります。
void 型
void は主に、関数が意味のある値を返さないことを表すために使用します。
function logMessage(message: string): void {
console.log(message);
}この関数はメッセージを表示しますが、呼び出し元に利用するための値を返していません。そのため、戻り値の型として void を指定できます。
void と undefined は似ているように見えますが、同じものではありません。undefined は「undefined という値」を表し、void は主に「関数の戻り値を利用しない」という意図を表すために使用します。
オブジェクトの形を定義する方法
実際のアプリケーションでは、文字列や数値だけではなく、「名前は文字列、年齢は数値」といった複数のプロパティを持つオブジェクトを扱うことが多くあります。そのような場合に使用するのが interface や type です。これらを利用すると、オブジェクトがどのような構造を持つのかを型として表現できます。
interface（インターフェース）
interface は、オブジェクトが持つプロパティの名前や型など、その構造を定義するために使用できます。
interface User {
name: string;
age: number;
}
const user: User = {
name: "田中太郎",
age: 20,
};この例では、User という型に name と age が必要であることを定義しています。name は string、age は number です。
そのため、必要なプロパティが不足していたり、異なる型の値を指定したりすると、TypeScript がエラーとして検出できます。
type（型エイリアス）
type は、既存の型に名前を付けたり、複数の型を組み合わせたりするために使用できます。
type User = {
name: string;
age: number;
};
const user: User = {
name: "田中太郎",
age: 20,
};type でも interface と同じようにオブジェクトの形を表現できます。また、Union 型などにも名前を付けられます。
type Status = "pending" | "success" | "error";そのため、type は「型に名前を付けるだけ」と単純に考えるより、「既存の型や複数の型を組み合わせたものに名前を付けられる仕組み」と理解すると分かりやすくなります。
型が分からない値を安全に扱う方法
プログラムを書いていると、最初から値の具体的な型が分からないケースがあります。例えば、外部 API から取得したデータや、ユーザーから入力されたデータなどです。そのような場合に利用できるのが unknown です。
unknown（不明な方）
unknown は、値の具体的な型が分からないことを表す型です。any と似ていますが、unknown は値をそのまま利用する前に型を確認する必要があります。
let value: unknown = "hello";例えば、unknown 型の値に対して、そのまま文字列のメソッドを呼び出すことはできません。
let value: unknown = "hello";
value.toUpperCase();TypeScript は value が本当に文字列なのか分からないため、エラーにします。そこで、型を確認してから処理します。
let value: unknown = "hello";
if (typeof value === "string") {
console.log(value.toUpperCase());
}このように unknown は、「型が分からないから何でも自由に扱う」のではなく、「型が分からないからこそ、利用する前に確認する」という安全な設計につながります。
TypeScript の型をどう使い分ける？
ここまで紹介した型は、それぞれ役割が異なります。string、number、boolean は基本的な値の種類を表し、配列型は複数の値をまとめて扱います。Union 型は複数の候補を表し、interface や type は複雑なデータ構造に名前を付けます。unknown は具体的な型がまだ分からない値を安全に扱うために使用します。
初心者の段階では、すべての型を暗記するよりも、「今扱っている値を、どのように表現したいのか」を考えることが重要です。
例えば、名前なら string、年齢なら number、ログイン状態なら boolean、複数の名前なら string[]、文字列または数値なら string | number、ユーザーオブジェクトなら interface や type というように考えます。
まとめ
TypeScript の型は、単にエラーを表示するためだけの仕組みではありません。変数や関数がどのような値を扱うのかをコード上で明確にし、開発中に型の矛盾を発見しやすくする役割があります。
まずは string、number、boolean、配列などの基本的な型を理解し、その後に Union 型、Tuple 型、interface、type、unknown へと進むと整理しやすくなります。また、object、undefined、void は意味が似ているように感じやすいため、それぞれの役割を区別して覚えることが重要です。
TypeScript の型は種類を暗記することが目的ではありません。「この値は何なのか」「どのような値を許可したいのか」をコードで表現するための道具として使うことが重要です。