【TypeScript勉強記】：(自分用)型定義チートシート

学習素材

【日本一わかりやすいTypeScript入門】基本の型定義とアノテーション
【日本一わかりやすいTypeScript入門】関数のパラメーターと戻り値に型をつける
【日本一わかりやすいTypeScript入門】型エイリアス(type)でオブジェクトの型定義
【日本一わかりやすいTypeScript入門】積極的に使いたい配列・タプルの型定義
【日本一わかりやすいTypeScript入門】ジェネリック型を使いながらポリモーフィズムを理解する

基本的な型定義

プリミティブ型

	内容
string	全ての文字列
number	整数、浮動小数点、正数、負数、無限大、NaN(非数)など全ての数値
boolean	trueとfalse

存在しないことを表現する型

	内容
null	値が欠如している状態
undefined	初期化されていない、かつ値が割り振られていない状態

＊できる限りundefinedを使う

避ける型

	内容
any	どんな型でも許容する、安全でない型
unknown	どんな型か不明。代入する値によって型が変わる

＊APIで返ってくる値の型がわからない時などに、if文と合わせて使う場合がある

関数の型定義

関数で使われる型

	内容
void	return文を持たない関数の戻り値(alertを出すだけの関数、など)
never	決して戻ることのない関数の戻り値

関数の型定義の仕方

1. パラメーター：関数宣言時に呼び出される値
2. 引数：関数を呼び出す時に渡す値
3. 戻り値：関数が返す値

オプションとデフォルト

	順序	内容
オプションパラメーター	パラメーターの最後に記述	オプショナル(?)をつける
デフォルトパラメーター	関係なく記述可能	イコール(=)で指定

可変長変数に型をつける

可変長変数は、関数呼び出し時に、引数を幾つでも渡せる。
しかし、安全ではないので、レストパラメーターを使う。

	順序	内容
レストパラメーター	パラメーターの最後に一つだけ指定可能	...を指定

呼び出しシグネチャ

どのような関数なのかを定義する型定義。
記法はオブジェクトに、省略記法はアロー関数と似た記法

オブジェクトの型定義

オブジェクトの型定義

「構造的部分型」
＝ あるオブジェクトの構造だけを定義し、オブジェクトの名前は気にしない

object型はobjectであることを伝えるだけで、使用しない

const a: object = {
    name: 'Taro',
    age: 20
 }
a.name // Property 'name' does not exist on type 'object'.

オブジェクトリテラル

• 構造を定義
• 各プロパティに型を指定

let country: {
  language: string,
  name: string
} = {
  language: 'Japanese',
  name: 'Taro'
}

特別なプロパティ

• オプショナル（?）のついたプロパティ：なくてもOK
• readonlyのついたプロパティ：上書きできない

const fogefoge: {
    age: number,
    lastName: string,
    readonly firstName: string,
    gender?: string
  } = {
    age: 20,
    lastName: 'Yamada',
    firstName: 'Taro'
 }
 
 fogefoge.gender = 'male'
 fogefoge.lastName = 'Kamado'
 fogefoge.firstName = 'Taro' // Cannot assign to 'firstName' because it is a read-only property.

インデックスシグネチャ

オブジェクトが複数のプロパティを持つ可能性を示す

• keyの型はstringかnumberのみ

const capitals: {
   [sountryName: string]: string
 } = {
   Japan: 'Tokyo',
   Korea: 'Seoul'
 }
 capitals.China = 'Beijing'
 capitals.Canada = 'Ottawa'

型エイリアスで型定義を再利用

型エイリアスとは

• typeを使って、型に名前をつけて宣言できる
• 同じ型を何度も定義する必要がなく、再利用できる
• 型に名前をつけて、変数の役割を明確にする

type Country = {
  capital: string,
  language: string,
  name: string
}
const japan: Country = {
  capital: 'Tokyo',
  language: 'Japanese',
  name: 'Japan'
}
// 再利用
const usa: Country = {
  capital: 'Washington, D.C.',
  language: 'English',
  name: 'United States of America'
}

合併型(Union Types)と交差型（Intersection Types)

	順序
合併型(Union Types)	型Aか型Bどちらかの型を持つ
交差型（Intersection Types)	型Aと型B両方の型を持つ(A, Bに共通する型ではない)

type Knight = {
  hp: number,
  sp: number,
  weapon: string,
  swordSkill: string
}

type Wizard = {
  hp: number,
  mp: number,
  weapon: string,
  magicSkill: string
}

// 合併型
type Adventure = Knight | Wizard

// 交差型
type Paladin = Knight & Wizard

// Knight寄りの冒険者
const adventure1: Adventure = {
  hp: 100,
  sp: 30,
  weapon: '木の剣',
  swordSkill: '三連斬り'
}

// Wizard寄りの冒険者
const adventure2: Adventure = {
  hp: 100,
  mp: 30,
  weapon: '木の杖',
  magicSkill: 'ファイヤボール'
}

const paladin: Paladin = {
  hp: 30,
  sp: 30,
  mp: 30,
  weapon: '木の剣',
  swordSkill: '三連斬り',
  magicSkill: 'ファイヤボール'
}

配列の型定義

配列の型定義は、2種類ある。

// 2種類のnumber型配列の定義
const odd: number[] = [1, 3, 5]
const even: Array<number> = [2, 4, 6]

シンプルな配列の型定義

// stringの配列
const colors: string[] = ['red', 'blue'] 
colors.push('yellow') // OK
colors.push(123) // NG

合併型の配列

const ids: (string | number)[] = ["ABC", 123]
ids.push("DEF")
ids.push(456)

配列の型推論

const generateSomeArray = () => {
  const someArray = [] //any[]
  someArray.push(123) // number[]
  someArray.push("ABC") // (string | number)[]
  return someArray
}

const someArray = generateSomeArray()
someArray.push(456)

厳格な配列：タプル

タプルは、配列の要素数と型を定義できる。
可変長（レストパラメーター）を使うこともできる。

// OK
let response: [number, string] = [200, "OK"]
// NG
response = [400, "Bad Request", "Email parameter is missing"] // Type '[number, string, string]' is not assignable to type '[number, string]'. Source has 3 element(s) but target allows only 2.
response = ["400", "Bad Request"] // Type 'string' is not assignable to type 'number'

// 可変長（レストパラメーター）を使ったタプル
// ...によって、1つ目の要素以降は、何個でも良い
const girlFriends: [string, ...string[]] = ["kana", "Miku", "Keiko"]
girlFriends.push("Misa")

ジェネリック型

ジェネリック型 = 「総称型（まとめて表すもの）」
ジェネリック型は、型を抽象化する。

以下のように、型の種類は異なるが、同じデータ構造を持っているので共通化したい場合、

const stringReduce = (array: string[], initialValue: string): string => {}
const numberReduce =(array: number[], initialValue: number): number => {}

ジェネチック型パラメーターで型をパラメーター化し、後から実パラメーターを渡す。
ジェネチック型パラメーターには、T, U, V, Wなどがよく使われる

type Reduce<T> = {
  (array: T[], initialValue: T): T
}

// 具体的な型をバインド
const reduce: Reduce<string> = (array, initialValue) => {}

ジェネリックの宣言方法

完全な呼び出しシグネチャ

1. シグネチャ全体にジェネリック型を割り当てる

type GenericReduce<T> = {
  (array: T[], initialValue: T): T
}

2. 個々のシグネチャにジェネリック型を割り当てる

type GenericReduce2 = {
  <T>(array: T[], initialValue: T): T
  <U>(array: U[], initialValue: U): U
}

省略記法

// 省略記法：シグネチャ全体にジェネリック型を割り当てる
type GenericReduce3<T> = (array: T[], initialValue: T) => T
// 省略記法：個々のシグネチャにジェネリック型を割り当てる
type GenericReduce4 = <T>(array: T[], initialValue: T) => T

例

型の種類は異なるが、構造が同じ

const stringReduce = (array: string[], initialValue: string): string => {
  let result = initialValue
  for (let i = 0; i < array.length; i++) {
    result += array[i];
  }
  return result
}
const numberReduce = (array: number[], initialValue: number): number => {
  let result = initialValue
  for (let i = 0; i < array.length; i++) {
    result += array[i];
  }
  return result
}

共通化後

// 共通化
type GenericReduce<T> = {
  (array: T[], initialValue: T): T
}

const genericStringReduce: GenericReduce<string> = (array, initialValue) => {
  let result = initialValue
  for (let i = 0; i < array.length; i++) {
    result += array[i];
  }
  return result
}

const genericNumberReduce: GenericReduce<number> = (array, initialValue) => {　
...(略)...
}

2つ以上のジェネチック型パラメーターを扱う

// 2つのジェネチック型パラメーターを使った、map関数のシグネチャ
// fn(itemという引数を持つコールバック関数)、返り値はUの配列
type Map<T, U> = (array: T[], fn: (item: T) => U) => U[]

// 文字列を渡して数値を返す関数
const mapStringsToNumbers: Map<string, number> = (array, fn) => {
  let result = []
  for (let i = 0; i < array.length; i++) {
    const item = array[i]
    result[i] = fn(item)
  }
  return result
}
const numbers = mapStringsToNumbers(["123", "456", "789"], (item) => Number(item))
// [123, 345, 678]

ポリモーフィズム

呼び出し側の共通化のことを言う。
polymorphism
= 多態性・多相性 = 色々な形に変化できること

TypeScriptにおける呼び出し側の共通化とは、

• 型を抽象化する
• 呼び出すときに具体的な型を渡す^[1]

脚注

1. 画像引用元