TypeScript 中的介面預設值

介面無法指定預設值：它描述的是物件在 TypeScript 編譯期檢查時的形狀，編譯後便會從產生的 JavaScript 中移除。若要使用預設值，請將可設定的屬性標記為選用，並在執行期程式碼中套用備援值，例如透過函式建立完整的設定物件。

在 TypeScript 中，Interface 是什麼

TypeScript 使用結構型別：物件只要具備介面所要求且型別相容的屬性，就符合該介面。因此，介面是編譯期契約，而不是建構子或執行期物件。例如，interface LabeledValue { label: string } 描述了會讀取 label 的函式所接受的物件形狀；只要物件有字串型別的 label，即使還有其他屬性，也符合這項契約。宣告的型別能在撰寫程式時協助編譯器檢查程式碼，但編譯後不會以 JavaScript 值的形式存在。如果應用程式收到 JSON 或其他外部值，請先另外驗證資料，再將它視為 LabeledValue。

介面不會建立值，因此在介面中宣告屬性並不會初始化該屬性。必須透過類別建構子、函式或其他 JavaScript 程式碼建立或修改實際物件。了解這項差異，是掌握如何為介面所描述的值提供預設值的關鍵。

在 TypeScript 中使用選用屬性設定 Interface 的預設值

在 TypeScript 中，選用屬性允許呼叫端省略值，而預設值則由執行期程式碼套用。以下僅示範 TypeScript 語法：宣告 SquareConfig、指定函式參數的型別，並傳入一個屬性名稱拼錯的新物件常值：

interface SquareConfig { color?: string; width?: number }; function createSquare(config: SquareConfig) { return config; }; createSquare({ clor: "black" });

編譯器會指出 clor 不是 SquareConfig 的已知屬性；改成 color 就符合宣告的物件形狀。這項編譯期檢查能在呼叫處抓出拼字錯誤，但介面不會加入預設值，也不會驗證任意執行期資料。接下來的 JavaScript 範例則是獨立的：它示範執行期程式碼如何套用備援值，而非 TypeScript 型別檢查。

JavaScript 範例展示執行期程式碼如何套用預設設定與自訂設定。這是獨立可用的範例，並使用空值合併運算子：值為 null 或 undefined 時會採用備援值，其他已提供的值則會保留。

function createSquare(config) {
  const color = config.color ?? "white";
  const width = config.width ?? 10;
  return { color, area: width * width };
}

const defaultSquare = createSquare({});
const customSquare = createSquare({ color: "black", width: 5 });

console.log(JSON.stringify(defaultSquare));
console.log(JSON.stringify(customSquare));

{"color":"white","area":100}
{"color":"black","area":25}

選用屬性不會自動產生預設值，因此請在建立物件的函式（或其他執行期操作）中設定備援值。回傳完整物件可讓後續程式碼取得明確的結果形狀，其中 color 和 area 都是必要屬性。如果 0、false 或空字串也應觸發備援值，請改用真值檢查（||）；應依據該屬性允許的值來選擇。讀取函式參數的屬性前，必須先確保參數是物件。若要從選填的外部輸入建立設定，請先正規化或驗證輸入，再將完整物件傳給應用程式的其他部分。