Object Properties

Optional vs Undefined Union in an Object:

type ExampleOptional = {
  name?: string;
};

let optional: ExampleOptional;

optional = { name: undefined };
optional = {};

type ExampleUnion = {
  name: string | undefined;
};

let union: ExampleUnion;

union = { name: undefined }; 
union = {}; // Error: name is missing

Function Parameters

Optional vs Undefined Union in function parameters:

function logOptional(message?: string) {
  console.log(message);
}

function logUnion(message: string | undefined) {
  console.log(message);
}

logOptional(undefined);
logOptional();

logUnion(undefined);
logUnion(); // Error: Expected 1 argument. `message` was not provided

Transcript

00:00

A common types question is, is there a difference between an optional member versus a member that has a union with undefined? And the answer is yes, there is a behavior difference. And that is what we will look at in this tutorial, along with some practical guidance on when to use which particular syntax. So let's go here. We have a type with a member name that is currently marked as optional. Having a member as optional means that a variable of this type can accept objects with the name either undefined or even the name completely excluded as well. However, if we have a type where the property is string

00:34

or undefined, then it can be initialized with something that has name pointing to the value undefined. However, it cannot be initialized with an object that is missing the name property. And that is the fundamental difference between these two types. One has a member that is truly optional versus the other has it required. But the values that you can provide include the literal, undefined, and as you can imagine, this optional versus required behavior becomes even more significant. When we look at functions as an example, we have a function that takes an optional message property versus a function that takes a message that can be string or undefined.

01:08

We can invoke the optional function with an undefined value or with no value whatsoever. Whereas the second function, we must provide that undefined value or a string value. But if we don't provide anything, we will get a compile time error. So the question is, which annotation should you use? My recommendation is to use the optional annotation unless you need to use the undefined value for an explicit use case. Let's take a look at an example. A limitation of using an optional parameter is that you cannot have required parameters follow an optional parameter.

01:39

This will result in a compile time error. However, if you have the annotation union with undefined, you can continue to add additional parameters and such. A call signature might be a requirement of some framework that you are using, in which case you would have to use the union with undefined instead of the generally preferred optional parameter. Now, another reason for using an explicit annotation with the union with undefined is that it can actually help you refactor difficult code bases. For example, consider the code base where we have the set config function that is used throughout our code base, and currently it takes an object with one property name of type string.

02:12

Now, if you wanted to add an additional property called priority, that would only kick in in a few cases. If we add this as optional, we would have to manually review all of the times that set config is called to determine if this property needs to be passed in or not. However, instead of marking it as optional, we use the union with undefined. We would get an error every single time the set config is used and we can simply navigate to next error one by one and see if priority needs to be set or it can be undefined. And whenever we are happy with the final result, we can go back to marking it as optional

02:45

and all of the remaining errors will go away.

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional TypeScript Masterclass Lessons

undefined vs. optional

Subscription Required

Object Properties

Function Parameters

Transcript

Professional TypeScript Masterclass