TypeScript の asとはなにかを掘り下げて考えてみた

as は何をするのか

TypeScript に対して、「この値はこの型ですよ」と明示的に伝えるために使います。これを 型アサーション（type assertion） と呼びます。

const value = { name: "apple" } as Fruit;

このように書くと、TypeScript は value を Fruit 型として扱ってくれます。

型アサーション（type assertion）とは

「この値は絶対にこの型ですよ」と TypeScript に教えること

const value = "hello" as string;

この場合、TypeScript に「この値は string 型で扱っていい」と開発者が責任を持って宣言しています。

アサーションの言葉の意味

「アサーション（assertion）」は日本語でいうと 「断言」や「主張」 のことです。

プログラミングでは、「これは絶対に○○であるべきだ」と自分で保証することを「アサーション」と呼びます。

なぜ as が必要なのか

TypeScript は安全性の高い型チェックを行うため、"undefinedかもしれない" や "型が合ってないかもしれない" という不安があると、エラーを出します。

そんなときに「これはこの型で合ってる」と教えるために as を使います。

実際の使用例

React + Supabase で作った英単語帳アプリの中で、APIから返ってきた JSON を使って複数の単語カードを表示したい場面がありました。

as を使わないとき

setWordList([
  { ...parsed.main, label: "main" },
  parsed.synonyms ? { ...parsed.synonyms, label: "synonym" } : undefined,
  parsed.antonyms ? { ...parsed.antonyms, label: "antonym" } : undefined,
]);

TypeScript は label プロパティの存在を認識できず、「label なんてプロパティ知らない」と型エラーになり怒られました。

as を導入してみた

setWordList([
  { ...parsed.main, label: "main" } as LabeledWord,
  parsed.synonyms
    ? { ...parsed.synonyms, label: "synonym" } as LabeledWord
    : undefined,
  parsed.antonyms
    ? { ...parsed.antonyms, label: "antonym" } as LabeledWord
    : undefined,
].filter(isLabeledWord));

ここでの as LabeledWord は、
・Gemini から返ってきたデータ（WordInfo）に label を追加した
・その結果、TypeScript に「これは LabeledWord 型だよ」と教える必要がある

という背景で使われています。

filter() の部分では、型ガード関数を使って undefined を取り除いています。

function isLabeledWord(word: LabeledWord | undefined): word is LabeledWord {
  return word !== undefined;
}

この関数は「この値は LabeledWord です」と TypeScript に確実に伝える手段で、as の補助的な役割を果たします。

まとめ

• as は型を明示するためのもの
• 「何型として扱いたいのか」を意識したい時に as を使う
• 型ガード関数と併用して使う