Зачем нужен TS?

Зачем нужен TypeScript (TS)

TypeScript — это надстройка над JavaScript, которая добавляет статическую типизацию. Это позволяет ловить ошибки на этапе разработки, а не в runtime.

Основные проблемы JavaScript без TS

// JS позволяет всё
const user = { name: 'John' };
user.age = 30;           // OK
user.foobar = 'test';    // OK
console.log(user.phon);  // undefined (опечатка!)

// Ошибка с типами
const sum = '10' + 5;    // '105' (конкатенация вместо сложения)
const result = sum / 2;  // NaN

TypeScript решает эти проблемы

interface User {
  name: string;
  age?: number;
}

const user: User = { name: 'John' };
user.age = 30;           // OK
user.foobar = 'test';    // ❌ Error: Property 'foobar' not assignable
console.log(user.phon);  // ❌ Error: Property 'phon' not found

const sum: number = '10' + 5;  // ❌ Error: Type 'string' not assignable to 'number'

Плюсы TS

1. Раннее обнаружение ошибок

Большинство ошибок видны в IDE перед запуском:

function greet(name: string) {
  return `Hello, ${name}`;
}

greet(42);  // ❌ ошибка во время написания

2. Лучшая поддержка IDE

const user: User = fetchUser();
user.  // IDE подсказывает: name, age, email (autocompletion)
user.nonexistent  // ❌ Error: не существует

3. Самодокументирующийся код

function processUser(user: User, options: ProcessOptions): Promise<Result> {
  // Сразу видно: принимает, возвращает, может быть async
}

4. Рефакторинг с уверенностью

Если изменить интерфейс, TypeScript найдёт все места:

interface User {
  id: number;
  name: string;
  // email удалили
}

// Все места с user.email будут помечены как ошибки

5. Лучшая производительность

TypeScript может оптимизировать код на основе типов.

Основные возможности

Типизация:

const age: number = 30;
const name: string = 'John';
const active: boolean = true;
const data: null = null;
const unknown_value: undefined = undefined;

Интерфейсы и типы:

interface User {
  id: number;
  name: string;
  email?: string;  // опциональное
  readonly createdAt: Date;  // только чтение
}

type Status = 'pending' | 'success' | 'error';

Generics:

function getFirstElement<T>(arr: T[]): T {
  return arr[0];
}

const first = getFirstElement([1, 2, 3]);  // T = number
const firstStr = getFirstElement(['a', 'b']);  // T = string

Union типы:

function process(value: string | number) {
  if (typeof value === 'string') {
    console.log(value.toUpperCase());
  } else {
    console.log(value + 10);
  }
}

Минусы TS

1. Больше кода

// TypeScript
function add(a: number, b: number): number {
  return a + b;
}

// JavaScript (компактнее)
function add(a, b) {
  return a + b;
}

2. Кривая обучения

Нужно учить: types, interfaces, generics, utility types.

3. Время компиляции

TypeScript нужно компилировать в JavaScript.

4. Конфигурация

tsconfig.json требует правильной настройки.

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

✅ Используй:

• Большие проекты (>10k строк)
• Командная разработка
• Долгосрочные проекты
• Критичные приложения

❌ Может быть избыточен:

• Маленькие скрипты
• MVPs и прототипы
• One-off проекты

Примеры в React

Компонент:

interface Props {
  title: string;
  count?: number;
  onClick: (id: number) => void;
}

const Button: React.FC<Props> = ({ title, count, onClick }) => (
  <button onClick={() => onClick(count || 0)}>
    {title}
  </button>
);

Хуки:

const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<User | null>(null);

const handleClick = useCallback((id: number) => {
  // id здесь typed
}, []);

Вывод

TypeScript:

• ✅ Ловит ошибки на разработку
• ✅ Лучшая IDE поддержка
• ✅ Самодокументирующийся код
• ✅ Удобный рефакторинг
• ❌ Больше кода
• ❌ Требует компиляции

В 2024+ году TS стал стандартом для серьёзных проектов благодаря значительному сокращению времени на отладку и поддержку.