TypeScript 型ガード（Type Guards）完全ガイド
TypeScriptでは次のような型がよく使われます。
string | numberこのような型を
Union型と呼びます。
しかしこの場合
value.toUpperCase()のようなコードを書くとエラーになります。
なぜなら
valueがstringかnumberか分からないからです。
そこで使うのが
Type Guards（型ガード）です。
型ガードを使うことで
実行時に型を判定することができます。
typeof を使う型ガード
最も基本的な型ガードです。
function print(value: string | number) {
if (typeof value === "string") {
console.log(value.toUpperCase())
}
}このコードでは
typeof value === "string"の中では
value : stringとTypeScriptが判断します。
instanceof を使う型ガード
クラスの場合は
instanceofを使います。
class Dog {
bark() {
console.log("bow")
}
}
class Cat {
meow() {
console.log("meow")
}
}
function speak(animal: Dog | Cat) {
if (animal instanceof Dog) {
animal.bark()
}
}これにより
animal : Dogと判断されます。
in を使う型ガード
オブジェクトのプロパティを確認する方法です。
type Dog = {
bark: () => void
}
type Cat = {
meow: () => void
}
function speak(animal: Dog | Cat) {
if ("bark" in animal) {
animal.bark()
}
}カスタム型ガード
自分で型ガードを作ることもできます。
function isString(value: unknown): value is string {
return typeof value === "string"
}使用例
function print(value: unknown) {
if (isString(value)) {
console.log(value.toUpperCase())
}
}この
value is stringが
Type Predicateと呼ばれる仕組みです。
実務でよくある例
APIレスポンスの判定です。
type Success = {
status: "success"
data: string
}
type Error = {
status: "error"
message: string
}
type Response = Success | Error型ガードを使うと
function handle(res: Response) {
if (res.status === "success") {
console.log(res.data)
} else {
console.log(res.message)
}
}このように安全に処理できます。
型ガードのメリット
型ガードを使うと
- Union型を安全に扱える
- 実行時の型判定ができる
- バグを防げる
というメリットがあります。
まとめ
TypeScriptの型ガードは
実行時に型を判定する仕組みです。
主な方法はこちらです。
| 方法 | 用途 |
|---|---|
| typeof | primitive型 |
| instanceof | クラス |
| in | プロパティ |
| custom guard | 独自判定 |
型ガードを理解するとUnion型を安全に扱えるようになります。
次回は、TypeScriptのEnumとLiteral型
コメント