【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(スペル注意!)
LINK
リンク
Twitter
GitHub
TAGS
タグ
LATESTS
最新の記事
POPULAR
人気の記事
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介