CodePark/ questions / Functions & satisfies
START PRACTICINGPRACTICE
Frontend question · TypeScript › Functions & satisfies

What is the difference between an optional property name?: string and name: string | undefined?

type A = { name?: string };
type B = { name: string | undefined };

const a: A = {};                     // ok
const b: B = {};                     // error: name is missing
const b2: B = { name: undefined };   // ok

With name?: string, you may leave the property out. With name: string | undefined, you must write the property, even if its value is undefined.

With name?: string, reading the property gives string | undefined.

With name: string | undefined, the key is required. This is useful when you want callers to choose a value on purpose instead of forgetting the field.

The same rule applies to parameters:

  • f(x?: string) can be called as f().
  • f(x: string | undefined) must be called with an argument.

By default, an optional property also accepts an explicit undefined. The exactOptionalPropertyTypes option changes that. With it on, TypeScript treats a missing key and a key set to undefined as different things.

  • ? means you may leave the key out.
  • | undefined means the key is required, but its value may be undefined.
  • The same rule applies to function parameters.
  • exactOptionalPropertyTypes makes a missing key different from a key set to undefined.