【初学者向け】TypeScript 型定義集

はじめに

TypeScriptの型定義について、
初学者がまずおぼえるべき型を一覧でまとめました。

型定義

string型（文字列）

let variant: string = "a"

number型（数値）

let variant: number = 1

boolean型（true / false）

let variant: boolean = true(false)

リテラル型

const variant = "a"  // リテラル型（"a"）

//型注釈
let variant: 1  // リテラル型（1）
variant = 2  // NG

豆知識（型推論 / 型の拡大）

詳細

// 型推論
<!-- constの場合 -->
const num = 1  // リテラル型（1）

<!-- letの場合 -->
let num = 1    // number型
→ 後続の処理で別の数値が再代入される可能性があるためnumber型に拡大推論される（型の拡大）

<!-- const変数を再代入した場合 -->
const NUM = 1  // リテラル型（1）
let num = NUM  // number型
→ number型に拡大推論される

// 型注釈
<!-- 型注釈で型を指定した場合 -->
const NUM: 1 = 1
let num = NUM  // リテラル型（1）
→ 型注釈によって拡大推論が防止される

型エイリアス

typeを用いて定義する。パスカルケース(PC/別称:UCC)が慣例。
※例文は後述

• ユニオン型 × 型エイリアス
• オブジェクト型 × 型エイリアス
• インターセクション型 × 型エイリアス

ユニオン型

let variant = a | b  // aまたはb

ユニオン型 × 型エイリアス

詳細

type BloodType = "A型" | "B型" | "O型" | "AB型"
let blood: BloodType = "BO型" // NG

オブジェクト型

const variant = {a: "文字列", b: 1}

オブジェクト型 × 型エイリアス

詳細

type A = {a: string, b: number}
const variant: A = {a: "文字列", b: 1} // OK
const variant: A = {a: "文字列", b: "文字列"} // NG

any型

何でも許可する。型チェックを回避して事前にエラーを起こさない。

原則、any型は使用しない。
理由: 利便性の反面、型の安全性が失われる。TypeScript言語メリットがなくなる。

unknown型（トップ型）

値の種類が不明（決まっていない）場合に利用する。
利用するときはtypeを明示する必要がある。（any型との違い）

let data: unknown = 1  // unknown型
if (typeof a === number) { ... } // {}内はnumber型として判定される

undefined型

変数が未定義の場合

value  // undefined型

null型

変数に値が空（なにもない）の場合

let initialVal = null  // null型

Array型

配列

const names = ["James", "Kylie", "Charlie"]  // string[]型
const ages = [5, 20, 36, 51, 78]  // number[]型

Tuple型

順序、型種類、要素数が決まっている配列

// [string, number, string] 型
let customer: [string, number, string] = ["James", 20, "A型"]
customer = ["James", "A型", 20]  // NG

インターセクション型

type C = A & B  // AかつB

インターセクション型 × 型エイリアス

詳細

type Name = {name: string}
type Age = {age: number}

type Person = Name & Age

const person: Person = {name: "James", age: 20}  // OK
const person: Person = {name: "James"}  // NG

void型

戻り値のない関数で指定する。

const FunctionA = (): void => { ... }  // {}内で戻り値が設定されていない場合

never型（ボトム型）

終着点がない場合。
例えば、再帰的な処理での無限ループや例外処理等で利用する。

const FunctionA = (): never => { throw new Error("エラー発生") }

const FunctionB = (): never => {
 while (true) {
  console.log("無限ループ中...")
 }
}

さいごに

ジェネリクスをはじめ、他にも便利で高次な型が存在するので勉強してみてください。