PR

TypeScript:型アサーション(as)とは?1分でおさらい

TypeScript

型アサーションTypeScriptで使う機能の1つで「私はこのデータが何の型(どんな種類)であるか知っているよ」とコンピューターに教えてあげるものです。あなたが友達に「この変数の型は"数値型"だよ」と教えるようなイメージ。

TypeScriptはその名が示す通り「Type:」にあり、プログラムの中でデータの型をチェックし、間違った型のデータを使ってしまうミスを減らすことができます。しかし、時にはプログラマーがTypeScriptよりも、そのデータが実際にはどのような型であるかをより正確に知っている場合があります。その時に「信じて!これは本当にこの型なんだ」とTypeScriptに伝えるのが、型アサーションです。

つまり、どういうこと?ってのをこのページでサンプルコード付きで解説していきます。

スポンサーリンク

型アサーションとは?

型アサーションは、コード内で特定の変数や値が特定の型であるとコンパイラに「主張」する方法です。型アサーションは、プログラマがTypeScriptコンパイラの型チェックを迂回し、プログラマ自身がその値の型を最もよく理解している場合に使用します。これは、型推論が正しく機能しない場合や、より具体的な型に変換する必要がある場合に特に有用です。

つまり、TypeScriptが自動的に型を判定するより、「私が確実に判定してあげるよ!」というタイミングで利用するものです。

例えば、あなたが天気のデータを提供する外部のAPIからデータを取得しているとします。このデータには、温度や湿度などが含まれていますが、TypeScriptはこのデータの形式(型)を自動で認識できません。そんなときに、このデータは「〇〇型だよ!」というのを知らせてあげます。

// 外部APIから取得したデータ
const weatherData = getWeatherData(); // この関数は外部APIからデータを取得する

// ここで型アサーションを使う
const temperature: number = (weatherData as WeatherDataType).temperature;

この例では、getWeatherData関数が返すweatherDataに対して、WeatherDataTypeという型を持っているとTypeScriptに教えています。これにより、temperatureが数値型(number)であることを確信でき、それを安全に使用することが可能になります。

型アサーションの使い方

型アサーションは2つの書き方があります。

angle-bracket構文

let myVariable: any = "これは文字列です";
let myVariableLength: number = (<string>myVariable).length;

このコードでは、「myVariableは実は文字列だよ」と教えて、その文字列の長さを取得しています。

as構文

let myVariable: any = "これは文字列です";
let myVariableLength: number = (myVariable as string).length;

書き方が少し違い「as 型」としています。どちらの構文も同じ働きをしますが、JSXを使用する場合はas構文のみが許可されています(angle-bracket 構文はJSXのタグと混同する可能性があるため)。

Q
JSXとは?
A

JavaScript XMLの略でReactでよく使用される構文。JSXはReactでUIを表現する際に、HTMLのような形式でコンポーネントを書くことを可能にします。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

型アサーションを利用する場合の注意点

一見便利そうな型アサーションですが、利用する際にはいくつかの大切な注意点があります。ここでは、その注意点をご説明しておきます。

1. 確信がない場合は使わない

型アサーションは、「このデータは確実にこの型です」とプログラマーがTypeScriptに教えるもの。しかし、もしプログラマーの予測が間違っていると、プログラムが正しく動作しなくなる可能性があります。そのため、データの型が確実にわかる場合にのみ使用するようにします。

2. 安全な使用を心掛ける

型アサーションは強力なツールですが、誤用するとバグの原因に。例えば、型アサーションを使ってstring型をnumber型に変換する場合、実際には数値に変換できない文字列を扱うことになりかねません。そのため、安全に使用できる状況でのみ利用するようにします。

3. ランタイムでの型変更はしない

型アサーションはコンパイル時のみに影響を及ぼし、実行時には何の影響もありません。つまり、実行時にデータの型を変更することはできません。このことを理解しておかないと、意図しない挙動につながる可能性があります。

4. any型の乱用を避ける

any型を使って型チェックを回避し、その後で型アサーションを使うことで具体的な型に変換するという手法は、型安全性を低下させることになります。可能な限り、具体的な型を最初から使用するよう心掛けましょう。

型アサーションは便利なツールですが、誤った使い方をすると問題を引き起こす可能性があります。型アサーションを使う際は、そのデータが本当に指定した型であることに確信がある場合にのみ使用し、型の安全性を確保するための手段として利用するようにしましょう。

このWebサイトは現役のエンジニアが以下3点を目的として運営しています。

  1. 勉強:一度理解した内容を忘れないように。
    → アウトプットは「最強のインプット」である! 
  2. 備忘:忘れたとしても後から見返せるように。
    → 未来の自分への「お手紙」を書いています。 
  3. 共有:〇〇ってこうだったんだ!の感動をシェアできるように。
    → あなたの知識は誰かにとっての「価値ある情報」です。 

副業ブログの始め方はこちらから

スポンサーリンク
TypeScriptWEBデザイン
シェアする
ビズドットオンラインをフォローする
タイトルとURLをコピーしました