型アサーションと型ガード — as・is・as constの使い分け

// getElementById の戻り値は HTMLElement | null
const input = document.getElementById('my-input') as HTMLInputElement;
 
// HTMLInputElement として扱えるので、input 固有のプロパティが使える
console.log(input.value);

// ① DOM要素を取得する時
const input = document.getElementById('email') as HTMLInputElement;
input.value = 'test@example.com';
 
// ② 外部データ（APIのレスポンスなど）を受け取る時
type User = { id: number; name: string };
const user = JSON.parse(jsonText) as User;
console.log(user.name);
 
// ③ イベントハンドラの引数を使う時
document.querySelector('button')?.addEventListener('click', (event) => {
  const target = event.target as HTMLButtonElement;
  target.disabled = true;
});

// 型アノテーション：定義時に「この型が入る」と宣言する
// 中身が User と合っていなければ、その場でコンパイルエラーになる
const user1: User = { id: 1, name: 'Tanaka' };
 
// 型アサーション：推論結果を「この型として扱え」と上書きする
// 中身が本当に User かどうかはチェックされない
const user2 = JSON.parse(jsonText) as User;

const n = 123; // nは数値（Number）
const s = String(n); // sは文字列（String）の "123" に変換される

function getLength(text: string | null) {
  // ① text は null の可能性があるため、そのまま .length にアクセスするとエラー
  // console.log(text.length); // ❌ 'text' is possibly 'null'.
 
  // ② ! を付けて「null ではない」と断言すると、エラーにならずアクセスできる
  console.log(text!.length);
}

// getElementById の戻り値は HTMLElement | null
const button = document.getElementById('submit')!;
// ! を付けることで HTMLElement として扱える
button.addEventListener('click', () => {});

function printValue(value: string | number) {
  // ① この時点では string か number か分からないため、文字列専用の value.length はエラーになる
 
  if (typeof value === 'string') {
    // ② 型ガードが働き、このブロック内では確実に「string（文字列）」として認識される！
    console.log(value.length); // エラーにならない
  } else {
    // ③ ここでは自動的に残りの「number（数値）」として認識される
    console.log(value * 10);
  }
}

type User = {
  id: number;
  name: string;
};
 
function isUser(value: unknown): value is User {
  return (
    typeof value === 'object' &&
    value !== null &&
    'id' in value &&
    typeof value.id === 'number' &&
    'name' in value &&
    typeof value.name === 'string'
  );
}

async function fetchUser(): Promise<User | null> {
  const res = await fetch('/api/user');
  const data: unknown = await res.json();
 
  if (isUser(data)) {
    return data; // ✅ このブロック内では data は User 型
  }
  return null; // 検証に失敗したデータは通さない
}

const values = ['a', null, 'b', null]; // (string | null)[]
 
// 型述語をアロー関数の戻り値に書くと、結果が string[] になる
const strings = values.filter((v): v is string => v !== null);

// どちらも「型チェックを黙らせる」行為
const a = value as any as TargetType;
const b = value as unknown as TargetType;

const n: number = 42;
const s = n as string; // ❌ エラー：number と string は互換性がない

const config = {
  endpoint: '/api/users',
  method: 'GET',
};
// 推論結果: { endpoint: string; method: string }

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
 
function request(url: string, method: HttpMethod) {
  /* ... */
}
 
request(config.endpoint, config.method);
// ❌ エラー：string は HttpMethod に代入できない

const config = {
  endpoint: '/api/users',
  method: 'GET',
} as const;
// { readonly endpoint: "/api/users"; readonly method: "GET" }
 
request(config.endpoint, config.method); // ✅ "GET" は HttpMethod に代入できる

const CATEGORIES = ['tech', 'design', 'business'] as const;
// 型: readonly ["tech", "design", "business"]
 
type Category = (typeof CATEGORIES)[number];
// 型: "tech" | "design" | "business"
 
// 実行時は配列として使える
CATEGORIES.map((c) => console.log(c));
 
// 型の世界ではユニオン型として使える
function setCategory(category: Category) {
  /* ... */
}