<CodeLearn/>
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の配列操作を、型を意識しながら試してみましょう。

index.htmllazy
1 lines0 issues

Monaco Editor を準備しています

表示領域に入った時点で Monaco と Shiki を初期化します。

preview.local
Live Preview
Console

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で体験してみましょう。

index.htmllazy
1 lines0 issues

Monaco Editor を準備しています

表示領域に入った時点で Monaco と Shiki を初期化します。

preview.local
Live Preview
Console

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で実践してみましょう。

index.htmllazy
1 lines0 issues

Monaco Editor を準備しています

表示領域に入った時点で Monaco と Shiki を初期化します。

preview.local
Live Preview
Console

console.log / warn / error の出力がここに表示されます。

まとめ

  • string, number, boolean がプリミティブ型の基本
  • 配列は number[]、タプルは [string, number]
  • enum で定数グループを定義
  • anyは型チェック無効化、unknownは安全な代替
  • voidは戻り値なし、neverは到達不能
  • ユニオン型 A | B で複数の型を許容
  • type で型エイリアスを定義して再利用