オブジェクトの分割代入の型
名前変更構文と混同せずに、分割代入するオブジェクトプロパティに型を付けます。
「オブジェクトの分割代入の型」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
分割代入と型
オブジェクトの分割代入を使うと、オブジェクトからプロパティを取り出してローカル変数に代入できます。TypeScriptでは、分割代入する形に型注釈を付けられます。ただし、この構文には有名な落とし穴があります。正しく使えるように確認しましょう。
オブジェクトの基本的な分割代入
通常の分割代入では、名前を使ってプロパティを取り出します。TypeScriptは、元のオブジェクトから各変数の型を推論します。
const user = { name: "Ada", age: 36 }
const { name, age } = user
console.log(name, age) // Ada 36パターン全体への型注釈
分割代入する変数に型注釈を付けるには、型をパターン全体の後に置き、各変数ではなくオブジェクトの形を記述します。
const { name, age }: { name: string; age: number } = {
name: "Leo",
age: 5,
}
console.log(name, age)関数パラメーターの分割代入
よく使われるパターンとして、シグネチャ内でパラメーターオブジェクトを直接分割代入し、その形に型注釈を付ける方法があります。関数本体では、name と id が型付けされたローカル変数になります。
function greet({ name }: { name: string }) {
return "Hi " + name
}
console.log(greet({ name: "Sam" }))コロンによる混乱に注意
分割代入では、コロンは型注釈ではなく名前の変更を意味します。{ name: string } と記述すると、name の値を保持する string という名前の変数が作られます。これはほとんどの場合、意図したものではありません。
const user = { name: "Ada" }
const { name: renamed } = user // renamed holds "Ada"
console.log(renamed) // Ada
// 'name' is NOT defined here名前変更と型注釈を同時に行う
名前変更と型指定の両方が必要な場合は、コロンで名前を変更してから、パターン全体に型注釈を付けます。オブジェクトの形に対する型注釈では、元のプロパティ名を使用します。
const { name: who }: { name: string } = { name: "Ada" }
console.log(who) // Ada名前付きの型を使用する
複雑な処理では、インラインの形よりも名前付きの interface を使用することをお勧めします。読みやすく、再利用もできます。
interface User {
name: string
age: number
}
function show({ name, age }: User) {
console.log(name + " is " + age)
}
show({ name: "Ada", age: 36 })一部のプロパティだけを分割代入する
すべてのフィールドを取り出す必要はありません。必要なものだけを選べば、作成するローカル変数については、オブジェクトの残りの型は無視されます。
interface User { name: string; age: number; email: string }
function label({ name }: User) {
return name.toUpperCase()
}
console.log(label({ name: "ada", age: 1, email: "a@b.c" }))戻り値を分割代入する
関数がオブジェクトを返す場合は、結果をすぐに分割代入できます。戻り値の型がローカル変数に引き継がれます。
function makePoint(): { x: number; y: number } {
return { x: 1, y: 2 }
}
const { x, y } = makePoint()
console.log(x + y) // 3残りをまとめる
restパターンを使うと、残りのプロパティを新しいオブジェクトにまとめられます。TypeScript は、抽出したキーを元の型から除いた型として扱います。
interface User { id: number; name: string; age: number }
const u: User = { id: 1, name: "Ada", age: 36 }
const { id, ...rest } = u
console.log(id, rest.name, rest.age)インラインと名前付きのまとめ
インラインの形は、1回限りの小さなパターンには適しています。形が大きくなったり、繰り返し使ったりするようになったら、名前付きの型を使用します。そして、コロンは名前を変更し、型注釈は閉じ中かっこの後に付けることを覚えておきましょう。
interface Opts { verbose: boolean }
const run = ({ verbose }: Opts) => verbose ? "loud" : "quiet"
console.log(run({ verbose: true }))クイックチェック
型付きオブジェクトの分割代入についての理解度を確認しましょう。
まとめ
分割代入の型注釈はパターン全体の後に置き、オブジェクトの形を記述します。パターン内のコロンは、バインディングに型注釈を付けるのではなく、バインディングの名前を変更します。関数のパラメーターや戻り値は、形の型注釈または名前付きの型を使って分割代入し、必要なフィールドだけを取り出し、restパターンで残りをまとめます。
よくある質問
「オブジェクトの分割代入の型」レッスンは無料ですか？
はい。「オブジェクトの分割代入の型」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「オブジェクトの分割代入の型」で何を学びますか？
名前変更構文と混同せずに、分割代入するオブジェクトプロパティに型を付けます。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「オブジェクトの分割代入の型」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- オブジェクトの分割代入の型
- 配列とタプルの分割代入
- 分割代入におけるデフォルト値
- ネストした分割代入パターン