※本ページではアフィリエイトリンク(PR)が含まれています※

TypeScript

【5分でわかる】as(型アサーション)の使い方 | TypeScript入門

この記事ではTypeScriptにおけるas(型アサーション)の使い方をご紹介します。

as(型アサーション)の使い方

TypeScriptにおけるas(型アサーション)の使い方をご紹介します!

as(型アサーション)とは?

as(型アサーション)とは, <変数名> as <型>を設定することですでに推論された方に対して、任意の方に上書きをすることができます。

例えばJavaScriptからTypeScriptへの移行が途中の段階でとりあえず、コンパイルエラーを無くすため変数をany型に設定してどのような型がきても受けるようにします。

具体的には以下のように記述します。


const testA = {} 
testA.num = 123 // (NG) numberが定義されていないのでエラーになる

//型を定義する
interface Test {
   num: number
} 

// as を使ってアサーションを行う
const testB = {} as Test 
testB.num = 123 // (OK) Testのnumはnumberと定義しているのでエラーのならない

as(型アサーション)の注意点

大変便利なas(型アサーション)ですが、使用する際には数点注意が必要です。

すでに型違いの値が代入されていたらエラーになる

以下のようにすでにアサーションで定義された型と異なった値が同タイミングで保持されていたらエラーになります。

const test = 'test' as number

interfaceのプロパティーが不足していてもエラーにならない

interfaceを実装する場合は、実装先の変数では必ずプロパティに対し全て値を反映させる必要がありません。

アサーションを設定した場合、上記のようなエラーを出してくれません。よって変数の安全性が担保できなくなります。

interface Test {
   num: number 
} 
const test : Test = {}

上記のようなコードである場合、interfaceのプロパティであるnum に足しい変数testでは何も登録していないのエラーになります。

しかしアサーションをつけて以下のようにした時、エラーが出力されずコンパイルが通ってしまいます。

interface Test {
   num: number
} 
const test = {} as Test //エラーが起きない

まとめ

今回はTypeScriptにおけるas(型アサーション)の使い方を紹介しました。

アサーションは大変便利ですが、時に型の安全性を脅かしてしまうので使い所には気をつけていきたいですね。

ぜひこの機会に習得してみてください。

きむら

ここまで記事を読んでいただきありがとうございました♪