【TypeScript】as constとsatisfiesの組み合せが最強な3つの理由

// Before: 従来の型アノテーション
const colors: Record<string, string | number> = {
  red: '#FF0000',
  green: '#00FF00',
  blue: 255
};

// After: satisfies演算子を使用
const colors = {
  red: '#FF0000',
  green: '#00FF00',
  blue: 255
} satisfies Record<string, string | number>;

// 従来の方法
const oldColors: Record<string, string | number> = {
  red: '#FF0000',
  green: '#00FF00',
  blue: 255
};
console.log(oldColors.red.toUpperCase()); // エラー: 'string | number' 型に 'toUpperCase' プロパティが存在しません
console.log(oldColors.blue.toFixed(2)); // エラー: 'string | number' 型に 'toFixed' プロパティが存在しません

// satisfies演算子を使用
const newColors = {
  red: '#FF0000',
  green: '#00FF00',
  blue: 255
} satisfies Record<string, string | number>;
console.log(newColors.red.toUpperCase()); // OK: 'red' が文字列であることを TypeScript が認識
console.log(newColors.blue.toFixed(2)); // OK: 'blue' が数値であることを TypeScript が認識

const invalidColors = {
  red: '#FF0000',
  green: '#00FF00',
  blue: true // エラー: boolean型は許可されていません
} satisfies Record<string, string | number>;

// as constを使わない場合
const colors = {
  primary: 'blue',
  secondary: 'green'
};

// as constを使う場合
const colorsConst = {
  primary: 'blue',
  secondary: 'green'
} as const;

// as constを使わない場合
colors.primary = 'red'; // OK
let primaryColor: string = colors.primary; // OK

// as constを使う場合
colorsConst.primary = 'red'; // エラー: 読み取り専用プロパティ 'primary' に代入することはできません。
let constPrimaryColor: 'blue' = colorsConst.primary; // OK: 型は 'blue' リテラル型

const fruits = ['apple', 'banana', 'orange'] as const;
// fruitsの型は readonly ['apple', 'banana', 'orange'] になります

fruits.push('grape'); // エラー: 読み取り専用配列のプロパティ 'push' は存在しません。
let firstFruit: 'apple' = fruits[0]; // OK: 型は 'apple' リテラル型

// 通常の型定義
type ColorConfig = {
  primary: string;
  secondary: string;
  shades: string[];
  opacity: number;
};

const colors1: ColorConfig = {
  primary: '#007bff',
  secondary: '#6c757d',
  shades: ['light', 'dark'],
  opacity: 0.5
};

// as const と satisfies の組み合わせ
const colors2 = {
  primary: '#007bff',
  secondary: '#6c757d',
  shades: ['light', 'dark'],
  opacity: 0.5
} as const satisfies ColorConfig;

// 通常の型定義
const primaryColor1: string = colors1.primary; // OK
colors1.primary = '#0000ff'; // OK
colors1.shades.push('medium'); // OK

// as const と satisfies の組み合わせ
const primaryColor2: '#007bff' = colors2.primary; // OK
colors2.primary = '#0000ff'; // エラー: 読み取り専用プロパティ 'primary' に代入することはできません。
colors2.shades.push('medium'); // エラー: プロパティ 'push' は型 'readonly ["light", "dark"]' に存在しません。

const appConfig = {
  appName: "My Cool App",
  version: "1.0.0",
  maxUsers: 100,
  isProduction: false
} as const satisfies {
  appName: string,
  version: string,
  maxUsers: number,
  isProduction: boolean
};

// 使用例
console.log(appConfig.appName); // "My Cool App"
console.log(appConfig.maxUsers); // 100

// エラー例（型チェックで捕捉される）
// appConfig.appName = "New Name"; // エラー: 読み取り専用プロパティなので代入できない
// appConfig.maxUsers = "50"; // エラー: numberに文字列は代入できない

const apiUrls = {
  getUsers: "/api/users",
  createUser: "/api/users/create",
  updateUser: (id: number) => `/api/users/${id}/update`
} as const satisfies {
  getUsers: string,
  createUser: string,
  updateUser: (id: number) => string
};

// 使用例
console.log(apiUrls.getUsers); // "/api/users"
console.log(apiUrls.updateUser(5)); // "/api/users/5/update"

// エラー例
// apiUrls.getUsers = "/new/api/users"; // エラー: 読み取り専用プロパティ
// apiUrls.updateUser("5"); // エラー: 引数は number 型を期待している

const menuItems = [
  { id: 1, name: "Home", url: "/" },
  { id: 2, name: "About", url: "/about" },
  { id: 3, name: "Contact", url: "/contact" }
] as const satisfies readonly { id: number, name: string, url: string }[];

// 使用例
menuItems.forEach(item => {
  console.log(`${item.name}: ${item.url}`);
});

// 型の利用例
type MenuItem = typeof menuItems[number];
// MenuItem型は { readonly id: number, readonly name: string, readonly url: string } になる

function navigateTo(item: MenuItem) {
  console.log(`Navigating to ${item.name} at ${item.url}`);
}

navigateTo(menuItems[0]);  // "Navigating to Home at /"

const initialFormState = {
  username: "",
  email: "",
  agreeToTerms: false
} as const satisfies {
  username: string,
  email: string,
  agreeToTerms: boolean
};

type FormState = typeof initialFormState;

function updateForm(currentState: FormState, field: keyof FormState, value: any): FormState {
  return { ...currentState, [field]: value };
}

// 使用例
let formState = initialFormState;

formState = updateForm(formState, "username", "johndoe");
console.log(formState.username);  // "johndoe"

formState = updateForm(formState, "email", "john@example.com");
console.log(formState.email);  // "john@example.com"

formState = updateForm(formState, "agreeToTerms", true);
console.log(formState.agreeToTerms);  // true

// エラー例
// updateForm(formState, "invalidField", "value");  // エラー: "invalidField"はFormStateのキーではない