How to Format Currency to 2 Decimals in TypeScript (With Practical Examples)

Recently, one of our clients needed to display currency values in their TypeScript projects, specifically to ensure that it always shows exactly two decimal places.

In this tutorial, I will explain how to format currency to 2 decimals in TypeScript using various methods.

Here is an example where we need it: Imagine a shopping cart showing $50 instead of $50.00—it might look incomplete or even misleading.

Below are a few methods to format currency to 2 decimal places in TypeScript.

Method 1: Using toFixed(2)

The simplest way to format a number to two decimal places in TypeScript is by using the toFixed() method. This method converts a number into a string, keeping the specified number of decimals.

Example: Format a Price in US Dollars

Here is an example:

const price: number = 49;
const formattedPrice: string = '$' + price.toFixed(2);
console.log(formattedPrice); // Output: $49.00

I often use toFixed(2) for quick display purposes, especially when I need a fast solution without worrying about localization or currency symbols.

You can see the exact output in the screenshot below:

Note:
toFixed() returns a string. If you need the value as a number, you’ll have to convert it back, but for display, this is usually exactly what you want.

Check out How to Remove Items from Arrays in TypeScript

Method 2: Using Intl.NumberFormat for Locale-Specific Formatting

For locale-aware formatting, the Intl.NumberFormat API is very useful in TypeScript. It handles currency symbols, thousands separators, and decimal places according to the locale you specify.

Example: Format in US Dollars

Here is an example.

const amount: number = 1234567.891;
const usdFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

const formattedAmount: string = usdFormatter.format(amount);
console.log(formattedAmount); // Output: $1,234,567.89

You can see the exact output in the screenshot below:

I rely on Intl.NumberFormat whenever I need to display amounts in a user-friendly and locale-correct way. It’s especially useful for apps with international users, but even for US-only projects, it gets all the details right—like the comma as a thousands separator.

Check out TypeScript ?? Operator

Method 3: Custom Utility Function

Sometimes you may want a reusable utility function that wraps formatting logic for consistency across your codebase.

Here is an example.

Example: Reusable Currency Formatter

function formatCurrency(amount: number, currency: string = 'USD', locale: string = 'en-US'): string {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency,
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(amount);
}

// Usage
const price = 78.5;
console.log(formatCurrency(price)); // Output: $78.50
console.log(formatCurrency(price, 'USD', 'en-US')); // Output: $78.50

I like to create a utility like this in most of my projects. It keeps the code DRY and makes it easy to adapt if requirements change (for example, supporting other currencies in the future).

Read How to Convert TypeScript Objects to JSON

Method 4: Format Numbers in Tables and Reports

When generating reports or displaying tables of financial data, consistency is key. Here’s how I format an array of numbers as US currency with two decimals:

const sales: number[] = [1050, 250.5, 99.99, 10000];

const formattedSales = sales.map(amount => formatCurrency(amount));

console.log(formattedSales);
// Output: ['$1,050.00', '$250.50', '$99.99', '$10,000.00']

Tip:
Using a utility function like formatCurrency makes it easy to map over arrays and keep your formatting consistent everywhere.

Method 5: Working with Negative Values, Zero, Large Numbers

Here is an example of how to handle negative or zero values.

console.log(formatCurrency(-15.5)); // Output: -$15.50
console.log(formatCurrency(0));     // Output: $0.00

I always test these scenarios to ensure the formatting looks right. Intl.NumberFormat handles negatives and zero gracefully, so you don’t need extra logic.

Check out How to Compare String to Enum in TypeScript

Format Currency to 2 Decimals in TypeScript Example: Format Currency Input Fields

If you’re dealing with user input (like a checkout form), you may want to format the value as the user types. Here is a React.js form.

Example: Format on Input (React Example)

import React, { useState } from 'react';

function CurrencyInput() {
  const [value, setValue] = useState('');

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const rawValue = event.target.value.replace(/[^0-9.]/g, '');
    const numberValue = parseFloat(rawValue) || 0;
    setValue(formatCurrency(numberValue));
  };

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
      placeholder="$0.00"
    />
  );
}

As shown in this example, I have explained how to format the input value.

Conclusion

In this tutorial, I explained how to format currency to two decimal places in TypeScript using methods such as toFixed(2) or Intl.NumberFormat, locale-aware formatting, etc.

Try out these methods in your next project, and you’ll see just how easy it is to make your numbers work for you!

You may also like the following tutorials:

• Get String After Character In TypeScript
• Convert String To Double In TypeScript
• TypeScript Check If String Is Number