Typescript nullable type with examples

In this tutorial, discuss the following things with examples.

How to define a type that can be string or null?
How to assign null to a variable?
typescript nullable return type
How to assign interface with null type

In typescript applications, dealing with nullable types is an important step for avoiding runtime problems. You can check other post on Fix for Object is possibly null

How to declare assigned nullable types with strictNullCheck in typescript?

Typescript is a statically typed version of javascript, So the strictNullCheck configuration in tsconfig.json allows to avoid nullable errors.

strictNullCheck=false - null and undefined are subtypes of an existing type, so we can assign them without error.

Declared a string variable and can be assigned with string, null, and undefined.

let name: string;
name = "johan"; // valid
name = null; // valid
name = undefined; // valid

if strictNullCheck is set to true, then the null and undefined values are not assigned to properties of a different type.

let name: string;
name = "johan"; // valid
name = null; // error
name = undefined; // error

In this case, null and undefined are treated as separate types which are not assigned to properties of a different type.

The fix is to add a union type for variable declaration.

let name: string | null | undefined;
name = "Something"; // valid
name = null; // valid
name = undefined; // valid

How to allow a null type parameter in a function in typescript?

In this example, How functional parameters allow null values with different approaches.

Let’s declare a function in typescript with a string parameter.

function printName(name: string) {
  console.info(name);
}

This function accepts strings only, null, undefined, and empty are not allowed.

printName("Franck"); // valid
printName(null); // error not valid
printName(undefined); // error not valid
printName(); // // error not valid

Let’s add union type null to the function parameter to allow null values.

function printName(name: string | null) {
  console.info(name);
}

This function allows string and null types and other types are not allowed.

printName("Franck"); // valid
printName(null); // valid
printName(undefined); // error not valid
printName(); // // error not valid

Now let’s add optional ? to the functional parameter. It allows accepting optional parameters or undefined strings only.

The below function adds an optional parameter.

function printName(name?: string) {
  console.info(name);
}

This function allows string or optional names or undefined types and other types are not allowed.

printName("Franck"); // valid
printName(null); // error invalid
printName(undefined); // valid
printName(); // valid

To allow null and undefined and optional parameters, We can pass union with optional parameters.

function printName(name?: string | null) {
  console.info(name);
}

It allows all cases seen below.

printName("Franck"); // valid
printName(null); // valid
printName(undefined); // valid
printName(); // valid

How to return nullable type in typescript?

export class Employee {
  private name: string;

  public constructor() {}

  public getName(name: string) {
    return null;
  }
}

if the name is null, It throws an error,

To avoid this, you have to declare as follows.

public name: string | null;

if a name is not a string, It returns null.

How to assign null to an interface?

let’s declare an interface with a simple field name

interface employee {
  name: any;
}

let’s see what is the behavior when an interface is assigned with null

strictNullCheck=false in tsconfig.json

It is easy to add a null value to an interface.
```
let emp: employee = null;
```
strictNullCheck=true in tsconfig.json

with enabling this, assigning null to an interface throws an error Type ‘null’ is not assignable to type ‘employee’.(2322)

let emp: employee = null;

The solution is to add the union type with null.

let emp: employee | null = null;

How to declare interface field as nullable in typescript

An interface can have properties of different types. Let’s add how to add nullable types to these properties in typescript.

Let’s declare an interface with a few more properties.

interface Employee {
  name: string;
  department: string;
}

declare an object of the above interface and assign data. The below works and does not throw an error.

var emp1: Employee = { name: "Franc", department: "sales" }; // OK

Initialize an Employee object without department field

var emp2: Employee = { name: "Franc" }; // an compilation error

And an error is thrown below.

Property 'department' is missing in type '{ name: string; }' but required in type 'Employee'.(2741)

Let’s pass the department with undefined

var emp3: Employee = { name: "Franc", department: undefined }; // an compilation error

A throws a compilation error.

Type ‘undefined’ is not assignable to type ‘string’.(2322)

Let’s pass department with undefined and name is null

var emp4: Employee = { name: null, department: undefined }; // an compilation error

And it throws the below error. Type ‘null’ is not assignable to type ‘string’.(2322)

SO, what is the solution to adding null and undefined types?

An interface can be modified to add union and optional types to fields.

interface Employee {
  name?: string | null;
  department?: string | null;
}

This will accept null and undefined as well as optional values.

Conclusion

To sum up, handling null is required to know to avoid runtime errors. Different approaches are documented with examples.