TypeScriptリファレンス：実務で即座に引ける基本構文とモダンな型定義の解説

// 基本的な型アノテーションの例
const userName: string = "TypeScript User";
const userAge: number = 30;
const isDeveloper: boolean = true;
const bigIntValue: bigint = 100n;
const emptyValue: null = null;

// 配列の定義
const scores: number[] = [90, 85, 70];
const tags: Array<string> = ["React", "Next.js", "TypeScript"];

// タプル型の定義
const userStatus: [number, string] = [1, "active"]; // [ID, ステータス名]

// 読み取り専用の配列
const readonlyNumbers: readonly number[] = [1, 2, 3];
// readonlyNumbers.push(4); // エラー：読み取り専用のため変更不可

interface User {
  id: number;
  name: string;
  email?: string; // 任意のプロパティ
  readonly createdAt: Date; // 書き換え禁止プロパティ
}

const currentUser: User = {
  id: 1,
  name: "田中太郎",
  createdAt: new Date()
};

type UserID = string | number;

type AdminUser = {
  role: "admin";
  permissions: string[];
} & User; // 交差型による拡張

function calculateTax(price: number, taxRate: number = 0.1): number {
  return price * (1 + taxRate);
}

// アロー関数の場合
const greet = (name: string): string => `Hello, ${name}!`;

type LogHandler = (message: string, level: "info" | "error") => void;

const logger: LogHandler = (msg, level) => {
  console.log(`[${level.toUpperCase()}] ${msg}`);
};

function wrapInArray<T>(value: T): T[] {
  return [value];
}

const stringArray = wrapInArray<string>("TypeScript");
const numberArray = wrapInArray<number>(100);

interface HasLength {
  length: number;
}

function logLength<T extends HasLength>(arg: T): void {
  console.log(`Length is: ${arg.length}`);
}

logLength("hello"); // OK
logLength([1, 2, 3]); // OK
// logLength(123); // エラー：numberはlengthプロパティを持たない

// Union型
type Status = "success" | "error" | "loading";

// Intersection型
interface ErrorResponse {
  error: { message: string };
}
interface DataResponse {
  data: any;
}
type ApiResponse = ErrorResponse & DataResponse;

interface Config {
  apiUrl: string;
  timeout: number;
}

type ConfigKey = keyof Config; // "apiUrl" | "timeout"

const getValue = (config: Config, key: ConfigKey) => {
  return config[key];
};

type Color = "red" | "blue";
type Intensity = "light" | "dark";

type ThemeColor = `${Intensity}-${Color}`;
// "light-red" | "light-blue" | "dark-red" | "dark-blue" と同義

const myColor: ThemeColor = "light-red";

type Palette = {
  [key: string]: string | number[];
};

const theme = {
  primary: "#ff0000",
  secondary: [0, 255, 0],
} satisfies Palette;

// satisfiesを使うことで、primaryがstringであることを推論し続けられる
console.log(theme.primary.toUpperCase());

interface Todo {
  id: number;
  title: string;
  description: string;
  completed: boolean;
}

// titleとcompletedだけを持つ型を作成
type TodoPreview = Pick<Todo, "title" | "completed">;

// descriptionを除外した型を作成
type TodoWithoutDescription = Omit<Todo, "description">;

interface UserProfile {
  name: string;
  age?: number;
}

// すべてのプロパティが任意になる
const updateProfile: Partial<UserProfile> = {
  name: "佐藤"
};

function getUser() {
  return { id: 1, name: "Alice" };
}

type UserReturn = ReturnType<typeof getUser>;
// { id: number; name: string; } 型になる

function processInput(input: string | number) {
  if (typeof input === "string") {
    // このブロック内では input は string 型として扱われる
    console.log(input.length);
  } else {
    // このブロック内では input は number 型として扱われる
    console.log(input.toFixed(2));
  }
}

interface Bird {
  fly(): void;
}
interface Fish {
  swim(): void;
}

function isBird(animal: Bird | Fish): animal is Bird {
  return (animal as Bird).fly !== undefined;
}

function move(animal: Bird | Fish) {
  if (isBird(animal)) {
    animal.fly();
  } else {
    animal.swim();
  }
}

async function fetchUserData(id: number): Promise<{ name: string }> {
  const response = await fetch(`https://api.example.com/users/${id}`);
  const data = await response.json();
  return data;
}

fetchUserData(1).then(user => {
  console.log(user.name);
});

type Shape = "circle" | "square" | "triangle";

function getArea(shape: Shape) {
  switch (shape) {
    case "circle": return 1;
    case "square": return 2;
    case "triangle": return 3;
    default:
      // もしShapeに新しい型が追加され、caseが足りない場合、ここでコンパイルエラーが発生する
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "exactOptionalPropertyTypes": true,
    "skipLibCheck": true,
    "esModuleInterop": true
  }
}