【TypeScript初心者】データ型① - プリミティブ型を理解する

はじめに

AIは書き方を教えてくれますが、それが最善か判断できないので、勉強します...！

「読んで学ぶTypeScript」をちょっとずつ読み進めます！
今回は、プリミティブ型の各種類についてです！

---

コーディングに慣れていないので、ところどころ用語を調べて記載しながら書きますmm
そのため、初心者の方が理解するには、助けになるかもしれません

---

TypeScriptの文法はJavaScriptの文法を拡張したもののため、JavaScriptの記述が多いです
「TypeScriptとは？」から読みたい時はこちら↓

JavaScriptのデータ型

データ型：プログラムが扱うデータの種類や取り扱い方を決めるもの
データ型を適切に選ぶことで、プログラムが効率よく動作し、エラーを減らすことができる

JavaScriptのデータ型は、プリミティブ型とオブジェクトの大きく2つに分類される

• プリミティブ型：データ型の中で最も基本的なもので、最初から用意されている型
  • 言語ごとにプリミティブ型がある
• オブジェクト：プリミティブ型以外のもの、プロパティの集合
  • プロパティ：名前（key）と値（value）のペア
    • 例: name: "りんご"（key: value）

今回はプリミティブ型について学びます！

JavaScriptのプリミティブ型の特徴

• 値を直接変更できない
  • → イミュータブル(immutable)

値の変更ができないので、予期せぬエラーを未然に防げる

• 自動ボックス化の仕組みがある
  • プリミティブ型をオブジェクトに自動変換する機能

自動ボックス化の仕組みとメリットについてはまた別の記事でまとめます！

JavaScriptのプリミティブ型の種類

boolean型(論理型)

• true falseの論理値からなる型

// TypeScriptでの型注釈付きの例
let isDone: boolean = true;
let hasError: boolean = false;

// JavaScript（型注釈なし）
let isDone = true;
let hasError = false;

number型(数値型)

• 整数＋小数も含めた数値の型

number型の特殊な値

• NaN:非数(not-a-number)
  • 処理の結果が数値にならない場合、NaNで返す場合がある
• Infinity：無限大

// TypeScriptでの型注釈付きの例
let integer: number = 42;
let decimal: number = 3.14;
let notANumber: number = NaN;
let infinite: number = Infinity;

// JavaScript（型注釈なし）
let result = 10 / 0; // Infinity
let notNumber = 0 / 0; // NaN

string型(文字列型)

• "", '', `` どれで囲んでもstring型になる
  • 基本的に "" を使う
  • 文字列に "" が含まれる場合は '' を使う
  • 式を入れたい時は `` を使う
• テンプレートリテラル
  • `` で囲んだ時、改行と式を含められる
  • ${count}名

// TypeScriptでの型注釈付きの例
let singleQuote: string = "Hello";
let doubleQuote: string = "World";

// テンプレートリテラル（改行や式を埋め込める）
let count: number = 3;
let message: string = `現在、${count}名のユーザーがいます。`;

// JavaScript（型注釈なし）
let singleQuote = "Hello";

null型

• 値がないことを示す

// TypeScriptでの型注釈付きの例 (strictNullChecksが有効な場合、null型の変数にしか代入できません)
let data: null = null;

// JavaScript（型注釈なし）
let user = { name: "Alice" };
user.name = null; // 値を意図的に「空」としてリセット

undefined型

• 未定義なことを示す
  • 変数に値がセットされていない時など

// TypeScriptでの型注釈付きの例
let value: undefined = undefined;
let notInitialized: number | undefined; // 値が数値または未定義であることを示す

// JavaScript（型注釈なし）
let a; // undefinedが自動的に代入される
let obj = {};
console.log(obj.prop); // オブジェクトにないプロパティにアクセス -> undefined

---

undefined と null、迷ったら undefined

undefined と null の明確な違い

• nullは開発者が意図的に使用しない限り発生しない
  • 変数に値がない ＝ undefined
  • オブジェクトにないプロパティにアクセス = undefined
  • 関数の戻り値がない ＝ undefined
• チームで開発する上で、どちらかに統一するなら undefined が良さそう
  • 自然に発生する undefined を null に統一しようとするのは大変

---

symbol型

• 値が一意になる値
• 値が同じでも、初期化した場所が違うと false になる
• アプリケーションを開発する場合では、あまり使う機会ない

const s1 = Symbol("foo");
const s2 = Symbol("foo");

console.log(s1 === s1); // true

console.log(s1 === s2); // false

bigint型

• number型よりも大きい整数を扱える
• 整数値の末尾に nをつけて書く
  • const x = 100n;
• bigint型とnumber型を計算するときは、どっちかに型を合わせる
  • 暗黙的な型変換が行われないため

// TypeScriptでの型注釈付きの例
const largeNumber: bigint = 9007199254740991n; // number型の最大安全整数より大きい
const anotherLarge: bigint = 1n + 2n; // bigint同士の計算

// エラーになる例: number型とbigint型をそのまま計算できない
const result = 100 + largeNumber; 
// エラー: Operator '+' cannot be applied to types '100' and 'bigint'.

// どちらかに型を合わせる必要がある例
const num: number = 100;
const convertedResult = BigInt(num) + largeNumber; 
console.log(convertedResult); // 9007199254741091n

さいごに

次はオブジェクトについて読んでみようと思います！

アドカレ2025が開催中！

今年もアドカレ開催中です
面白そうなカレンダーがたくさんです！

特設サイト ↓

ギフトカードや Airpods, iPadなど、豪華賞品すぎるプレゼントカレンダーは必見！ ↓

参考