TypeScript или JavaScript приведение типов: как правильно преобразовывать данные?

TypeScript vs JavaScript: два разных мира приведения типов

Отличный вопрос! Вы столкнулись с одной из самых частых ловушек для новичков. Давайте разберем принципиальную разницу:

• JavaScript-приведение (через String(), Number(), Boolean()) — это реальное преобразование значения в рантайме. Оно меняет тип данных.
• TypeScript-приведение (через as или угловые скобки) — это только подсказка компилятору. Оно не меняет значение, а лишь говорит TypeScript: "Доверься мне, я знаю, что это за тип".

Пример для понимания

// JavaScript-приведение (реальное)
const str: string = "123";
const num: number = Number(str); // Теперь num = 123 (число)
console.log(typeof num); // "number"

// TypeScript-приведение (иллюзорное)
const str2: string = "abc";
const num2 = str2 as unknown as number; // Компилятор пропустит
console.log(num2); // "abc" (строка!) — ошибки нет, но данные неверные
console.log(typeof num2); // "string" — тип не изменился

Когда использовать as?

Конструкция as нужна в трех основных сценариях:

1. Работа с any или unknown — когда вы точно знаете тип, но TypeScript не может его вывести:

const data: any = JSON.parse('{"name": "Alice"}');
const user = data as { name: string }; // Мы уверены в структуре
console.log(user.name); // TypeScript теперь знает про .name

2. Сужение объединенных типов — когда вы проверили условие, но компилятор не может это отследить:

function process(value: string | number) {
  if (typeof value === "string") {
    // TypeScript сам сузит тип, as не нужен
    return value.toUpperCase();
  }
  // А здесь value — number, но если логика сложная:
  return (value as number).toFixed(2);
}

3. Работа с DOM — классический пример с элементами:

const input = document.getElementById("myInput") as HTMLInputElement;
// Без as TypeScript видел бы HTMLElement, без свойства .value
console.log(input.value);

Безопасное приведение с проверками

Лучшая практика — не использовать as вслепую, а комбинировать с runtime-проверками:

function safeParseUser(data: any): { name: string } | null {
  if (data && typeof data === "object" && "name" in data) {
    return data as { name: string }; // Безопасно, т.к. проверили
  }
  return null;
}

// Или с кастомным гардом
function isUser(obj: any): obj is { name: string } {
  return obj && typeof obj.name === "string";
}

const data: any = { name: "Bob" };
if (isUser(data)) {
  console.log(data.name); // TypeScript знает тип
}

Альтернатива: satisfies (TypeScript 4.9+)

Новый оператор позволяет проверять тип, не меняя его:

const config = {
  url: "https://api.example.com",
  timeout: 5000
} satisfies Record<string, string | number>;
// TypeScript проверит, что все поля соответствуют, но тип останется точным

Итоговые рекомендации

• Для реального преобразования (строка → число) — используйте Number(), parseInt(), String().
• Для подсказки компилятору (когда вы уверены в типе) — используйте as.
• Для безопасности — всегда добавляйте runtime-проверки перед as.
• Избегайте as any — это отключает всю систему типов.

Помните: as — это не магия, а просто способ сказать TypeScript: "Я знаю лучше". Используйте его с умом!

interface Cat {
  meow(): void;
}
interface Dog {
  bark(): void;
}

// Type Guard — функция, возвращающая "pet is Cat"
function isCat(pet: Cat | Dog): pet is Cat {
  return (pet as Cat).meow !== undefined;
}

function makeSound(pet: Cat | Dog) {
  if (isCat(pet)) {
    pet.meow(); // TypeScript знает, что pet — Cat
  } else {
    pet.bark(); // А здесь — Dog
  }
}

type Shape = 
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function area(shape: Shape) {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2; // TypeScript сам сузил
    case "square":
      return shape.side ** 2;
  }
}