Guppi StudioDRILL 06 / 安全な分岐
タプルと分割代入
要素数と位置ごとの型が決まった配列を、名前の付いた変数へ分けます。
COURSE ROUTETypeScript Foundation
0 / 8
YOUR TASK
formatCoordinate() を完成させる
x座標とy座標を持つタプルを受け取り、`x: 3, y: 4` の形式で返してください。
- 入力
- point は二つの数値を持つ読み取り専用タプルです。
- 出力
- 各位置へ名前を付けた文字列を返します。
BEFORE CODING
二つの数値に x と y の役割を持たせる
number[] だけでは要素数が分かりません。readonly [number, number] と書けば、0番目と1番目に数値が一つずつ入る形を表せます。分割代入で二つの位置へ x と y という名前を付けます。
[3, 4] → const [x, y] = point → x: 3, y: 4 タプルは位置にも意味がある
このタプルでは0番目が x、1番目が y です。順序と長さが型に含まれるため、要素を取り違えたコードに気付きやすくなります。
readonly は入力を守る
関数は座標を読むだけです。readonly を付けると push や代入ができなくなり、受け取った座標を変更しないことが型にも残ります。
SYNTAX RECALL
確認する構文
type Point = readonly [number, number];
const [x, y] = point;- [number, number] で長さと位置の型を決める
- readonly で入力を変更しない意図を示す
- 分割代入で x と y を取り出す
STEPWISE HINTS
ヒント
01最初の一手
引数の型は `readonly [number, number]` と書けます。
02処理の組み立て
`const [x, y] = point;` で二つの値を取り出します。
03コードの形
取り出した値を `x: ${x}, y: ${y}` の形へ埋め込みます。
AFTER ACCEPTED
解説
AC 後に解説が開きます
まずは自分の言葉で方針を説明し、コードに落としてみましょう。