How to Convert a String to a Number in TypeScript

By the end of this page, you will understand how to convert strings to numbers in TypeScript using Number(), the unary + operator, parseInt(), and parseFloat(). You will also learn when to use each one, how invalid input behaves, and how to avoid common mistakes.

In TypeScript, the number type represents numeric values such as integers and decimals. A value like "1234" is still a string, even though it looks like a number. If you want to do numeric operations like addition, subtraction, comparison, or sorting, you usually need to convert that string into a real number.

TypeScript adds type checking, but it does not automatically transform string values into numbers for you. If data comes from:

• form inputs
• URL query parameters
• JSON payloads
• environment variables
• API responses

it often arrives as a string.

To convert a string to a number in TypeScript, the most common options are:

• Number(value)
• +value (unary plus)
• parseInt(value, 10) for integers
• parseFloat(value) for decimals

These methods do not behave exactly the same way:

• Number("123abc") returns NaN
• parseInt("123abc", 10) returns 123
• parseFloat("12.5px") returns 12.5

That difference matters in real programs, especially when validating user input.

Think of a string as a label with characters printed on it, and a number as an actual quantity you can calculate with.

• "123" is a text label that contains the characters 1, 2, and 3
• 123 is a numeric value you can add, multiply, and compare mathematically

Converting a string to a number is like reading the label and turning it into a usable amount.

Different tools read the label differently:

• Number() says: the whole label must be a valid number
• parseInt() says: I will read from the start until the integer stops
• parseFloat() says: I will read from the start until the decimal number stops
• unary + acts like a short form of Number()

So the best tool depends on how strict you want the conversion to be.

Basic conversion

The most direct and readable approach is Number():

let numberString: string = "1234";
let numberValue: number = Number(numberString);

console.log(numberValue); // 1234

This converts the string into a number.

Using unary plus

A shorter version is unary plus:

let numberString: string = "1234";
let numberValue: number = +numberString;

console.log(numberValue); // 1234

This is common, but some beginners find Number() easier to read.

Converting integers with parseInt()

 :  = ;
 :  = (countString, );

.(count); 

Consider this example:

let input: string = "56.7";
let value: number = Number(input);
let doubled: number = value * 2;

console.log(doubled);

Step by step:

1. input is assigned the string "56.7"
2. Number(input) tries to convert the full string into a numeric value
3. The conversion succeeds, so value becomes 56.7
4. value * 2 performs numeric multiplication, producing 113.4
5. console.log(doubled) prints 113.4

Now compare it with invalid input:

let input: string = ;
 :  = (input);

.(value); 

String-to-number conversion appears everywhere in real software.

Form input values

HTML form fields usually return strings.

const ageInput = "25";
const age = Number(ageInput);

Query parameters

A URL may contain something like ?page=3.

const pageParam = "3";
const page = Number(pageParam);

Environment variables

Environment variables are typically strings.

const portString = "3000";
const port = Number(portString);

API and JSON data

Sometimes APIs send numeric values as strings.

const priceFromApi = "49.99";
const price = Number(priceFromApi);

Data cleanup scripts

CSV files often store everything as text.

In real projects, developers usually do more than just convert. They also validate.

Validation before using the number

function toNumber(value: string): number | null {
  const result = Number(value);
  return Number.isNaN(result) ? null : result;
}

This avoids using invalid numeric values by accident.

Guard clauses

function calculateDiscount(percentText: string): number {
  const percent = Number(percentText);

  if (Number.isNaN(percent)) {
    throw new Error("Invalid discount percentage");
  }

  return percent / 100;
}

A guard clause stops bad data early.

Parsing configuration values

1. Forgetting that form input is a string

Broken example:

let a = "10";
let b = "20";

console.log(a + b); // "1020"

Why it happens:

• + between strings concatenates text

Fix:

let a = Number("10");
let b = Number("20");

console.log(a + b); // 30

2. Not checking for NaN

Broken example:

let value = Number("abc");
console.log(value + 5); // NaN

Fix:

 value = ();

 (.(value)) {
  .();
}  {
  .(value + );
}

// Convert string to number
const n1 = Number("123");     // 123
const n2 = +"123";            // 123
const n3 = parseInt("123", 10); // 123
const n4 = parseFloat("12.34"); // 12.34

Quick rules

• Number("123") -> 123
• Number("12.5") -> 12.5
• Number("123abc") -> NaN
• +"123" -> 123
• parseInt("123abc", 10) -> 123
• parseFloat("12.5px") -> 12.5

Check for invalid conversion

How do I convert a string to a number in TypeScript?

Use Number(value) for a clear general-purpose conversion.

const value: number = Number("123");

Is unary plus valid in TypeScript?

Yes. Unary plus works in TypeScript the same way it works in JavaScript.

const value: number = +"123";

What is the difference between Number() and parseInt()?

Number() requires the full string to be numeric. parseInt() reads an integer from the start of the string and stops when it reaches an invalid character.

Why do I get NaN when converting a string?

You get NaN when the string cannot be converted into a valid number.

Number("hello"); // NaN

• TypeScript types — Helps you understand the difference between string and number.
• Type conversion — String-to-number conversion is one example of changing a value from one type to another.
• NaN — Important for detecting failed numeric conversions.
• parseInt — Related because it parses integer values from strings.
• parseFloat — Related because it parses decimal values from strings.
• Unary operators — Unary + is a compact way to convert values.
• Input validation — Useful because converted values may still be invalid.
• JavaScript number type — TypeScript uses JavaScript runtime behavior for numeric conversion.