JavaScriptに関するお知らせ

SINCE2019
ホーム
>
【TS】「配列の中のどれか1つのオブジェクト」みたいな型の定義

【TS】「配列の中のどれか1つのオブジェクト」みたいな型の定義


こんにちは!TypeScriptの型を雰囲気でやってるMizutani(@sirycity)です。ふいんき。

てなわけで今日はそんな型についてです。なにげにTypeScriptの記事は初かも。

配列の中のどれか

たとえばこんな配列があったとして…

const people = [
  { name: '太郎', age: 60 },
  { name: '次郎', age: 35 },
  { name: '三郎', age: 71 },
]

この中のどれか1つが引数として想定される、みたいな関数があったとします。こんなかんじに。

const greet = p => {
  ;`こんにちは!僕は${p.name}。年齢は${p.age}。よろしくね`
  // こんにちは!僕は太郎。年齢は60。よろしくね
}

とくに考えないとこんな型を付けたくなりますね。…なるよね?

type Person = {
  name: string
  age: number
}

const greet = (p: Person) => // 略

[number]を使った指定

この型指定、こう書くことでより綺麗にできます。↓

const people = [
  {name: '太郎', age: 60},
  {name: '次郎', age: 35},
  {name: '三郎', age: 71},
] as const

type Person = typeof people[number]

const greet = (p: Person) => // 略

まずは配列にas constを付けてこの配列は変化しないって宣言します。…なんかすごく冗長というか、最初から付けとけよ!って思うかもしれませんが歴史的経緯によるものです。とりあえずas constは付けるって覚えといても良いと思います。

んで次に、型定義をtypeof 配列の名前[number]みたいに書きます。このnumberってやつはこの配列の中のオブジェクトどれか1つみたいな意味です。[number]です。['number']じゃないですよ!

さいごに

以上です。TypeScript詳しい人ならなんてことない記事ですね。でも該当する記事が見つからなかったので記事にしてみました。参考になると嬉しいです!おわり。



Android版楽天ペイのタッチ決済はGooglePayとの併用が難解
PREV
2022-10-03
Android版楽天ペイのタッチ決済はGooglePayとの併用が難解

【CSS】tailwindで改行する時はwhitespace-nowrap(スペル注意!)
NEXT
2022-10-31
【CSS】tailwindで改行する時はwhitespace-nowrap(スペル注意!)