【TS】typeof演算子とtypeof型演算子の違いについてざっくりまとめてみた

概要

typeof演算子とtypeof型演算子の違いがごっちゃになってきたので、まとめようと思います。

typeof演算子とは

typeof演算子とは、JavaScriptで使う演算子です。値の型を示す文字列を返します。TypeScriptで使う場合も同様の使い方をします。

console.log(typeof true); // => "boolean" 
console.log(typeof "Hello World"); // => "string" 
console.log(typeof (() => void(1))); // => "function" 

// プリミティブ型以外の値の場合、"object"が返される
console.log(typeof [1, 2, 3]); // => "object" 
console.log(typeof {name: "yuki"}); // => "object" 

// typeof nullで"object"を返すのは、公式に認められている言語的なエラーである。互換性が維持されている
console.log(typeof null); // => "object"

TypeScriptでtypeof演算子とif文やSwitch文等と一緒に使うと、条件に一致した時、その条件文のスコープ内で変数を一致した型として利用することができます。ちなみに、あるスコープ内での型を保証するチェックを行う式のことを型ガードと呼びます。以下の場合は、typeof x === "number"が型ガードです。

// unknown型は、型が何かわからないときに使う型
const x: unknown = 7;
// 'x' is of type 'unknown'.(18046)
// console.log(x + 4);

if (typeof x === "number") {
  console.log(x + 4); // => 11
}

typeof型演算子とは

TypeScriptのtypeof型演算子とは、変数から型を抽出する型演算子です。 TypeScriptのtypeof型演算子は、JavaScriptのtypeof演算子と同じ名前ですが、まったく別のものなので注意しましょう。typeofを型のコンテキスト(文脈)で使うと、typeof型演算子として利用できます。

let num = 1;
const user = {name: "yuki", age: 25};

type Num = typeof num;
// => type Num = number

type User = typeof user;
// => type User = {
//      name: string;
//      age: number;
//    }