型アサーションに使うasキーワード
asを使って、推論された型を意図的に上書きします。
「型アサーションに使うasキーワード」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
型アサーションとは
型アサーションは、コンパイラーに「この値は T 型だと信頼してください」と伝えるものです。asキーワードを使い、value as Typeと記述します。値自体ではなく、型チェッカーから見た値の型を変えます。
const raw: unknown = 'hello world';
const text = raw as string;
console.log(text.toUpperCase());as の構文
式を記述し、次にas、その後に対象の型を記述します。山かっこ構文もありますが、asのほうが、JSX/TSX ファイルを含むあらゆる場所で使えるため推奨されます。
const value: unknown = 42;
const n = value as number;
console.log(n + 8);アサーションは実行時の動作を変えない
ここは重要です。アサーションはコンパイル時にのみ作用する指示です。コードの実行時には消去されます。変換も検証も行われないため、誤ってアサーションすると、実行時の値は変わらず、予期しない動作につながる可能性があります。
const v: unknown = 'not a number';
const n = v as number; // compiles, but v is still a string
console.log(typeof n); // 'string' at runtime!アサーションが有効な場合
TypeScript は、型の間に重なりがある場合、つまり一方を他方に代入できる場合にのみ、直接のアサーションを許可します。unknownからstringへのアサーションや、型の関係に基づく拡大・絞り込みが可能です。
const u: unknown = 'ok';
const s = u as string; // valid: unknown overlaps everything
const broad = s as string | number; // valid widening
console.log(s, broad);無効な直接アサーション
2つの型に重なりがない場合、TypeScript は明らかな誤りの可能性があるため、直接のアサーションを拒否します。たとえば、stringからnumberへの直接のアサーションは許可されません。
const s = 'hello';
// const n = s as number; // Error: neither type sufficiently overlaps
console.log('Direct unrelated assertions are blocked');as によるユニオン型の絞り込み
よくある有効な使い方は、コンパイラーが持っていない知識に基づいて、ユニオン型の値をそのメンバーの1つへアサーションすることです。ただし、使用は控えめにしてください。通常は実行時チェックのほうが安全です。
type Shape = { kind: 'circle'; r: number } | { kind: 'square'; s: number };
const data: Shape = { kind: 'circle', r: 5 };
const circle = data as { kind: 'circle'; r: number };
console.log(circle.r);DOM 要素の型をアサーションする
典型的な実例は、DOM クエリがHTMLElement | nullのような広い型を返す場合です。具体的な要素が分かっている場合は、その要素固有のプロパティにアクセスできるようアサーションします。
// document.getElementById returns HTMLElement | null
// const input = document.getElementById('email') as HTMLInputElement;
// console.log(input.value);
console.log('Assert HTMLElement to HTMLInputElement for .value');DOM のアサーションが必要な理由
DOM API は、どの具体的な要素を取得するかを事前に知ることができないため、一般的な型を返します。具体的なサブタイプ（例: HTMLInputElement）へアサーションすると、valueやcheckedなどのプロパティを使えるようになります。
// const canvas = document.querySelector('#c') as HTMLCanvasElement;
// const ctx = canvas.getContext('2d');
console.log('querySelector returns Element | null; assert to specialize');const アサーションは特殊なケース
as constについてはすでに見ました。これは、リテラル型を持つ深い readonly に値を変える特殊なアサーションです。型を狭めるだけなので、常に安全な唯一のアサーションです。
const tuple = [1, 2, 3] as const;
// type: readonly [1, 2, 3]
console.log(tuple.length);アサーションは安全性を回避する
アサーションはコンパイラーにチェックを止めるよう指示するため、責任が自分に移ります。誤ったアサーションは、実際の型エラーを隠し、実行時にクラッシュするまで発見できなくする可能性があります。コンパイラーよりも本当に多くのことを把握している場合にだけ使用してください。
const data: unknown = { id: 1 };
const user = data as { id: number; name: string };
// name does not exist at runtime
console.log(user.name); // undefined, no compile errorアサーションより絞り込みを優先する
可能な場合は、アサーションよりも実行時の絞り込み（型ガード）を優先してください。絞り込みは型を証明しますが、アサーションは型を主張するだけです。DOM の特殊化のように、絞り込みでは表現できない場合にasを使ってください。
function safe(v: unknown): number {
if (typeof v === 'number') return v; // proven
return 0;
}
console.log(safe(10), safe('x'));理解度チェック
型アサーションについての理解度を確認しましょう。
振り返り: as アサーション
次のことを学びました。
value as Typeは、値を指定した型として扱うようコンパイラーに伝えます。- アサーションはコンパイル時にのみ作用し、実行時の変換やチェックは行いません。
- 重なりのある型の間でのみ使用できます。
- 一般的な有効例は、
unknownの絞り込みと DOM 要素型の特殊化です。可能な場合は絞り込みを優先してください。
次は、非 null アサーション演算子を扱います。
const raw: unknown = 'data';
const s = raw as string;
console.log(s.length);よくある質問
「型アサーションに使うasキーワード」レッスンは無料ですか？
はい。「型アサーションに使うasキーワード」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「型アサーションに使うasキーワード」で何を学びますか？
asを使って、推論された型を意図的に上書きします。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「型アサーションに使うasキーワード」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 型アサーションに使うasキーワード
- Non-nullアサーション演算子
- 二重アサーションとそのリスク
- アサーションと型ガード