How to express a Date Type in TypeScript ?

In TypeScript, the Date object is used to handle dates and times. To express a Date type, declare a variable with the type annotation Date and assign it a date value. This allows for precise date manipulation and formatting in your TypeScript code.

Ways to Express Date Type in TypeScript

Without specifying any of the types

In TypeScript, if we do not provide a Date type to the Date object, it will type it using internal inference as the Date object returns the date as a result. By default, the Date object returns the current date if no parameter is passed to get a particular date and time.

Syntax

const date = new Date();

Example: The below example shows how the Date object will behave if no type is provided to it.

const currDate = new Date();
const dateStr: string = currDate.toDateString();
console.log(dateStr);

Output:

Thu Dec 14 2023

Manually Typing Date Object

We can also type the date object manually using the Date type. It is the same type that gets inferred automatically by TypeScript when we do not specify any type.

Syntax

const date: Date = new Date();

Example: The below code example types the date object to he Date type by specifying it manually.

const currDate: Date = new Date();
const dateStr: string = currDate.toDateString();
console.log(dateStr);

Output:

Thu Dec 14 2023

Using type alias or interface for typing

In this approach, we will first define an interface or an type alias with a property of Date type and then use those created types to type the actual date object we will create using the new Date().

Syntax

// Using type alias to type date object
type type_name = Date;
const currDate: type_name = new Date()
// Using interface to type date object
interface interface_name{
    interface_prop: Date;
}
const currDate: interface_name = {
    today: new Date(),
}

Example: The below example will show the use of the interface and the type alias to type the date object in TypeScript.

// Using type alias to type the date object
type myDate = Date;
const currentDate: myDate = new Date();
console.log(currentDate.toDateString());

// Using interface to type the date object
interface dateInterface {
    today: Date;
}
const currDate: dateInterface = {
    today: new Date(),
}
console.log(currDate.today.toDateString());

Output:

Thu Dec 14 2023
Thu Dec 14 2023

Using date-fns

Date-fns is a modern JavaScript date utility library that provides a wide range of functions for manipulating and formatting dates. To use date-fns with TypeScript, first, install the library:

npm install date-fns

Example: Importing the format function from date-fns, creating a Date object for the current date, then formatting it as "dd MMM yyyy" ('01 May 2024').

import { format } from 'date-fns';

const currentDate: Date = new Date();
const formattedDate: string = format(currentDate, 'dd MMM yyyy');
console.log(formattedDate);

Output:

01 May 2024