JIYIK CN >

In recent TypeScript versions, nulland undefinedare not readable. However, newer versions support this.

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

Nullable types in TypeScript

nullUsers must turn off type checking mode to use the and types in TypeScript undefined. Use strictNullChecksthe flag to check the type of a property.

If strictNullChecksthe flag is on, user-defined types nulland will not be allowed undefined. By default, the flag is on and the user must turn it off manually.

Code:

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

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

Since the type checker flag is turned on, there will be no output. An error will be raised, ie 'Type null is not assignable to type number'.

If the user manually turns off the type checker flag, the code will execute.

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 code will only be executed when the type checking flag is off.

Making properties optional in TypeScript

There is another way to eliminate nulland undefined. This is the most preferred way to handle attributes.

TypeScript allows you to make properties optional so that they can be used only when needed. Rather than declaring a property every time it is not used null, it is better to prefer optional presentation.

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"
}

请注意, in the above example, the attribute age is optional. The attribute age is not required in the first object info1, so it is never called.

If the type checker is off and the user info1sets the age in to null, it will throw an error. Now, suppose there are 100 objects and only 10 of them require agethe property, so instead of agedeclaring as null, make it optional.

Nullable Union Types in TypeScript

nullUnion types are used when the user does not want to turn off the type checker. Union types are also the preferred approach, but they have the complexity of being allocated when using properties .

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"
}

Note agethe declaration in the interface. Union types are used to assign multiple types to properties and work properly even in strict mode.