こんにちは、株式会社ファミトラでエンジニアをしているおおさわです。
弊社では Next.js を用いてフロントエンド開発を行っており、ご存じの通り Next.js は TypeScript によって型安全な開発が可能です。
僕自身、TypeScript を触り始めてまもなく 3 年目になるのですが、Typescript の型についてよく使うものは何となく理解している一方、あまり使わないものや、そもそも知らない仕様も多いと感じているので、少しずつインプット＆アウトプットをしていけたらなと思います。
とりあえず今回はプリミティブ型についてまとめたいと思います
boolean
何の変哲もない真偽値型
const isHoge = true;
console.log(isHoge)
// -> true
const isHoge = false;
console.log(isHoge)
// -> false
余談ですが、boolean の語源は 19世紀の英国の数学者George Booleに由来するらしいです
string
何の変哲もない文字列型
const str: string = "hoge hoge";
console.log(str);
// -> "hoge hoge"
number
何の変哲もない数値（浮動小数）の型
JavaScript の number は倍精度浮動小数点数で、扱える範囲はおおよそ ±1.79e308
ただし整数を誤差なく表せる範囲は -(2^53 − 1) ~ 2^53 − 1 の範囲
（ここらへんの仕組みは浮動小数点数でググって解説見たほうが早そうです）
const n: number = 123;
console.log(n);
// -> 123
const n: number = -456;
console.log(n);
// -> -456
2進数、8進数、16進数で代入することもできる
// 2進数
const n: number = 0b010101;
console.log(n);
// -> 21
// 8進数
const n: number = 0o0707;
console.log(n);
// -> 455
// 16進数
const n: number = 0x01f1;
console.log(n);
// -> 497
指数表記も使える
const n: number = 108e3;
console.log(n);
// -> 108000
bigint
（メモリが許す限り）上限なしに数値を扱える型
数値の末尾にnを付与することでbigintの値となる
※使うためにはコンパイラーオプションのtargetをes2020以上にする必要がある
const b: bigint = 123456789012345678901234567890n;
console.log(b);
// -> 123456789012345678901234567890n
bigint 型とnumber 型で計算することはできないのでどちらかに寄せる必要がある
const b: bigint = 123456789012345678901234567890n;
const n: number = 1
// console.log(b + n);
// -> エラー！
const b1: bigint = 123456789012345678901234567890n;
const b2: bigint = 1n
console.log(b1 + b2);
// -> 123456789012345678901234567891n
undefined
「値がまだ定義されていない」ということを表す型及び値
JavaScript では変数を初期化せずに参照すると undefined になるが、
TypeScript ではそのままではコンパイルエラーになるので、| undefined を明示することが多い
let num: number | undefined;
console.log(num)
// -> undefined
実務では省略可能な引数への型で使われることが多そう
const hoge = (name?: string) => {
console.log(name)
}
hoge("fuga");
// -> "fuga"
hoge();
// -> undefined
null
「値が存在しないことを意図的に表す」ための型及び値
変数を定義した際に初期値を渡さなかった場合に出現する undefined と違って自然発生しない
// 誕生日を扱う型
type BirthdayType = string | null;
// 誕生日がわかっている場合
const birthday1: BirthdayType = '1980-01-01T00:00:00';
// 誕生日がわかっていない場合
const birthday2: BirthdayType = null;
実務ではAPIレスポンスなどのデータで受け取ることが多そう
⇒ nullは他の言語やDBでもだいたい扱えるので
symbol
string, numberに続いてオブジェクトのプロパティーKeyとして使える第三の型。
必ずユニークになるので、ライブラリやフレームワークの内部でオブジェクトのKey名が衝突するのを回避できる。
const key1 = Symbol("id");
const key2 = Symbol("id");
console.log(key1 === key2);
// -> false
具体的な使い方を整理したかったのですが、symbolだけで１記事かけてしまいそうかつ、
ReactやNext.js を使ってフロントエンド実装してる限りでは使うことがほぼなさそうなので、存在だけを頭の片隅に置いとこうと思います・・・
まとめ
普段から使っている TypeScript でも、プリミティブ型だけで意外と知らないことが多いと気づけて良かったです。
特に symbol はもう少し深掘りして整理してみたいところですが、普段の開発ではあまり出番はなさそうだな、というのが正直な感想ですし、bigintはもはや競技プログラミングぐらいでしか使わんだろ・・・という気持ちになりました
今回はプリミティブ型の整理を行ったので次は型定義あたりの方法をまとめたいですね