How to Interface Default Value in TypeScript

An interface cannot assign default values: it describes an object’s shape during TypeScript’s compile-time checks and is erased from the emitted JavaScript. To use defaults, mark configurable properties as optional and apply fallback values in runtime code, such as a function that builds a complete configuration.

What Is Interface in TypeScript

TypeScript uses structural typing: an object is compatible with an interface when it has the required properties with compatible types. An interface therefore acts as a compile-time contract, not a constructor or runtime object. For example, interface LabeledValue { label: string } describes the shape accepted by a function that reads label; an object with a string label can satisfy that contract even if it also has other properties. The declared type helps the compiler check code while you write it, but it is not present as a JavaScript value after compilation. If an application receives JSON or another external value, validate that data separately before treating it as a LabeledValue.

Because interfaces do not create values, declaring a property in one does not initialize it. A class constructor, function, or other JavaScript code must create or modify the actual object. This distinction is the key to understanding how to provide interface defaults.

Use Optional Properties to Set Interface Default Values in TypeScript

In TypeScript, optional properties let callers omit values, while runtime code applies the defaults. The syntax-only TypeScript example below declares SquareConfig, types a function parameter, and passes a fresh object literal with a misspelled property:

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

The compiler reports that clor is not a known property of SquareConfig; changing it to color satisfies the declared shape. This compile-time check catches a typo at the call site, but interfaces do not add defaults or validate arbitrary runtime data. The following JavaScript example is separate: it shows runtime code applying fallback values, rather than a TypeScript type check.

The JavaScript example shows how runtime code applies default and custom settings. It is self-contained and uses the nullish coalescing operator so null or undefined selects the fallback, while other supplied values are kept.

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}

Optional properties do not make values default automatically, so put the fallback in the function (or another runtime operation) that constructs the object. Returning a complete object gives later code a clear result shape in which color and area are required. If 0, false, or an empty string should also trigger a fallback, use a truthiness check (||) instead; choose based on the values your property is allowed to contain. The function’s parameter should be an object before its properties are read. When building configuration from optional external input, normalize or validate that input first, then pass a complete object to the rest of the application.