タプルの分割代入
CoddyのJavaScriptジャーニー「Introduction To TypeScript」セクションの一部 — レッスン 17/73。
インデックスを使用してタプルの要素にアクセスする方法は完璧に動作しますが、タプルから値を取り出すためのさらにエレガントな方法があります。それが分割代入(destructuring)です。このJavaScriptの機能はTypeScriptの型定義されたタプルとシームレスに動作し、1行でタプルの値を個別の変数に展開することができます。
配列の分割代入では、代入の左側に角括弧を使用して、タプルの各位置に対応する新しい変数を作成します:
let userInfo: [number, string] = [42, "Alice"];
let [id, name] = userInfo;
console.log(id); // 42 (TypeScriptはこれがnumberであることを認識しています)
console.log(name); // "Alice" (TypeScriptはこれがstringであることを認識しています)このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
チャレンジ
簡単数値(従業員ID)とそれに続く文字列(従業員名)を保持する、employee という名前のタプルを作成してください。ID 1001 と名前 "Sarah Johnson" で初期化します。
分割代入を使用して、employee タプルから値を抽出し、empId と empName という名前の2つの別々の変数に代入してください。
緯度と経度の座標を表す2つの数値を保持する、coordinates という名前の別のタプルを作成してください。値 40.7128 と -74.0060 で初期化します。
分割代入を使用して、location タプルから値を抽出し、latitude と longitude という名前の2つの別々の変数に代入してください。
分割代入された変数を、以下の順序でそれぞれ別の行に出力してください:
- 従業員IDを出力する
- 従業員名を出力する
- 緯度を出力する
- 経度を出力する
チートシート
分割代入を使用すると、角括弧を使用して、タプルから値を抽出して1行で個別の変数に代入できます。
let userInfo: [number, string] = [42, "Alice"];
let [id, name] = userInfo;
console.log(id); // 42 (TypeScriptはこれがnumberであることを認識しています)
console.log(name); // "Alice" (TypeScriptはこれがstringであることを認識しています)TypeScriptは、タプルの型定義に基づいて、分割代入された各変数の型情報を保持します。
自分で試してみよう
// TODO: ここにコードを書いてください
// ID 1001、名前 "Sarah Johnson" の従業員タプルを作成します
// 分割代入を使用して empId と empName を抽出します
// 値 40.7128 と -74.0060 を持つ座標タプルを作成します(変数名として 'location' を使用しないでください)
// 分割代入を使用して latitude と longitude を抽出します
// 指定された順序で4つの変数すべてを出力します
// 結果を出力します(必要に応じてコメントを解除し、修正してください)
// console.log(empId);
// console.log(empName);
// console.log(latitude);
// console.log(longitude);このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
Introduction To TypeScriptのすべてのレッスン
2基本の型
基本の型: str, num, boolean'any' 型: 脱出ハッチ'unknown' 型'null' と 'undef' の扱い型推論の実践明示的な型アノテーションまとめ:基本の型の演習5型:エイリアス、ユニオン型、インターセクション型
プリミティブ型の型エイリアスユニオン型 ('|')ユニオン型の扱い方リテラル型インターセクション型 ('&')型エイリアスの組み合わせまとめ:高度な型の組み合わせ