Typescript Date

The TypeScript Date object is your swiss army knife for manipulating dates and times in your code. It offers a wealth of functionality, letting you access, modify, and format dates with precision and ease.

Creating Date Objects

const now = new Date(); // Represents the current date and time. console.log(now); // Output: 2023-12-18T18:43:34.741Z

From a timestamp

const birthday = new Date(1990, 6, 3); // June 3rd, 1990. console.log(birthday); // Output: 1990-07-03T00:00:00.000Z const christmasFuture = new Date(2077, 11, 25); // December 25th, 2077. console.log(christmasFuture); // Output: 2077-12-25T00:00:00.000Z

From a string

const newYearsEve = new Date("2024-12-31T23:59:59Z"); console.log(newYearsEve); // Output: 2023-12-31T23:59:59.000Z

Accessing Date Components

Extract specific components of a date object using getters like getFullYear(), getMonth(), getDate(), getHours(), etc.:

const today = new Date(); const year = today.getFullYear(); // 2023 const month = today.getMonth(); // 11 (December) const day = today.getDate(); // 18 console.log(`It's ${day}/${month + 1}/${year}`); // Output: It's 18/12/2023

Modifying Date Components

Use setter methods like setFullYear(), setMonth(), etc., to alter date components:

const birthday = new Date(1990, 6, 3); // June 3rd, 1990. birthday.setFullYear(2000); // Change year to 2000. console.log(birthday); // Output: 2000-07-03T00:00:00.000Z

Formatting Dates

Format dates based on your desired locale using the toLocaleDateString() and toLocaleTimeString() methods:

const now = new Date(); const localDate = now.toLocaleDateString("en-US"); // "12/18/2023" const localTime = now.toLocaleTimeString("en-US"); // "6:43 PM" console.log(`It's ${localDate}, ${localTime}`); // Output: It's 12/18/2023, 6:43 PM

Common Date Operations

The TypeScript Date Object provides various methods to perform common date operations:

const currentDate: Date = new Date(); // Getting individual components of a date const year: number = currentDate.getFullYear(); const month: number = currentDate.getMonth() + 1; // Months are zero-indexed const day: number = currentDate.getDate(); console.log(`${year}-${month}-${day}`); // Output: Current date in YYYY-MM-DD format // Adding and subtracting time currentDate.setDate(currentDate.getDate() + 7); // Adding 7 days console.log(currentDate); // Output: Current date + 7 days

Time Manipulation

Add or subtract specific units of time with methods like setMinutes(), addHours(), etc.:

const meetingTime = new Date(); meetingTime.addHours(2); // Schedule a meeting 2 hours from now. console.log(meetingTime); // Output: (Date and time 2 hours after current time) const vacationStart = new Date(); vacationStart.setMinutes(-30); // Start vacation 30 minutes earlier. console.log(vacationStart); // Output: (Date and time 30 minutes before current time)

TypeScript Type Annotations

One of the advantages of using TypeScript is its strong type system. When working with the Date Object, TypeScript provides type annotations for better code safety:

const currentDate: Date = new Date(); // TypeScript ensures that currentDate is of type Date // Mistake: currentDate is not a string, TypeScript will raise an error // const dateString: string = currentDate;

Conclusion

The TypeScript Date Object extends the native JavaScript Date object, offering enhanced features and type annotations for robust date and time handling. It enables developers to create, manipulate, and format dates, while TypeScript's strong typing ensures code reliability and accuracy when working with date-related operations.