Typescriptでのtypeofの使い方

今回は、Typescriptでのtypeof演算子の使い方について紹介します。

Javascriptで使われるtypeof演算子について

Javascriptで使われるtypeof演算子とTypescriptで使われるtypeof演算子がある！

まずJavascriptでの使われ方について

typeof演算子は変数の先頭につけて、スペースを1行開けて使います。
そうすると、型情報の文字列が返ってきます。

例えば、const hoge = “hoge”という名前の変数があるとします。
この変数の型を調べたい時に、console.log(typeof hoge)としてあげることによってこの変数がstring型であることがわかります。

しかし、一点だけ注意しないといけない事があります。
それは、nullやNaNといった型を調べる時です。

nullの場合は以下のようにobject型が返却されます。
console.log(typeof null) // object

NaNの場合は以下のようにnumber型が返却されます。
console.log(typeof NaN) // number

Typescriptで使われるtypeof演算子について

では、Javascriptのtypeof演算子と何が違うのか見ていきましょう。

Javascriptでは、型情報を調べるためにtypeof演算子を使用しましたが、Typescriptではどうでしょうか。
結論から申しますとTypescriptでのtypeof演算子の使われ方は以下の二つです。

• プリミティブ型の型ガード
• 変数の型定義の取得

まず一つ目のプリミティブ型の型ガードについてです。

型ガードとはif文やcase文をはじめとした条件分岐で変数の型を判別し、ブロック内の変数の型を絞り込む機能のことをいいます。

例えば、if (typeof hoge === 'string')という使い方です。
hogeがstring型ではないとif文の中身の処理は出来ないですという意味になります。

そして二つ目は変数の型定義の取得についてです。
早速例を見てみましょう。

const hoge: string = "hoge"というstring型の変数があるとします。
このhogeという変数はstring型であるということが型注釈により保証されていることは上記の文からわかると思います。

つまりこういう事ができます。
const fuga: typeof hoge = "fuga"
hogeはstring型として保証されているので、fugaはstring型になります。

この応用として以下の事が出来ます。
以下のオブジェクトをみてください。

const human = {
name: "shimmi",
age: 24,
} as const

このオブジェクトのキーだけ抜き出して型定義をしたい場合、
type HumanType = keyof typeof human
とすれば、HumanTypeは”name” | “age”のユニオン型にある事が出来ます。

オブジェクトのキーを使いたい時は是非活用してみてください。

まとめ

今回は、Javascript、Typescriptにおけるtypeof演算子を紹介させていただきました！
まだまだTypescriptには便利な機能がたくさんあります。
開発現場でもTypescriptで開発されているところは年々増えてきていますのでこれを機会に学習を始めてみてはどうでしょうか！

最後に

今回は弊社で活躍されているエンジニアに記事を執筆していただきました！

オータムでは未経験や異業種からでもエンジニアとして活躍できる機会を多く提供しています！

オータムでIT業界やWEB業界でエンジニアとして活躍したい！という方は是非とも一度お話しましょう！！