Как преобразовать строку в число в TypeScript (и JavaScript)?

Основные способы преобразования строки в число в TypeScript

На самом деле TypeScript не меняет механику преобразования типов — он лишь добавляет проверки типов на этапе компиляции. Все стандартные методы JavaScript работают точно так же. Давайте разберём основные подходы.

1. Функция Number() — универсальный способ

const str: string = "42";
const num: number = Number(str);
console.log(num); // 42
console.log(typeof num); // "number"

Важно: Number() возвращает number, но если строка не является валидным числом, результатом будет NaN (Not a Number). NaN в TypeScript имеет тип number, поэтому ошибки типов не будет. Однако это может привести к логическим ошибкам.

Для безопасной проверки используйте:

function safeParse(str: string): number | null {
  const num = Number(str);
  return isNaN(num) ? null : num;
}

const result = safeParse("123abc");
console.log(result); // null

2. parseInt() и parseFloat() — для целых и дробных чисел

const intStr: string = "42px";
const floatStr: string = "3.14em";

const intNum: number = parseInt(intStr, 10);  // 42
const floatNum: number = parseFloat(floatStr); // 3.14

Эти функции "обрывают" строку при первой нецифровой позиции. parseInt требует указания системы счисления (обычно 10), parseFloat работает с десятичными числами.

3. Унарный оператор + — краткая запись

const str: string = "99";
const num: number = +str; // 99

// Работает и с отрицательными числами
const negative: number = +"-5"; // -5

Это эквивалентно Number(str), но короче. Минус — менее читаемо для новичков.

4. TypeScript-specific: кастомные функции с guards

function isNumber(value: unknown): value is number {
  return typeof value === 'number' && !isNaN(value);
}

function parseNumber(input: string): number {
  const parsed = Number(input);
  if (!isNumber(parsed)) {
    throw new Error(`Invalid number: "${input}"`);
  }
  return parsed;
}

// Использование
const price: number = parseNumber("29.99"); // OK
// parseNumber("abc"); // Выбросит ошибку

Что выбрать?

• Для простых чисел — Number() или унарный +
• Для чисел с единицами измерения ("42px") — parseInt() / parseFloat()
• Для максимальной безопасности — кастомная функция с проверкой на NaN

Помните: TypeScript не защищает от логических ошибок во время выполнения. Всегда проверяйте результат преобразования, особенно если данные приходят из внешних источников (API, пользовательский ввод).

const input: string = "  123  ";
const clean = input.trim(); // Убираем пробелы
const number = +clean; // Преобразуем

if (!isNaN(number) && clean !== "") {
  console.log("Число:", number);
} else {
  console.log("Некорректный ввод");
}

type ParsedNumber = { success: true; value: number } | { success: false };

function tryParse(str: string): ParsedNumber {
  const num = Number(str);
  if (isNaN(num)) return { success: false };
  return { success: true, value: num };
}

// Использование
const result = tryParse("42");
if (result.success) {
  console.log(result.value); // TypeScript знает, что это number
}