How to Use toString() in TypeScript

Use .toString() in TypeScript when a value is already defined and needs string output, such as numbers, booleans, dates, enums, or custom class values. It is especially useful for display labels, logging, and quick formatting.

What you’ll build or solve

You’ll learn how to use .toString() in TypeScript with primitives, dates, arrays, and custom classes. You’ll also know when String() is safer.

When this approach works best

This approach is the right choice when the value is guaranteed not to be null or undefined.

Common real-world scenarios include:

• Number labels
• Boolean logs
• Date formatting
• Enum display
• Debug output

This is a bad idea when the value may be optional, because .toString() can throw.

Prerequisites

You only need:

• Basic TypeScript types
• Familiarity with methods
• Understanding of optional values

Step-by-step instructions

Step 1: Use .toString() on primitive values

Numbers and booleans support .toString().

const score: number = 95;
const scoreText: string = score.toString();

const isActive: boolean = true;
const activeText: string = isActive.toString();

This creates a string version of the value.

Step 2: Convert dates and arrays

Dates and arrays also support .toString().

const today = new Date();
const dateText = today.toString();

For arrays:

const tags = ["react", "typescript"];
const tagText = tags.toString();

This joins array values with commas.

Step 3: Override .toString() in custom classes

Classes can define custom string output.

class User {
  constructor(public name: string) {}

  toString(): string {
    return `User: ${this.name}`;
  }
}

const user = new User("Alex");
console.log(user.toString());

This is useful for logs and debugging.

What to look for:

• .toString() works on defined values
• Great for numbers, booleans, and dates
• Arrays become comma-separated
• Custom classes can override it
• Avoid on optional values

Examples you can copy

Number

const idText = userId.toString();

Date

const createdAt = new Date().toString();

Array

const csv = values.toString();

Common mistakes and how to fix them

Mistake 1: Calling it on optional values

What the reader might do:

userId.toString()

when userId may be undefined.

Why it breaks: .toString() throws on missing values.

Corrected approach:

Use String(userId) or a guard.

Mistake 2: Using it for objects without override

What the reader might do:

product.toString()

Why it breaks: this may return "[object Object]".

Corrected approach:

Override .toString() in the class.

Mistake 3: Using array .toString() for custom delimiters

What the reader might do:

Expect spaces or pipes.

Why it breaks: arrays default to commas.

Corrected approach:

Use .join() for custom separators.

Troubleshooting

If the app crashes, check for optional values.

If objects show "[object Object]", override .toString().

If array formatting is wrong, switch to .join().

If safe optional conversion is needed, prefer String().

Quick recap

• Use .toString() for defined values
• Great for numbers, booleans, dates, and arrays
• Arrays default to comma-separated text
• Override it in custom classes
• Use String() for optional values