Skip to main content

How to Convert TypeScript Strings to Numbers

Converting strings to numbers in TypeScript is an essential task, but it can be tricky due to the different formats of strings and the need to manage invalid inputs. This guide will show you how to safely convert strings to numbers, manage conversion errors, and select the right method for various situations. Whether you're handling user input, API data, or large datasets, knowing the best practices for string-to-number conversion is vital for keeping your application reliable. Whether you're building a complex data-driven app with Convex or just starting with TypeScript, mastering these conversion techniques will help you write more robust code.

1. Safe Conversion of TypeScript Strings to Numbers​

When working with user input or external data in TypeScript, you'll often need to convert strings to numbers. TypeScript offers several methods for this conversion, each with distinct behaviors. The Number constructor attempts to convert the entire string and returns a numeric value if possible:

// Using the Number constructor
const number1: number = Number('123.45');
console.log(number1); // Output: 123.45
console.log(typeof number1); // Output: number

For integer conversion, parseInt is ideal, especially when you need to parse just the integer portion of a string:

// Using parseInt  with radix parameter
const number2: number = parseInt('123', 10);
console.log(number2); // Output: 123

When dealing with decimal values, parseFloat is your best choice:

// Using parseFloat
const number3: number = parseFloat('123.45');
console.log(number3); // Output: 123.45

When working with complex data handling in Convex, these conversion methods become essential for processing field values correctly.

2. Error Checking for String to Number Conversion​

When converting strings to numbers, handling invalid inputs properly is crucial. Unlike some languages, TypeScript's conversion functions don't throw errors for invalid inputs - they return NaN (Not a Number). The most reliable way to check for conversion errors is to use the isNaN function:

// Using try-catch block
try {
    const number: number = Number('abc123');
    console.log(number); // This will output NaN, not throw an error
} catch (error) {
    console.log('Error occurred during conversion:', error); // This won't execute
}

// Using NaN check (correct approach)
const number: number = Number('abc123');
if (isNaN(number)) {
    console.log('Invalid input');
} else {
    console.log('Valid input:', number);
}

For more complex validation, you might create a utility function:

function safelyParseNumber(value: string): number | null {
  const parsed = Number(value);
  return isNaN(parsed) ? null : parsed;
}

const result = safelyParseNumber('abc123');
console.log(result); // Output: null

const validResult = safelyParseNumber('42.5');
console.log(validResult); // Output: 42.5

This pattern is particularly useful when validating user inputs in Convex applications, where type safety is essential for maintaining data integrity.

3. Parsing Strings into Numbers with Examples​

Different data formats require different parsing approaches. Let's explore how to handle various string formats when converting to numbers in TypeScript. For basic integer parsing, parseInt with a radix is the safest option:

// Parsing integers
const integer: number = parseInt('123', 10);
console.log(integer); // Output: 123

// parseInt stops at non-numeric characters
const mixedString: number = parseInt('42px', 10);
console.log(mixedString); // Output: 42

For decimal values, parseFloat handles both integers and floating-point numbers:

// Parsing floats
const float: number = parseFloat('123.45');
console.log(float); // Output: 123.45

// parseFloat also works with strings that start with numbers
const price: number = parseFloat('$29.99'.substring(1));
console.log(price); // Output: 29.99

When dealing with formatted numbers containing thousands separators:

// Parsing numbers with locale settings
const numberWithLocale: number = parseFloat('1,234.56'.replace(/,/g, ''));
console.log(numberWithLocale); // Output: 1234.56

When building type-safe applications with Convex, properly parsing input values ensures your data maintains the correct types throughout your application.

4. Built-in Methods for String to Number Conversion​

TypeScript offers several built-in methods for string-to-number conversion, each with specific use cases:

The Number Constructor​

The Number constructor is versatile and attempts to convert the entire string:

// Using Number constructor
const number: number = Number('123.45');
console.log(number); // Output: 123.45

// Number is strict - it requires the entire string to be numeric
const invalidNumber: number = Number('123.45px');
console.log(invalidNumber); // Output: NaN

The parseInt Function​

The parseInt function is specialized for converting strings to integers:

// Using parseInt
const integer: number = parseInt('123', 10);
console.log(integer); // Output: 123

// parseInt truncates decimal values
const truncated: number = parseInt('123.45', 10);
console.log(truncated); // Output: 123

The parseFloat Function​

For decimal values, parseFloat preserves the floating-point precision:

// Using parseFloat
const float: number = parseFloat('123.45');
console.log(float); // Output: 123.45

// parseFloat handles scientific notation
const scientific: number = parseFloat('1.23e2');
console.log(scientific); // Output: 123

5. Common Pitfalls to Avoid​

When converting strings to numbers in TypeScript, watch out for these common mistakes:

Forgetting to Check for NaN​

Always verify conversion results with isNaN to handle invalid inputs:

// Avoiding NaN values
const number: number = Number('abc123');
if (isNaN(number)) {
    console.log('Invalid input');
} else {
    console.log('Valid input:', number);
}

Misunderstanding parseInt Behavior​

The parseInt function has two potential pitfalls: Omitting the radix parameter can lead to unexpected results:

// Without radix (base 10 is assumed in modern browsers, but it's best practice to specify)
const withoutRadix = parseInt('08');
console.log(withoutRadix); // Output: 8 (modern browsers)

// With explicit radix
const withRadix = parseInt('08', 10);
console.log(withRadix); // Output: 8 (consistently)

It stops parsing at the first invalid character:

const partial = parseInt('123abc456', 10);
console.log(partial); // Output: 123 (ignores everything after 'abc')

Assuming Number Conversion Throws Errors​

String-to-number conversion functions return NaN for invalid inputs rather than throwing exceptions:

// This try-catch is unnecessary
try {
  const number = Number('abc');
  // number is NaN, no exception thrown
} catch (error) {
  // This block will never execute
  console.log('Error:', error);
}

// Correct approach
const number = Number('abc');
if (isNaN(number)) {
  console.log('Invalid input');
}

When implementing type-safe APIs with Convex, proper validation of numeric inputs prevents data inconsistencies and improves application reliability.

6. Choosing the Right Method for Conversion​

Selecting the appropriate conversion method depends on your specific requirements:

When to Use the Number Constructor​

Use Number() when:

  • You need to convert the entire string value

  • You want strict validation (the entire string must be numeric)

  • You're working with clean data sources

// Best for clean, well-formatted numeric strings
const price = Number('42.99');
console.log(price); // Output: 42.99

// Fails with mixed content
const measurement = Number('42.5cm');
console.log(measurement); // Output: NaN

When to Use parseInt​

Use parseInt() when:

  • You need integer values only

  • You're extracting numeric portions from mixed strings

  • You want to truncate decimal values

// Extracts the integer part from mixed content
const width = parseInt('720px', 10);
console.log(width); // Output: 720

// Truncates decimal values
const truncatedValue = parseInt('42.99', 10);
console.log(truncatedValue); // Output: 42

When to Use parseFloat​

Use parseFloat() when:

  • You need to preserve decimal precision

  • You're working with scientific notation

  • You're extracting numeric portions from mixed strings

// Preserves decimal precision
const temperature = parseFloat('98.6°F');
console.log(temperature); // Output: 98.6

// Handles scientific notation
const largeNumber = parseFloat('1.5e6');
console.log(largeNumber); // Output: 1500000

7. Ensuring Accurate Conversion​

To ensure accuracy, handle different formats, invalid strings, and choose the right method. Always validate input, and consider libraries for complex scenarios.

Create Specialized Conversion Functions​

Build utility functions for specific conversion needs:

// Utility for positive integers only
function parsePositiveInt(value: string): number | null {
  const num = parseInt(value, 10);
  return !isNaN(num) && num > 0 ? num : null;
}

// Utility for currency strings
function parseCurrency(value: string): number | null {
  // Remove currency symbols and commas
  const cleaned = value.replace(/[$,]/g, '');
  const num = parseFloat(cleaned);
  return !isNaN(num) ? num : null;
}

console.log(parsePositiveInt('42')); // Output: 42
console.log(parsePositiveInt('-42')); // Output: null
console.log(parseCurrency('$1,234.56')); // Output: 1234.56

Handle Different Numeric Formats​

Account for regional number formats and special cases:

// Convert European number format (comma as decimal separator)
function parseEuropeanNumber(value: string): number {
  // Replace comma with dot for decimal point
  const normalized = value.replace(',', '.');
  return parseFloat(normalized);
}

console.log(parseEuropeanNumber('42,5')); // Output: 42.5

Validate Range Constraints​

Ensure converted values meet your application's requirements:

function parsePercentage(value: string): number | null {
  const num = parseFloat(value);
  // Check if it's a valid number and within percentage range
  return !isNaN(num) && num >= 0 && num <= 100 ? num : null;
}

console.log(parsePercentage('42.5')); // Output: 42.5
console.log(parsePercentage('120')); // Output: null

In complex data filtering scenarios with Convex, these validation patterns ensure that numeric values are properly typed and constrained before being used in queries or stored in your database.

Final Thoughts​

String-to-number conversion is a common task that requires attention to detail. TypeScript's built-in methods give you the tools to handle these conversions safely, but choosing the right approach matters. Remember to always validate conversion results, use appropriate methods for your data format, and create utility functions for complex scenarios. As you build applications with Convex and TypeScript, these conversion techniques will help you maintain type safety throughout your codebase, reducing bugs and improving reliability.