【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詳しい人ならなんてことない記事ですね。でも該当する記事が見つからなかったので記事にしてみました。参考になると嬉しいです!おわり。
PREV
2022-10-03
Android版楽天ペイのタッチ決済はGooglePayとの併用が難解
NEXT
2022-10-31
【CSS】tailwindで改行する時はwhitespace-nowrap(スペル注意!)