【TypeScript】型アサーション(as)について

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型を使いたくない時に暫定で型アサーションを使う、というケースもあるかと思います。(僕自身は経験ないので完全に憶測です。悪しからず…)

最後に

型アサーションは便利ではあるけど、なるべく使わない、使うとしてもデメリットもある(世の中の上手い話には落とし穴があるのを一緒←大袈裟)のでそれを考慮した上で使うことを心掛けたいなと思います。

TypeScriptに関しては基本的な機能はある程度抑えられたかなと思うのでReact・Next.js・Laravelあたりの記事に移行しようかな。

何かTypeScriptで良い題材があればまた書きます。

参考記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

Webエンジニア←KHI(プラント事業の技術職)←大学院(機械工学)

PHP/Laravel/TypeScript/React/Next.js(Vue.js/Nuxt.jsは少し)
バックエンド歴の方が長いです。

神戸で「つながる勉強会」を運営↓
https://tsunagaru-kobe.connpass.com/

コメント

コメントする

目次
閉じる