How to Convert Unix timestamps in TypeScript

How to Convert Unix Timestamps in TypeScript

Converting Unix timestamps to human-readable dates is a common task in web development. Unix timestamps represent the number of seconds that have elapsed since January 1, 1970, at 00:00:00 UTC. This format is widely used in APIs, databases, and file systems, but it's not easily readable by humans. In this guide, we'll explore how to convert Unix timestamps to human-readable dates in TypeScript.

Quick Example

import { format } from 'date-fns';

const unixTimestamp = 1643723400;
const date = new Date(unixTimestamp * 1000);
const formattedDate = format(date, 'yyyy-MM-dd HH:mm:ss');

console.log(formattedDate); // Output: 2022-02-01 12:30:00

This code example uses the date-fns library to format the date. You can install it using npm by running the command npm install date-fns.

Step-by-Step Breakdown

Let's break down the code:

import { format } from 'date-fns';

We import the format function from the date-fns library, which we'll use to format the date.

const unixTimestamp = 1643723400;

We define the Unix timestamp we want to convert.

const date = new Date(unixTimestamp * 1000);

We create a new Date object by multiplying the Unix timestamp by 1000. This is because the Date constructor expects the timestamp in milliseconds, not seconds.

const formattedDate = format(date, 'yyyy-MM-dd HH:mm:ss');

We use the format function to format the date in the desired format. In this case, we're using the yyyy-MM-dd HH:mm:ss format, which represents the year, month, day, hour, minute, and second.

Handling Edge Cases

Empty/Null Input

const unixTimestamp = null;
try {
  const date = new Date(unixTimestamp * 1000);
  // ...
} catch (error) {
  console.error('Invalid input:', error);
}

If the input is null or undefined, we should catch the error and handle it accordingly.

Invalid Input

const unixTimestamp = ' invalid';
try {
  const date = new Date(unixTimestamp * 1000);
  // ...
} catch (error) {
  console.error('Invalid input:', error);
}

If the input is not a valid number, we should catch the error and handle it accordingly.

Large Input

const unixTimestamp = 2147483647; // Maximum 32-bit integer value
const date = new Date(unixTimestamp * 1000);
const formattedDate = format(date, 'yyyy-MM-dd HH:mm:ss');
console.log(formattedDate); // Output: 2038-01-19 03:14:07

If the input is a large number, we should ensure that it doesn't exceed the maximum value that can be represented by the Date object.

Unicode/Special Characters

const unixTimestamp = '1643723400'; // String with Unicode characters
const date = new Date(parseInt(unixTimestamp, 10) * 1000);
const formattedDate = format(date, 'yyyy-MM-dd HH:mm:ss');
console.log(formattedDate); // Output: 2022-02-01 12:30:00

If the input contains Unicode characters, we should parse the string to an integer using parseInt before creating the Date object.

Common Mistakes

Mistake 1: Not Multiplying by 1000

const date = new Date(unixTimestamp); // Wrong!

Corrected code:

const date = new Date(unixTimestamp * 1000);

Mistake 2: Not Handling Errors

const date = new Date(unixTimestamp * 1000); // No error handling!

Corrected code:

try {
  const date = new Date(unixTimestamp * 1000);
  // ...
} catch (error) {
  console.error('Invalid input:', error);
}

Mistake 3: Using the Wrong Format

const formattedDate = format(date, 'MM/dd/yyyy'); // Wrong format!

Corrected code:

const formattedDate = format(date, 'yyyy-MM-dd HH:mm:ss');

Performance Tips

Use a Reusable Date Formatter

const dateFormatter = format.bind(null, 'yyyy-MM-dd HH:mm:ss');
const formattedDate = dateFormatter(date);

Instead of calling the format function repeatedly, create a reusable date formatter using bind.

Avoid Creating Multiple Date Objects

const date = new Date(unixTimestamp * 1000);
const formattedDate = format(date, 'yyyy-MM-dd HH:mm:ss');
const anotherDate = new Date(unixTimestamp * 1000); // Avoid this!

Avoid creating multiple Date objects for the same timestamp. Instead, reuse the existing Date object.

FAQ

Q: What is the maximum value that can be represented by the Date object?

A: The maximum value that can be represented by the Date object is 2147483647, which corresponds to Tue Jan 19 2038 03:14:07 GMT+0000 (Coordinated Universal Time).

Q: How do I handle dates before 1970?

A: To handle dates before 1970, you can use a library like moment or date-fns that supports dates before the Unix epoch.

Q: Can I use the Date constructor with a string argument?

A: Yes, you can use the Date constructor with a string argument, but it's not recommended. Instead, use the Date constructor with a timestamp argument or a Date object.

Q: How do I format dates in a specific locale?

A: To format dates in a specific locale, you can use the Intl.DateTimeFormat API or a library like date-fns that supports locale formatting.

Q: Can I use this code in a browser environment?

A: Yes, this code can be used in a browser environment, but make sure to include the date-fns library in your HTML file or use a CDN.