Using Optional Properties and Default Values in TypeScript Interfaces

In TypeScript, interfaces are used to define the shape of objects. When working with interfaces, you may encounter situations where you want to assign default values to properties or make them optional. In this tutorial, we will explore how to achieve these goals using optional properties and other techniques.

Introduction to Optional Properties

Optional properties in TypeScript allow you to specify that a property can be absent from an object without causing a compiler error. To define an optional property, you use the ? symbol after the property name in the interface definition. Here’s an example:

interface IX {
  a: string;
  b?: any;
  c?: AnotherType;
}

With this definition, when creating an object of type IX, you are not required to provide values for properties b and c.

Using Optional Properties

Let’s see how optional properties work in practice:

let x: IX = {
  a: 'abc'
};

In this example, we create an object x of type IX without providing values for properties b and c. This is allowed because b and c are defined as optional properties.

You can then assign values to the optional properties later:

x.b = 123;
x.c = new AnotherType();

Alternative Approach: Using Partial Mapped Type

Another way to achieve similar flexibility is by using the Partial mapped type provided by TypeScript. The Partial type makes all properties of an interface optional. Here’s how you can use it:

interface IX {
  a: string;
  b: any;
  c: AnotherType;
}

let x: Partial<IX> = {
  a: 'abc'
};

In this case, x is of type Partial<IX>, which means all properties are optional.

Setting Default Values

While interfaces themselves cannot have default values (since they are purely compile-time constructs and do not exist at runtime), you can achieve similar behavior by defining a class that implements the interface or by using a factory function. Here’s an example of how you could define a class:

class IXClass implements IX {
  a: string;
  b: any;
  c: AnotherType;

  constructor(obj?: IX) {
    this.a = obj?.a ?? 'defaultA';
    this.b = obj?.b ?? null;
    this.c = obj?.c ?? new AnotherType();
  }
}

And here’s how you might use a factory function:

function ixFactory(a: string, b?: any, c?: AnotherType): IX {
  return {
    a,
    b: b ?? null,
    c: c ?? new AnotherType()
  };
}

Conclusion

In conclusion, TypeScript provides several ways to handle optional properties and default values when working with interfaces. By using optional properties (? symbol), the Partial mapped type, or implementing classes with constructors that handle default values, you can write more flexible and expressive code. Understanding these techniques will help you design better data structures and improve your overall TypeScript coding skills.