TypeScriptのtypeofを知ろう

概要

別記事を書くにあたりtypeofを理解しようの会

typeofとは

指定した変数やプロパティの型を抽出して定義するもの。
参考: https://www.typescriptlang.org/docs/handbook/2/typeof-types.html

let s = "hello";
let n: typeof s; // string

let l = [1, 2, 3];
let m: typeof l; // number[]

ちなみに、配列に対して以下のような書き方をすると要素の型を抜き出せる。

let l = [1, 2, 3];
let m: typeof l; // number[]
let p: (typeof l)[number]; // number

number[]のインデックスに[number]でアクセスすることで要素の型を抜き出せる。

constにおけるtypeof

constを用いて指定した場合は以下のようになる。

const s = "hello";
let n: typeof s; // リテラル型 "hello"

const l = [1, 2, 3];
let m: typeof l; // number[]

プリミティブのな型であるstring、number、booleanについてはリテラル型になり、
それ以外はできる限り推論した型にしてくれる。
[1, 2, 3]だとnumber[]とか。{ name: "ほげ", age: 20 }だと{ name: string; age: number; }とか。
参考: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html

JavaScriptのtypeofとの違いは??

JavaScriptにもtypeofが存在し、それも型を返してくれるものなので困惑する。
が、JavaScriptのtypeofはあくまでも「型名を表示してくれる」ためのものでTypeScriptの「型を抽出し定義するもの」とはちょっと異なる。

JavaScriptでの使用例

let s = "hello";
let n = typeof s;
console.log(n); // "string" が表示される

TypeScriptでの使用例

let s = "hello";
let n: typeof s;
console.log(n); // undefined が表示される(型定義しただけで値は格納していないので)

ちなみに、TypeScrtiptのファイルでも console.log(typeof s) は使用できるが、これはJavaScriptのtypeofが作動している。

TypeScriptでは上記のtypeofがどっちも使用できてしまうからややこしくなってしまっているかも。