Item型を設計せよ
初段 / 目安 20分
凛さんが白板の前に立ちました。書かれているのは、開発室のメンバーそれぞれが書いた「商品」のコードです。ある人は title、ある人は name、ある人は itemName。価格を文字列で持っている人までいます。
「出品データの形が人によってバラバラです。interface Item として正式に定義を。画像URLは省略可能、id は書き換え不可で」
interface は、オブジェクトの形を宣言する道具です。どんなプロパティが、どんな型で入っているのかを1箇所に書いておくと、以後そのオブジェクトを触るすべての場所で TypeScript が形を見張ってくれます。名前を titel と打ち間違えれば、その場で赤くなります。
今回の指定は2つあります。
1つめは省略可能なプロパティです。プロパティ名のうしろに疑問符を1つ付けると、「あってもなくてもよい」という意味になります。ただし strict が効いているので、省略可能なプロパティを読んだ値は「その型、または未定義」として扱われます。そのまま文字列として使うことはできません。存在するかどうかを確かめてから使う必要があります。これは面倒ではなく、事故を1つ潰しているのだと考えてください。
2つめは書き換え不可です。プロパティ名の前に readonly を付けると、代入しようとした時点でコンパイルが止まります。出品IDのように、後から変わってはいけない値に付けます。
完成条件
interface Item を定義し、それを使う関数 itemLabel を作ってください。
Item の中身は次のとおりです。
idは数値。書き換え不可nameは文字列priceは数値imageUrlは文字列。省略可能
itemLabel は Item を1つ受け取り、次の形の文字列を返します。
プレーンテキスト
#12 みかん 380円 画像あり- 画像URLがあるときは末尾を
画像あり、ないときは画像なしにすること - 画像URLが空文字のときも
画像なしとして扱うこと
進め方
白紙から書いてください。手が止まったらヒントを開けます。ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。
interface の宣言は関数の外に書きます。プロパティのあいだの区切りは、セミコロンでも改行だけでもかまいません。
要件
- interface Item を関数の外で定義すること
- Item は id が数値で書き換え不可、name が文字列、price が数値、imageUrl が文字列で省略可能
- 関数名は itemLabel、引数は Item を1つ、戻り値は文字列
- 画像URLがあるときは末尾を「画像あり」、ないときや空文字のときは「画像なし」にすること
- 「#12 みかん 380円 画像あり」の形の文字列を return で返すこと
入出力例
itemLabel({"id":12,"imageUrl":"https://fleama.example/12.jpg","name":"みかん","price":380}) → "#12 みかん 380円 画像あり"
itemLabel({"id":7,"name":"中古スニーカー","price":4200}) → "#7 中古スニーカー 4200円 画像なし"
itemLabel({"id":33,"imageUrl":"","name":"手編みマフラー","price":1800}) → "#33 手編みマフラー 1800円 画像なし"
itemLabel({"id":1,"imageUrl":"https://fleama.example/1.png","name":"レトロ湯呑み","price":0}) → "#1 レトロ湯呑み 0円 画像あり"
itemLabel({"id":205,"name":"商店街トートバッグ","price":990}) → "#205 商店街トートバッグ 990円 画像なし"ヒント
前のヒントを開くと次が開きます。開かずに解けると未開封クリアです
