Typescript nullable type with examples
- Admin
- Dec 6, 2023
- Typescript
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.