分割代入におけるデフォルト値
デフォルト値と型注釈を安全に組み合わせます。
「分割代入におけるデフォルト値」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
空欄を埋める
分割代入のデフォルト値は、プロパティや要素がない場合、または undefined の場合に代替値を提供します。TypeScript の型推論と組み合わせることで、オプション設定を使いやすく安全にできます。
オブジェクトの分割代入でデフォルト値を指定する
バインディングの後に = value と書くと、代替値を指定できます。プロパティがない場合、または undefined の場合は、代わりにデフォルト値が使われます。
const opts: { count?: number } = {}
const { count = 0 } = opts
console.log(count) // 0オプショナルプロパティとデフォルト値
デフォルト値はオプショナルな（?）プロパティと自然に組み合わせられます。デフォルト値によって undefined のケースがなくなるため、結果の変数はオプショナルではない型になります。
interface Opts { retries?: number }
function connect(opts: Opts) {
const { retries = 3 } = opts
// retries is number, not number | undefined
return retries * 2
}
console.log(connect({}))デフォルト値と推論される型
型注釈を付けない場合、TypeScript はデフォルト値から変数の型を推論します。ここでは 0 によって、count は number になります。
const settings: { count?: number; label?: string } = { label: "hi" }
const { count = 0, label = "none" } = settings
console.log(count, label) // 0 hiデフォルト値を適用するのは undefined だけ
注意が必要な点として、デフォルト値が適用されるのは undefined の場合だけです。0、""、null のような、それ以外の falsy 値には適用されません。これらの値は変更されず、そのまま渡されます。
const { x = 10 } = { x: 0 }
console.log(x) // 0, not 10 — 0 is not undefined
const { y = 10 } = { y: undefined as number | undefined }
console.log(y) // 10関数パラメーターのデフォルト値
分割代入するパラメーターにデフォルト値を指定すると、オプションを簡単に扱えます。シグネチャ内で、各フィールドに独自の代替値を指定できます。
function draw({ x = 0, y = 0 }: { x?: number; y?: number }) {
return x + "," + y
}
console.log(draw({ x: 5 })) // 5,0パラメーター全体にデフォルト値を指定する
呼び出し側が引数オブジェクト全体を省略できるようにするには、パラメーター自体に {} をデフォルト値として指定します。これを指定しないと、引数なしで呼び出したときにエラーが発生します。
function draw({ x = 0, y = 0 }: { x?: number; y?: number } = {}) {
return x + "," + y
}
console.log(draw()) // 0,0名前変更とデフォルト値
1つのバインディングで、名前変更とデフォルト値の指定を同時に行えます。先に名前を変更し、新しい名前の後にデフォルト値を追加します。
const { count: total = 0 } = { } as { count?: number }
console.log(total) // 0計算されるデフォルト値
デフォルト値には、前のバインディングを参照する式など、任意の式を指定できます。値が実際にない場合にだけ、遅延評価されます。
function make({ width = 100, height = width }: { width?: number; height?: number } = {}) {
return width + "x" + height
}
console.log(make({ width: 50 })) // 50x50配列のデフォルト値のまとめ
デフォルト値は配列の分割代入でも機能し、要素がない場合または undefined の場合に、位置ごとに適用されます。
const [a = 1, b = 2, c = 3] = [10, undefined]
console.log(a, b, c) // 10 2 3デフォルト値が活躍する場面
デフォルト値はオプションオブジェクトに最適です。呼び出し側は必要なものだけを指定でき、関数が適切な代替値を補います。また、推論される型から undefined を取り除けるため、関数本体も簡潔になります。
interface Config { debug?: boolean; level?: number }
const init = ({ debug = false, level = 1 }: Config = {}) => debug ? level : 0
console.log(init({ debug: true, level: 5 }))クイックチェック
分割代入のデフォルト値についての理解度を確認しましょう。
まとめ
分割代入のデフォルト値（= fallback）は、値がない場合または undefined の場合にだけ適用され、それ以外の falsy 値には適用されません。オプショナルプロパティの型から undefined を取り除くことができ、推論または型注釈による指定、名前変更、前のバインディングの参照にも対応しています。オプションオブジェクトでは、パラメーターに {} をデフォルト値として指定すると、呼び出し側で引数全体を省略できます。
よくある質問
「分割代入におけるデフォルト値」レッスンは無料ですか？
はい。「分割代入におけるデフォルト値」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「分割代入におけるデフォルト値」で何を学びますか？
デフォルト値と型注釈を安全に組み合わせます。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「分割代入におけるデフォルト値」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- オブジェクトの分割代入の型
- 配列とタプルの分割代入
- 分割代入におけるデフォルト値
- ネストした分割代入パターン