4
1

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 3 years have passed since last update.

[TypeScript] TypeGuard とは

Last updated at Posted at 2020-02-14

TypeGuardってなに

条件ブロック内でオブジェクトの型を制限すること。

例えば、ある関数の中で if (typeof hoge === "undefined") return
書いたとします。
するとその関数内では以後、hogeundefinedである事はないですよね。
こうやってオブジェクトが複数の型を持つ場合に型を制限することを指します。

どういう時に使うのか?

どんな型のデータでも引数に受け取りたい時(例えばJSONデータやオブジェクト)。

関数の引数でanyを使ってしまっているよ...lintが怒っている:thinking:(anyは使わないのがベスト)

そんなときはTypeGuardをして余計なものを排除しましょう。

実例

今回はURLに乗っているクエリパラメータの一部分の数字を取得して変数に格納したいケースですが、
背景は気にしないで結構です。雰囲気作りが大事だと思っているので背景をつけました:angel:(なるほだない)

sample.ts

const hogeRound = null;

// まずURLの?で始まる検索クエリ部分を参照する
const { search } = location;

// 取得したクエリパラメータから1文字目を除いてオブジェクトにパースする
// この時点でqueriesはany型
const queries.roundId = qs.parse(search.substr(1));

function typeGuard (queries.roundId) {
  //求めてるid以外のクエリが入ってくる可能性を考慮してる
  if (queries.roundId) {
    // queries.roundIdという文字列をNumber型かつ数字に変換してroundIdに格納
    const roundId = Number.parseInt(queries.roundId, 10);
    // クエリvalueに数字以外が渡ってくることを防ぐ(型絞り込みその1)
    if (!Number.isNaN(roundId)) {
      // オブジェクトにパースする
      const queryId = JSON.parse(String(roundId));
 
      // number型でさらに絞り込む(型絞り込みその2)
      if (typeof queryId === "number") {
        // hogeRound.idはほぼnumber型
        hogeRound.id = queryId;
      
        hogeRound.id.type === "number"
      }
    }
  }
}

location.searchについてはこちら
qs.parseについてはこちら
substr()についてはこちら
Number.parseInt()についてはこちら
JSON.parse()についてはこちら
typeofについてはこちら

こうして入ってくるデータの型を制限することでhogeRound.idはほぼ間違いなくnumber型しか入らない形になりました(厳密には違いますが)。

このようにデータの型が確定された時に true を返す関数の事

おしまい。

4
1
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
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?