TypeScript入門｜JavaScriptとの違いから基本的な型まで初心者向けに徹底解説

// TypeScript の場合
function greet(name: string): string {
  return "こんにちは、" + name + "さん！";
}
 
greet(42); // エラー：Argument of type 'number' is not assignable to parameter of type 'string'
// ↑ コードを実行する前に IDE やコンパイラがエラーを教えてくれる！

// Props の型を定義
type ButtonProps = {
  label: string;
  onClick: () => void;
  disabled?: boolean; // ? をつけるとオプショナル（省略可能）
};
 
// 型安全なコンポーネント
function Button({ label, onClick, disabled = false }: ButtonProps) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
}

// JavaScript（型なし）
function add(a, b) {
  return a + b;
}
 
console.log(add(1, 2));    // 3（期待通り）
console.log(add("1", 2));  // "12"（文字列結合になってしまう！）
// ↑ 実行するまでバグに気づけない

// TypeScript（型あり）
function add(a: number, b: number): number {
  return a + b;
}
 
console.log(add(1, 2));    // 3
console.log(add("1", 2));
// ↑ エラー：Argument of type 'string' is not assignable to parameter of type 'number'
// コードを書いた瞬間に IDE がエラーを表示してくれる！

// 文字列
const name: string = "田中太郎";
 
// 数値（整数・小数どちらも number）
const age: number = 25;
const price: number = 1980.5;
 
// 真偽値
const isLoggedIn: boolean = true;
 
// null と undefined
const empty: null = null;
const notDefined: undefined = undefined;

// 配列（number の配列）
const scores: number[] = [85, 92, 78];
// または
const names: Array<string> = ["田中", "佐藤", "鈴木"];
 
// タプル（要素数と各要素の型が固定された配列）
const user: [string, number] = ["田中太郎", 25];
// user[0] は string、user[1] は number

// インラインでオブジェクトの型を書く
const user: { name: string; age: number } = {
  name: "田中太郎",
  age: 25,
};
 
// interface で型に名前をつける（再利用可能）
interface User {
  name: string;
  age: number;
  email?: string; // ? でオプショナル（あってもなくてもいい）
}
 
// type エイリアスでも同様に定義できる
type Product = {
  id: number;
  title: string;
  price: number;
};
 
const product: Product = {
  id: 1,
  title: "TypeScript入門書",
  price: 3200,
};

// any：型チェックを無効化（なるべく使わない）
let anything: any = "文字列";
anything = 42;      // エラーにならない
anything.foo.bar;   // エラーにならないが、実行時にクラッシュする恐れ
 
// unknown：型が不明（any より安全。使う前に型チェックが必要）
let value: unknown = "文字列";
if (typeof value === "string") {
  console.log(value.toUpperCase()); // 型チェック後は安全に使える
}
 
// never：絶対に到達しない型（網羅チェックなどに使用）
function throwError(message: string): never {
  throw new Error(message);
  // この関数は値を返さずに例外を投げるため never
}

// ユニオン型（|）：複数の型のどれかひとつ
type StringOrNumber = string | number;
let id: StringOrNumber = "user-001";
id = 42; // これも OK
 
// 特定の文字列値だけを許可するリテラル型
type Direction = "north" | "south" | "east" | "west";
let move: Direction = "north";
move = "up"; // エラー：'up' は Direction 型に含まれない
 
// インターセクション型（&）：複数の型をすべて満たす
type WithTimestamp = {
  createdAt: Date;
  updatedAt: Date;
};
type UserWithTimestamp = User & WithTimestamp;
// User のプロパティと WithTimestamp のプロパティを両方持つ型

// 型を明示しなくても TypeScript が推論してくれる
const message = "こんにちは"; // string と推論
const count = 0;              // number と推論
const flag = true;            // boolean と推論
 
// 配列も推論
const items = [1, 2, 3]; // number[] と推論
 
// 関数の戻り値も推論（型を書かなくてもOK）
function double(n: number) {
  return n * 2; // 戻り値は number と推論される
}

// 引数と戻り値に型をつける
function greet(name: string, age: number): string {
  return `こんにちは！${name}さん（${age}歳）`;
}
 
// アロー関数でも同様
const multiply = (a: number, b: number): number => a * b;

// ? をつけると省略可能（undefined も受け入れる）
function sendMessage(to: string, message: string, subject?: string): void {
  console.log(`To: ${to}`);
  console.log(`Subject: ${subject ?? "（件名なし）"}`);
  console.log(`Message: ${message}`);
}
 
sendMessage("田中", "お疲れさまです");           // subject は省略OK
sendMessage("佐藤", "よろしく", "ミーティングについて"); // subject あり
 
// デフォルト値を設定することもできる
function createUser(name: string, role: string = "member") {
  return { name, role };
}

// ジェネリクスなし（any を使うと型安全でなくなる）
function firstItem(arr: any[]): any {
  return arr[0];
}
 
// ジェネリクスあり（T は「型の変数」）
function firstItem<T>(arr: T[]): T {
  return arr[0];
}
 
const num = firstItem([1, 2, 3]);       // T = number と推論される
const str = firstItem(["a", "b", "c"]); // T = string と推論される
 
// 呼び出し時に型を明示することもできる
const first = firstItem<string>(["hello", "world"]);

{
  "compilerOptions": {
    "target": "ES2022",       // 出力する JavaScript のバージョン
    "module": "commonjs",     // モジュール形式
    "strict": true,           // 厳格な型チェックを有効化（推奨）
    "outDir": "./dist",       // コンパイル後のファイルの出力先
    "rootDir": "./src",       // TypeScript ソースファイルのルート
    "esModuleInterop": true,  // CommonJS モジュールの import を楽にする
    "skipLibCheck": true      // ライブラリの型定義ファイルのチェックをスキップ
  },
  "include": ["src/**/*"],   // コンパイル対象のファイル
  "exclude": ["node_modules"]
}

// src/index.ts
 
interface Todo {
  id: number;
  title: string;
  completed: boolean;
}
 
function createTodo(id: number, title: string): Todo {
  return {
    id,
    title,
    completed: false,
  };
}
 
function completeTodo(todo: Todo): Todo {
  return { ...todo, completed: true };
}
 
const todo1 = createTodo(1, "TypeScript の基本を学ぶ");
const todo2 = completeTodo(createTodo(2, "型定義を練習する"));
 
console.log(todo1); // { id: 1, title: 'TypeScript の基本を学ぶ', completed: false }
console.log(todo2); // { id: 2, title: '型定義を練習する', completed: true }

# コンパイルして実行
npx tsc
node dist/index.js

interface User {
  id: number;
  name: string;
  email: string;
  password: string;
}
 
// 更新リクエスト：どのフィールドも省略できる
type UpdateUserRequest = Partial<User>;
 
// 外部に公開するユーザー情報：パスワードを除く
type PublicUser = Omit<User, "password">;
 
// 読み取り専用のユーザー
type ReadonlyUser = Readonly<User>;
 
// id と name だけ必要な場面
type UserSummary = Pick<User, "id" | "name">;

// 安全でない例（null の場合クラッシュする）
function getLength(str: string | null): number {
  return str.length; // エラー：Object is possibly 'null'
}
 
// 安全な例①：if で確認
function getLength(str: string | null): number {
  if (str === null) return 0;
  return str.length; // ここでは string 型が保証される
}
 
// 安全な例②：オプショナルチェーン（?.）
function getLength(str: string | null | undefined): number {
  return str?.length ?? 0; // null/undefined なら 0 を返す
}