0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

型ガードとは?

型ガードは、ある変数が特定の型であるかどうかを確認する方法のことを指します。この確認を行うことで、その変数を安全に使用することができます。

なぜ型ガードが必要か?

TypeScriptでは、変数が複数の型を持つ可能性がある場合があります。例えば、ある関数が文字列または数字を受け取る場合、その関数内でその値が文字列か数字かを確認しないと、エラーが発生する可能性があります。

シンプルな例

考えてみてください。あなたがレストランに行って、「ハンバーガー」または「サラダ」を注文するとします。

もし「ハンバーガー」を注文した場合、あなたは「焼き加減」を選ぶことができます。
もし「サラダ」を注文した場合、あなたは「ドレッシング」を選ぶことができます。
この場面で、注文が「ハンバーガー」なのに「ドレッシング」を選ぼうとしたら、それは間違いですよね。ここで「注文が何か?」を確認するのが型ガードの役割です。

TypeScriptのコードでの具体例

type Order = 
    { type: 'burger', cookLevel: 'rare' | 'medium' | 'wellDone' }
    | { type: 'salad', dressing: 'ranch' | 'vinaigrette' };

function prepareOrder(order: Order) {
    // 型ガードの部分
    if (order.type === 'burger') {
        // ここではorderは確実にハンバーガーの注文です。
        console.log(`Making a burger cooked ${order.cookLevel}`);
    } else {
        // ここではorderは確実にサラダの注文です。
        console.log(`Making a salad with ${order.dressing} dressing`);
    }
}

上のコードの order.type === 'burger' の部分が型ガードです。これにより、それぞれのブロック内で order の型が確定します。

typeof を型ガードとして使用

typeof は JavaScript と TypeScript のキーワードであり、変数の「型」を取得するためのものです。
TypeScript において、typeof は型ガードとしても使用できます。これにより、特定のスコープ内で変数の型を狭めることができます。

例:

function processInput(input: string | number) {
    if (typeof input === "string") {
        // このブロック内では、input は確実に string 型です
        console.log(input.toUpperCase());
    } else {
        // このブロック内では、input は確実に number 型です
        console.log(input.toFixed(2));
    }
}

このように、typeof は JavaScript と TypeScript の両方で非常に便利なツールとして利用されます。特に TypeScript では、変数の型を動的にチェックするための強力な型ガードとしての役割も果たします。

まとめ

型ガードは、変数の型を確定させるためのツールです。これにより、その変数を安全に使うことができ、間違った方法で使うことを防ぐことができます。ちょうどレストランで注文を確定させるようなものと考えるとわかりやすいかと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?