TypeScript с нуля до PRO: лучшие YouTube каналы и курсы в 2024

Почему TypeScript — это must-have в 2024 году?

Вы когда-нибудь писали JavaScript-код, который работал «вроде бы нормально», а потом внезапно падал с ошибкой undefined is not a function? Если да — вы знаете, как это бесит. TypeScript решает эту проблему раз и навсегда. Он добавляет в JavaScript строгую типизацию, делает код предсказуемым и спасает от глупых багов на этапе компиляции.

Но есть нюанс: изучать TypeScript по скучной документации — тоска смертная. Гораздо быстрее и интереснее смотреть YouTube каналы и курсы по TypeScript, где всё разжёвывают на реальных примерах. Мы собрали для вас лучшие ресурсы, которые помогут прокачаться с нуля до уверенного разработчика.

Кстати, если вы уже работаете с Python (как многие читатели PythonLib), вы будете приятно удивлены: TypeScript перенял много хороших идей из статической типизации, знакомой вам по mypy или pydantic. Только здесь всё встроено «из коробки».

Топ YouTube каналов по TypeScript

YouTube — лучший друг самоучки. Там можно найти и бесплатные уроки, и полноценные плейлисты. Вот каналы, которые стоят вашего времени.

1. TypeScript — официальный канал

Да-да, у TypeScript есть свой YouTube-канал. Там выходят записи конференций, анонсы новых версий и глубокие технические доклады от создателей языка. Это не для новичков, но для тех, кто хочет понимать, «как это работает под капотом».

• Что смотреть: плейлист «What's new in TypeScript» — там разбирают фичи каждой новой версии.
• Уровень: Middle+
• Плюсы: авторитетный источник, информация из первых рук.
• Минусы: мало практики, много теории.

2. Web Dev Simplified

Канал Kyle’a — это золотая жила для начинающих. Он объясняет сложные вещи простыми словами, используя наглядные примеры. У него есть отличный плейлист по TypeScript, где он разбирает типы, дженерики, утилитарные типы и многое другое.

Пример кода из его урока:

// Простой дженерик, который принимает массив и возвращает первый элемент
function getFirstElement<T>(arr: T[]): T | undefined {
    return arr[0];
}

const numbers = [1, 2, 3];
const firstNumber = getFirstElement(numbers); // тип: number | undefined

const strings = ['a', 'b', 'c'];
const firstString = getFirstElement(strings); // тип: string | undefined

Kyle показывает, как TypeScript автоматически выводит тип, и объясняет, почему это круто.

• Что смотреть: плейлист «TypeScript Tutorial for Beginners».
• Уровень: Junior
• Плюсы: короткие видео (10-15 минут), много практики.
• Минусы: не хватает сложных тем вроде conditional types.

3. Fireship

Если вы хотите быстро «освежить» знания или узнать о новой фиче за 100 секунд — Fireship ваш выбор. Его стиль — супер-динамичные видео с мемами и быстрым монтажом. У него есть культовое видео «TypeScript in 100 Seconds» и более глубокие разборы.

Пример из его видео про utility types:

interface User {
    id: number;
    name: string;
    email: string;
    password: string;
}

// Частично обновляем пользователя (все поля опциональны)
type PartialUser = Partial<User>;

// Только для чтения
type ReadonlyUser = Readonly<User>;

// Выбираем только нужные поля
type PublicUser = Pick<User, 'id' | 'name' | 'email'>;

Fireship объясняет, как эти утилитарные типы экономят часы разработки.

• Что смотреть: «TypeScript - The Basics» и «TypeScript Advanced Tricks».
• Уровень: от Junior до Senior
• Плюсы: очень наглядно, мотивирует.
• Минусы: слишком быстро для полных новичков.

4. Jack Herrington

Это канал для тех, кто хочет писать production-ready код на TypeScript. Jack — ветеран разработки, и он делится реальными паттернами: как правильно организовать типы в большом проекте, как использовать discriminated unions, как тестировать TypeScript-код.

Пример discriminated union из его видео:

type Shape = 
    | { kind: 'circle'; radius: number }
    | { kind: 'square'; side: number }
    | { kind: 'triangle'; base: number; height: number };

function getArea(shape: Shape): number {
    switch (shape.kind) {
        case 'circle':
            return Math.PI * shape.radius ** 2;
        case 'square':
            return shape.side ** 2;
        case 'triangle':
            return (shape.base * shape.height) / 2;
        default:
            // Exhaustive check — если забудем обработать новый тип, TS ругнётся
            const _exhaustive: never = shape;
            return _exhaustive;
    }
}

• Что смотреть: плейлист «Advanced TypeScript».
• Уровень: Middle+
• Плюсы: реальные кейсы из индустрии.
• Минусы: мало базовых тем.

5. Ben Awad

Ben — разработчик и ютубер, который показывает TypeScript в связке с React, GraphQL и Next.js. Его видео — это часто live coding, где он решает реальные задачи. Полезно смотреть, как мыслят опытные разработчики.

• Что смотреть: «TypeScript React Tutorial» и «Building a Full Stack App with TypeScript».
• Уровень: от Junior до Middle
• Плюсы: много проектов, живой код.
• Минусы: иногда слишком хаотично.

Лучшие онлайн-курсы по TypeScript (бесплатные и платные)

YouTube — это классно, но иногда хочется структурированного обучения с домашками и сертификатом. Вот курсы по TypeScript, которые реально стоят денег (или времени).

1. TypeScript: The Complete Developer's Guide (Udemy) — платный

Курс от Stephen Grider — один из самых популярных на Udemy. Он начинается с абсолютных основ и доходит до сложных тем вроде mapped types и conditional types. Огромный плюс — много практических проектов: от простого консольного приложения до полноценного React-приложения с TypeScript.

• Длительность: ~25 часов.
• Цена: часто бывает по ски