typeof演算子 (typeof operator)

JavaScriptのtypeof演算子では値の型を調べることができます。

js
typeof true; //=> "boolean"
typeof 0; //=> "number"
typeof "Hello World"; //=> "string"
typeof undefined; //=> "undefined"
typeof null; //=> "object"
typeof Symbol(); //=> "symbol"
typeof 1n; //=> "bigint"
typeof [1, 2, 3]; //=> "object"
typeof { a: 1, b: 2 }; //=> "object"
typeof (() => {}); //=> "function"

js
typeof true; //=> "boolean"
typeof 0; //=> "number"
typeof "Hello World"; //=> "string"
typeof undefined; //=> "undefined"
typeof null; //=> "object"
typeof Symbol(); //=> "symbol"
typeof 1n; //=> "bigint"
typeof [1, 2, 3]; //=> "object"
typeof { a: 1, b: 2 }; //=> "object"
typeof (() => {}); //=> "function"

TypeScriptで`typeof`を使うとifやswitchでその型として使うことができる

TypeScriptではtypeof演算子をifやswitchと併せてつかうと、条件と合致したときにその変数をその型として扱えるようになります。次の例はunknown型とされた変数nがtypeof演算子によってstring型であると判別された例です。

ts
const n: unknown = "";
 
if (typeof n === "string") {
  n.toU;
       toUpperCase
}

ts
const n: unknown = "";
 
if (typeof n === "string") {
  n.toU;
       toUpperCase
}

`null`を判別する

typeof演算子で特筆すべきなのは、値がnullの場合です。typeof nullの演算結果は"null"ではなく"object"です。誤解が起きやすい部分なので注意しましょう。特に値がオブジェクトかどうかを判定したいときは、typeof nullが"object"になることを意識して書かないと思いがけない不具合になることがあります。

js
// まずい実装
function isObject(value) {
  return typeof value === "object"; // valueがnullになる場合を考慮していない
}
 
isObject(null); // 戻り値がtrueになってしまう

js
// まずい実装
function isObject(value) {
  return typeof value === "object"; // valueがnullになる場合を考慮していない
}
 
isObject(null); // 戻り値がtrueになってしまう

typeof nullを考慮した実装は次のようになります。

js
function isObject(value) {
  return value !== null && typeof value === "object";
}

js
function isObject(value) {
  return value !== null && typeof value === "object";
}

ここで説明したのはJavaScriptのtypeof演算子です。TypeScriptのtypeof型演算子については、typeof型演算子の説明をご覧ください。

📄️ typeof型演算子

TypeScriptのtypeofは変数から型を抽出する型演算子です。次は、変数pointにtypeof型演算子を用いて、Point型を定義する例です。このPoint型は次のような型になります。

配列を判別する

上記例にもあるとおり、配列をtypeofにかけると"object"となります。これは不具合でもなんでもなく、配列はオブジェクトであるのでそのように判別されます。

とはいえそれが配列かどうかを判別する機会は多いため、専用にArray.isArray()というメソッドがArrayオブジェクトにあります。

Array.isArray()を使ってtrueの戻り値が帰ってきた場合、その変数はany[]型であると判別されます。

ts
if (Array.isArray(n)) {
  // n is any[]
}

ts
if (Array.isArray(n)) {
  // n is any[]
}

any[]型を任意の型の配列として判別したい場合は各要素に対してtypeofやArray.isArray()など型を調べる関数を使います。

📄️ unknown型

TypeScriptのunknown型は、型が何かわからないときに使う型です。

📄️ 型ガード関数

TypeScriptのコンパイラはifやswitchといった制御フローの各場所での変数の型を分析しており、この機能を制御フロー分析(control flow analysis)と呼びます。