TypeScript レッスン2
基本の型
TypeScriptで使える様々な型を覚えよう
プリミティブ型
TypeScriptの基本となる型は、JavaScriptのプリミティブ型に対応しています。
// string — 文字列
let greeting: string = "こんにちは";
let template: string = `名前は${name}です`;
// number — 数値(整数・小数どちらも)
let integer: number = 42;
let float: number = 3.14;
let hex: number = 0xff;
let binary: number = 0b1010;
// boolean — 真偽値
let isStudent: boolean = true;
let hasPermission: boolean = false;
// null と undefined
let nothing: null = null;
let notDefined: undefined = undefined;
// symbol — 一意の識別子
let id: symbol = Symbol("id");
// bigint — 大きな整数
let big: bigint = 9007199254740991n;配列とタプル
配列は同じ型の要素の並び、タプルは異なる型の要素を固定長で持てる型です。
// 配列 — 2つの書き方
let numbers: number[] = [1, 2, 3, 4, 5];
let names: Array<string> = ["太郎", "花子", "次郎"];
// 配列は同じ型のみ
// numbers.push("hello"); // Error!
// タプル — 型と長さが固定
let person: [string, number] = ["太郎", 25];
let rgb: [number, number, number] = [255, 128, 0];
// タプルの分割代入
let [name, age] = person;
// name は string、age は number
// ラベル付きタプル(可読性向上)
let user: [name: string, age: number, active: boolean] = ["花子", 30, true];
// 読み取り専用タプル
let point: readonly [number, number] = [10, 20];
// point[0] = 5; // Error: readonly配列の型を意識した操作
JavaScriptの配列操作を、型を意識しながら試してみましょう。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
1 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
enum(列挙型)
enumは、 関連する定数のグループに名前をつけられる型です。 コードの可読性を高め、マジックナンバーを排除します。
// 数値enum(デフォルトで0から連番)
enum Direction {
Up, // 0
Down, // 1
Left, // 2
Right, // 3
}
let dir: Direction = Direction.Up;
// 文字列enum
enum Color {
Red = "#ff0000",
Green = "#00ff00",
Blue = "#0000ff",
}
let color: Color = Color.Red;
// const enum(コンパイル時にインライン化される)
const enum HttpStatus {
OK = 200,
NotFound = 404,
ServerError = 500,
}
// TypeScriptでは、enum の代わりに
// as const オブジェクトを使うことも多い
const STATUS = {
Active: "active",
Inactive: "inactive",
Pending: "pending",
} as const;
type Status = typeof STATUS[keyof typeof STATUS];
// type Status = "active" | "inactive" | "pending"特殊な型: any, unknown, void, never
TypeScript独自の特殊な型があります。それぞれの役割と使い分けを理解しましょう。
// any — 型チェックを無効化(できるだけ避ける)
let anything: any = "hello";
anything = 42; // OK
anything = true; // OK
anything.toFixed(); // エラーにならない(危険!)
// unknown — 安全な any(型チェック必須)
let mystery: unknown = "hello";
// mystery.toUpperCase(); // Error: unknownには操作できない
// 型ガードで安全に使う
if (typeof mystery === "string") {
mystery.toUpperCase(); // OK: string と確認済み
}
// void — 戻り値がない関数
function logMessage(msg: string): void {
console.log(msg);
// return は不要(return; はOK)
}
// never — 絶対に値を返さない(例外やループ)
function throwError(msg: string): never {
throw new Error(msg);
}
function infiniteLoop(): never {
while (true) {
// 永遠に終わらない
}
}
// never は網羅性チェックに使える
type Shape = "circle" | "square" | "triangle";
function getArea(shape: Shape): number {
switch (shape) {
case "circle": return Math.PI * 10 * 10;
case "square": return 10 * 10;
case "triangle": return (10 * 10) / 2;
default:
const _exhaustive: never = shape;
return _exhaustive; // 全パターン網羅されていれば到達しない
}
}型ガードを体験する
TypeScriptのunknown型で必要な「型ガード」の概念を、JavaScriptで体験してみましょう。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
1 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
ユニオン型と型エイリアス
ユニオン型は「AまたはB」という複数の型を許容します。型エイリアスは型に別名をつけて再利用できます。
// ユニオン型: | で複数の型を組み合わせる
let id: string | number;
id = "abc-123"; // OK
id = 42; // OK
// id = true; // Error
// リテラル型のユニオン(特定の値だけを許可)
type Direction = "up" | "down" | "left" | "right";
let dir: Direction = "up"; // OK
// dir = "diagonal"; // Error
// 型エイリアス: type で型に名前をつける
type UserID = string | number;
type Point = { x: number; y: number };
type StringOrNull = string | null;
// 型エイリアスでオブジェクト型
type User = {
id: UserID;
name: string;
email: string;
age?: number; // オプションプロパティ
readonly createdAt: string; // 読み取り専用
};
// 交差型: & で型を合成
type Timestamped = {
createdAt: string;
updatedAt: string;
};
type Article = {
title: string;
body: string;
};
type TimestampedArticle = Article & Timestamped;
// { title, body, createdAt, updatedAt } を全て持つ
// 関数型
type Formatter = (value: number) => string;
const toYen: Formatter = (v) => "¥" + v.toLocaleString();ユニオン型的パターンを試す
ユニオン型の考え方をJavaScriptで実践してみましょう。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
1 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
まとめ
string,number,booleanがプリミティブ型の基本- 配列は
number[]、タプルは[string, number] enumで定数グループを定義anyは型チェック無効化、unknownは安全な代替voidは戻り値なし、neverは到達不能- ユニオン型
A | Bで複数の型を許容 typeで型エイリアスを定義して再利用