Nullable Type in TypeScript

1. Nullable Type in TypeScript
2. Making Property Optional in TypeScript
3. Union Type for Nullable in TypeScript

In recent TypeScript versions, null and undefined were not readable. However, the newer version supports this.

This tutorial will discuss the concept of nullable type in TypeScript.

Nullable Type in TypeScript

The user must switch off the type checking mode to use the null and undefined types in TypeScript. Use the strictNullChecks flag to check the type of property.

If the strictNullChecks flag is on will not allow the user to define types null and undefined. By default, the flag is turned on, and the user has to switch it off manually.

Code:

interface Info {
 name: string,
 age: number,
 city: string,
}

const info: Info = {
 name: 'John',
 age: null,
 city: 'Washington'
}

There will be no output since the type checker flag is turned on. An error will be raised that 'Type null is not assignable to type number'.

The code will execute if the user manually switches off the type checker flag.

Code:

interface Info {
 name: string,
 age: number,
 city: string,
}

const info: Info = {
 name: 'John',
 age: null,
 city: 'Washington'
}

console.log(info)

Output:

{
  "name": "John",
  "age": null,
  "city": "Washington"
}

Now the above only executes when the type checker flag is turned off.

Making Property Optional in TypeScript

There is another method to eliminate null and undefined. It is the most preferred way to handle properties.

TypeScript allows making properties optional so that these properties can only be used when needed. Instead of declaring a property null each time it is of no use, an optional rendering is preferred.

Code:

interface Info {
 name: string,
 age?: number,
 city: string,
}

const info1: Info = {name: 'John', city: 'Washington'};
const info2: Info = {name: 'Jack', age: 13, city: 'London'};

console.log(info1);
console.log(info2);

Output:

{
  "name": "John",
  "city": "Washington"
}
{
  "name": "Jack",
  "age": 13,
  "city": "London"
}

Notice in the above example that the property age is optional. There was no need for the property age in the first object, info1, so it was never called.

If the type checker is off and the user sets age in info1 equal to null, it will raise an error. Now, suppose there were 100 objects, and only 10 of them need the age property, so instead of declaring age into null, make it optional.

Union Type for Nullable in TypeScript

The union type is used when the user does not want to turn off the type checker. A union type is also a preferred method, but it has the complexity of assigning null whenever the property is used.

Code:

interface Info {
 name: string,
 age: number | null,
 city: string,
}

const info1: Info = {name: 'John', age: null, city: 'Washington'};
const info2: Info = {name: 'Jack', age: 13, city: 'London'};

console.log(info1);
console.log(info2);

Output:

{
  "name": "John",
  "age": null,
  "city": "Washington"
}
{
  "name": "Jack",
  "age": 13,
  "city": "London"
}

Notice the declaration of age in the interface. A union type is used to assign multiple types to a property, and it works fine even in the strict mode.