TypeScript の知らなかった書き方や、よく使うけど使い方を忘れてしまう書き方を備忘録としてメモするスクラップ

オブジェクトのプロパティから型情報を抽出

const obj = {
  id: 1,
  name: "john",
}

type result_str = typeof obj["name"] // type result_str = string
type result_num = typeof obj["id"]   // type result_num = number

shimotsu

配列化されたオブジェクトのプロパティから型情報を抽出

const obj = [
  {
    id: 1,
    name: "john",
  }
]

type result_str = typeof obj[number]["name"]
type result_num = typeof obj[number]["id"]

shimotsu

任意の型から一部のプロパティを抜いた新たな型を作る

Omit<T, K> を使う。

// ベースとなる型
export type someObj = {
  id: number
  name: string
  age: number
}

export type result = Omit<someObj, "age"> // someObj から age だけが抜き出される

shimotsu

任意の型のすべてのプロパティをオプショナルにする

Partial<T> を使う。

export type someObj = {
  id: number
  name: string
  age: number
}

export type result = Partial<someObj> // id, name, age がすべて optional になる

shimotsu

任意の型どうしを統合させる

& を使う。

type obj1 = {
  id: number
  name: string
}

type obj2 = {
  age: number
  height: number
}

type obj3 = obj1 & obj2 // type obj3 = obj1 & obj2

shimotsu

keyof T について

「type Tのプロパティ名の直和型」を表現するtypeが記述できる。

type person = {
  id: number
  name: string
  height: number
}

type personKey = keyof person // "id" | "name" | "height"

const personKey1: personKey = "id" // OK
const personKey2: personKey = "name" // OK
const personKey3: personKey = "height" // OK
const personKey4: personKey = "age" // NG

shimotsu

typeof 演算子について

typeof 演算子でオブジェクトの型を取得できる。

const person = {
  id: 1,
  name: "shimotsu",
  height: 165,
}

type personType = typeof person

// OK
const personOK: personType = {
  id: 2,
  name: "tanaka",
  height: 170,
}

// NG
const personNG: personType = {
  id: 3,
  name: "suzuki",
  height: 175,
  age: 32 // personType に含まれていないのでNG
}

shimotsu

T[K] について

「T に対してK型でアクセスして得られるtype」を表現できる。

type Person = {
  id: number,
  name: string,
  height: number,
}

type PersonName = Person['name'] // string
const person1Name: PersonName = "shimotsu"

type PersonHeight = Person['height'] // number
const person1Height: PersonHeight = 165

shimotsu

typeof "object value" [keyof typeof "object value"] について

上記の書き方をまとめると、typeof "object value" [keyof typeof "object value"] という書き方ができる。

const ACTIVITY_LEVEL = {
  LITTLE : 1.2,
  LIGHT: 1.375,
  MODERATE: 1.55, 
  HEAVY: 1.725,
  VERY_HEAVY: 1.9
} as const

type TypeOfActivityLevel = typeof ACTIVITY_LEVEL
type KeyOfActivityLevel = keyof typeof ACTIVITY_LEVEL
type ActivityLevel = TypeOfActivityLevel[KeyOfActivityLevel]

const initialActivityLevel: ActivityLevel = 1.2 // OK
const finalActivityLevel: ActivityLevel = 2.0 // NG