【TypeScript】型アサーション（as）について

2022 11/16

2021年10月16日 2022年11月16日

URLをコピーしました！

TypeScriptで型を自在に扱うために必要な型アサーションについてまとめます。

型に関する記事は他にもまとめています。

あわせて読みたい

【TypeScript】型について（基礎〜ちょっと応用） TypeScriptの型について自分が勉強したことをまとめます。 TypeScriptの型については既に体系的にまとまっている記事があるのでこの記事は「車輪の再開発」になってしま…

あわせて読みたい

【TypeScript】型定義でのinterfaceとtypeの違い TypeScriptで型定義をする方法は直書きを除くと大きく分けてinterfaceとtypeです。本業では主に（というかほぼ全て）typeを使っているのですが、副業のソースコードでi…

あわせて読みたい

【TypeScript】ジェネリクスについて TypeScriptで型を使いこなすために重要な機能であるジェネリクスについて自分なりにまとめて残しておきます。名前は似ていますが「ジェネリック医薬品」とは関係ありま…

この記事は結構短いのでサッと読めます。

型アサーション

型アサーションとは型推論された型を任意の型で上書きすることができるTypeScriptの機能です

そもそもの話ですが、型アサーションはTypeScriptが型推論してくれたり、元々決まっていた型を強制的に上書きできてしまうので、なるべく使わない方が良いです。

（型アサーションを使うことによりデメリットは記事末尾に載せている参考記事に載っているので割愛）

詳しく見ていきます。

型アサーションが必要なケース

早速ですがTypeScriptで以下のコードを書いた場合、コンパイルエラーになると思いますか？

const obj1 = {}
obj1.name = '太郎'

答えは「コンパイルエラーになる」です。

エラーメッセージは以下のとおりです。

Property 'name' does not exist on type '{}'.

JavaScriptで当たり前のようにできるオブジェクトへのプロパティの追加ができません。

なぜコンパイルエラーが起こるかというとconst obj1 = {}とすることでobj1は「空のオブジェクト型」としてTypeScriptが型推論してしまうからです。

このような場合を防ぐために型アサーションを用います。

型アサーションを使う

では先ほどのコードに型アサーションという機能を使ってコンパイルエラーが出ないようにします。

type User = {
  name: string
  age: 20
}

// as 型 で型を上書きできる
const obj1 = {} as User
obj1.name = '太郎' // エラーなし

as Userとすることで{}という空のオブジェクトにUserという型を上書きすることができます。

型推論された型を任意の型で上書きできています。

実際にエディター（これはTypeScriptのPlay Groundですが）でもobj1にカーソルを合わせるとUser型として定義されているのが分かります。

型アサーションはasを使う、と書きましたが、<型>でも型アサーションすることができます。（ここでの<>はジェネリクスとは別のよう）

const num: number = 100
const strNum = <string> num // strNumは文字列の'100'になる

ただし、ReactやNext.js等のフロントエンドライブラリ・フレームワークで使われるJSX構文でタグ（コンポーネント）とごっちゃになってしまい見にくいので、asを使うのが推奨されています。

ちなみに<型>での型アサーションではTypeScriptのPlay Groundではコンパイルエラーになります。

型アサーションを使うケース

そもそも型アサーションは極力使わない方が良いのは前提ですが、どのような時に型アサーションを使うのかを考えると個人的にはReact Hooksの1つであるuseStateの時に使うというのがあると思います。（他にもあるだろうけど例として）

ここからReactの話になっちゃうので飛ばしてもらってOKです。

import { useState } from 'react'

type User = {
  name: string
  age: number
  isAdult: boolean
}

const App = () => {
  const [user, setUser] = useState<User>({} as User)
}

このような時に、stateの初期値を空のオブジェクトにしたい時に型アサーションを使うことでuserというstateをUser型の制約の範囲で更新する（プロパティの追加、変更）ことできます。

まあ、ただ初期値をちゃんと設定してあげればわざわざ型アサーションを使わずに済むのでなるべく以下の実装にしたほうが良いかと思います。

import { useState } from 'react'

type User = {
  name: string
  age: number
  isAdult: boolean
}

const initialUser: User = {
  name: '',
  age: 0,
  isAdult: false
}

const App = () => {
  const [user, setUser] = useState<User>(initialUser)
}

上記とは別ですが、JS→TSのリプレイスでとりあえずany型を使いたくない時に暫定で型アサーションを使う、というケースもあるかと思います。（僕自身は経験ないので完全に憶測です。悪しからず…）