TypeScript Курс

Введение в TypeScript

Самоучитель Python 3, собранный из материалов данного сайта.Предназначен в основном для тех, кто хочет изучить язык программирования Python с нуля.

Введение в TypeScript: Первый шаг в мир профессионального программирования

Привет, будущий программист! 👋 Сегодня мы начинаем увлекательное путешествие в мир TypeScript. Представь, что ты строишь дом из Lego. Обычный JavaScript — это когда ты просто берешь детали и строишь, не глядя на инструкцию. TypeScript же — это как иметь подробную инструкцию, которая подсказывает, какие детали куда подходят, и не дает ошибиться!

Запомни: TypeScript — это "умный" JavaScript, который помогает писать код без ошибок. Он как опытный наставник, который всегда рядом!

Что такое TypeScript и зачем он нужен?

TypeScript (сокращенно TS) — это язык программирования, созданный компанией Microsoft в 2012 году. Он основан на JavaScript, но добавляет в него типы данных. Что это значит? Давай разберем на примере из жизни.

Представь, что ты собираешь рюкзак в школу. В обычном JavaScript ты можешь положить в рюкзак что угодно: учебник, яблоко, кроссовки — и никто не проверит, правильно ли ты это сделал. В TypeScript же у каждого отделения рюкзака есть подпись: "здесь только учебники", "здесь только еда". Если ты попытаешься положить кроссовки в отделение для учебников, программа сразу скажет: "Стоп! Так нельзя!"

// Пример из жизни: сбор рюкзака
let учебники: string[] = ["Математика", "Русский язык"]; // только текст
let еда: string[] = ["Яблоко", "Бутерброд"]; // только текст
let кроссовки: boolean = true; // правда или ложь

// Ошибка! Нельзя положить число в список учебников
// учебники.push(42); // TypeScript не даст это сделать!

Как работает TypeScript?

Когда ты пишешь код на TypeScript, он сначала проверяется на ошибки специальной программой — компилятором. Компилятор читает твой код, находит все проблемы и превращает его в обычный JavaScript, который понимают браузеры.

Это похоже на проверку сочинения учителем перед тем, как сдать его в печать. Учитель (компилятор) проверяет ошибки, исправляет их и только потом отдает готовую работу.

// Исходный код на TypeScript
let имя: string = "Анна";
let возраст: number = 15;

// Компилятор превращает это в JavaScript:
// let имя = "Анна";
// let возраст = 15;

Первая программа на TypeScript

Давай напишем нашу первую программу! Она будет приветствовать пользователя и спрашивать его имя.

// Программа "Знакомство"
let имяПользователя: string = "Миша"; // объявляем переменную с типом string (строка)
let возрастПользователя: number = 14; // объявляем переменную с типом number (число)

// Выводим приветствие
console.log("Привет, " + имяПользователя + "!");
console.log("Тебе " + возрастПользователя + " лет.");

// Проверяем, можно ли пользователю смотреть фильмы с рейтингом 16+
if (возрастПользователя >= 16) {
    console.log("Ты можешь смотреть этот фильм!");
} else {
    console.log("Извини, тебе еще рано смотреть этот фильм.");
}

Разберем код:

let имяПользователя: string = "Миша"; — мы создали переменную и сказали, что она может хранить только текст (string).
let возрастПользователя: number = 14; — переменная для чисел (number).
console.log() — команда для вывода информации на экран.
if...else — условный оператор, который проверяет условие.

Основные типы данных в TypeScript

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

Тип	Описание	Пример
`string`	Текст (строка)	`"Привет, мир!"`
`number`	Числа (целые и дробные)	`42, 3.14, -7`
`boolean`	Логическое значение (правда/ложь)	`true, false`
`array`	Массив (список значений)	`[1, 2, 3], ["a", "b"]`
`object`	Объект (набор свойств)	`{ имя: "Анна", возраст: 15 }`

Практический пример: Калькулятор оценок

Давай создадим программу, которая будет рассчитывать среднюю оценку ученика. Это поможет понять, как работают типы в реальной задаче.

// Калькулятор средней оценки
let оценки: number[] = [5, 4, 3, 5, 4]; // массив чисел (оценки)
let сумма: number = 0; // переменная для суммы

// Складываем все оценки
for (let i = 0; i < оценки.length; i++) {
    сумма = сумма + оценки[i]; // добавляем каждую оценку к сумме
}

// Вычисляем среднее арифметическое
let средняяОценка: number = сумма / оценки.length;

// Выводим результат
console.log("Твои оценки: " + оценки);
console.log("Средняя оценка: " + средняяОценка);

// Проверяем, как учишься
if (средняяОценка >= 4.5) {
    console.log("Отличник! Так держать! 🎉");
} else if (средняяОценка >= 3.5) {
    console.log("Хорошист! Можно и лучше! 💪");
} else {
    console.log("Нужно подтянуть учебу! 📚");
}

Что здесь происходит?

Мы создали массив оценки с типом number[] — это значит, что массив может содержать только числа.
В цикле for мы проходим по всем элементам массива и суммируем их.
Делим сумму на количество оценок, чтобы получить среднее.
Используем if...else для вывода сообщения в зависимости от результата.

Функции в TypeScript

Функции — это как маленькие программы внутри большой программы. Они помогают не повторять один и тот же код много раз. Представь, что ты печешь печенье: вместо того чтобы каждый раз замешивать тесто заново, ты один раз записываешь рецепт (функцию) и используешь его когда нужно.

// Функция для приветствия
function приветствие(имя: string): string {
    return "Привет, " + имя + "! Добро пожаловать на урок!";
}

// Функция для расчета возраста в днях
function возрастВДнях(лет: number): number {
    const дниВГоду: number = 365;
    return лет * дниВГоду;
}

// Используем функции
let сообщение: string = приветствие("Саша");
console.log(сообщение);

let возрастВДняхВаси: number = возрастВДнях(14);
console.log("Тебе примерно " + возрастВДняхВаси + " дней!");

Разбор функции:

function приветствие(имя: string): string — объявление функции. В скобках параметры с типами, после скобок — тип возвращаемого значения.
return — команда, которая возвращает результат работы функции.
Когда мы вызываем функцию приветствие("Саша"), она принимает имя и возвращает готовую строку.

Объекты — сложные типы данных

Объекты позволяют хранить связанные данные вместе. Это как анкета ученика: в ней есть имя, возраст, класс, любимый предмет — все в одном месте.

// Создаем объект "Ученик"
let ученик: {
    имя: string;
    возраст: number;
    класс: number;
    любимыйПредмет: string;
} = {
    имя: "Мария",
    возраст: 14,
    класс: 8,
    любимыйПредмет: "Информатика"
};

// Выводим информацию об ученике
console.log("Имя: " + ученик.имя);
console.log("Возраст: " + ученик.возраст + " лет");
console.log("Учится в " + ученик.класс + " классе");
console.log("Любит " + ученик.любимыйПредмет);

// Можно изменить свойство объекта
ученик.возраст = 15; // Мария стала старше
console.log("Теперь Марии " + ученик.возраст + " лет");

Интерфейсы — шаблоны для объектов

Когда нужно создать много похожих объектов, используют интерфейсы. Это как форма для выпечки: если у тебя есть форма для печенья, все печенья будут одинаковой формы.

// Создаем интерфейс "Ученик"
interface Ученик {
    имя: string;
    возраст: number;
    класс: number;
    любимыйПредмет?: string; // знак ? означает необязательное свойство
}

// Теперь создаем объекты по этому шаблону
let ученик1: Ученик = {
    имя: "Иван",
    возраст: 13,
    класс: 7,
    любимыйПредмет: "Математика"
};

let ученик2: Ученик = {
    имя: "Ольга",
    возраст: 15,
    класс: 9
    // любимыйПредмет можно не указывать
};

console.log(ученик1.имя + " учится в " + ученик1.класс + " классе");
console.log(ученик2.имя + " учится в " + ученик2.класс + " классе");

Массивы и работа с ними

Массивы — это списки данных. Они очень полезны, когда нужно хранить много однотипной информации, например, список учеников в классе или оценки за четверть.

// Создаем массив строк
let ученики: string[] = ["Анна", "Борис", "Виктор", "Галина"];

// Добавляем нового ученика
ученики.push("Дмитрий");

// Удаляем последнего ученика
ученики.pop();

// Находим индекс ученика
let индексБориса: number = ученики.indexOf("Борис");
console.log("Борис находится на позиции " + индексБориса);

// Проходим по всем ученикам
for (let i = 0; i < ученики.length; i++) {
    console.log("Ученик " + (i + 1) + ": " + ученики[i]);
}

// Современный способ перебора массива
ученики.forEach(function(ученик) {
    console.log("Привет, " + ученик + "!");
});

Условные операторы и логика

В программировании постоянно нужно принимать решения. Для этого используются условные операторы. Это как в жизни: "Если идет дождь, возьми зонт, иначе надень кепку".

// Программа для выбора одежды по погоде
let температура: number = 25;
let идетДождь: boolean = false;

if (температура > 30) {
    console.log("Одень футболку и шорты! 🩳");
} else if (температура > 20) {
    if (идетДождь) {
        console.log("Возьми легкую куртку и зонт! ☂️");
    } else {
        console.log("Одень джинсы и футболку! 👕");
    }
} else if (температура > 10) {
    console.log("Надень кофту! 🧥");
} else {
    console.log("Оденься тепло, возможно снег! ❄️");
}

// Логические операторы: && (И), || (ИЛИ), ! (НЕ)
let естьЗонт: boolean = true;
if (идетДождь && естьЗонт) {
    console.log("Можно идти гулять, у тебя есть зонт!");
} else if (идетДождь && !естьЗонт) {
    console.log("Лучше остаться дома!");
}

Циклы: повторение действий

Циклы позволяют выполнять одно и то же действие много раз. Это как если бы тебе нужно было написать "Я буду хорошо учиться" 100 раз — вместо того чтобы писать вручную, ты просто даешь команду компьютеру.

// Цикл for: знаем, сколько раз нужно повторить
console.log("Таблица умножения на 5:");
for (let i = 1; i <= 10; i++) {
    let результат: number = 5 * i;
    console.log("5 × " + i + " = " + результат);
}

// Цикл while: повторяем, пока условие верно
let счетчик: number = 10;
console.log("Обратный отсчет:");
while (счетчик > 0) {
    console.log(счетчик + "...");
    счетчик--; // уменьшаем счетчик на 1
}
console.log("ПУСК! 🚀");

// Цикл do...while: выполняется хотя бы один раз
let попытка: number = 0;
do {
    console.log("Попытка номер " + (попытка + 1));
    попытка++;
} while (попытка < 3);

Обработка ошибок: try...catch

Иногда в программе могут возникать ошибки. TypeScript помогает их предотвратить, но если ошибка все же случилась, нужно уметь ее обработать. Это как подушка безопасности в машине — она срабатывает, когда что-то идет не так.

// Пример с возможной ошибкой
function деление(a: number, b: number): number {
    if (b === 0) {
        throw new Error("На ноль делить нельзя!");
    }
    return a / b;
}

// Обрабатываем возможную ошибку
try {
    let результат = деление(10, 0);
    console.log("Результат: " + результат);
} catch (ошибка) {
    console.log("Произошла ошибка: " + ошибка.message);
} finally {
    console.log("Этот блок выполняется всегда");
}

// Безопасная версия
function безопасноеДеление(a: number, b: number): number | null {
    if (b === 0) {
        return null; // возвращаем null вместо ошибки
    }
    return a / b;
}

let результат2 = безопасноеДеление(10, 2);
if (результат2 !== null) {
    console.log("Результат: " + результат2);
} else {
    console.log("Деление не удалось");
}

Практические задания

Теперь твоя очередь! Попробуй выполнить эти задания самостоятельно. Не бойся ошибаться — это нормальная часть обучения. Если что-то не получается, перечитай урок еще раз или попроси помощи у учителя.

Задание 1: Личный дневник

Создай программу для ведения личного дневника. У тебя должна быть структура для записи: дата, заголовок, текст записи, настроение (хорошее/нейтральное/плохое). Создай 3 разные записи и выведи их на экран.

// Подсказка: используй интерфейс для записи
interface ЗаписьДневника {
    дата: string;
    заголовок: string;
    текст: string;
    настроение: "хорошее" | "нейтральное" | "плохое";
}

// Создай массив записей и выведи их
// Твой код здесь

Задание 2: Игра "Угадай число"

Напиши программу, которая загадывает случайное число от 1 до 100, а пользователь должен его угадать. Программа должна давать подсказки "больше" или "меньше". Используй цикл и условные операторы.

// Подсказка: используй Math.random() для генерации числа
let загаданноеЧисло: number = Math.floor(Math.random() * 100) + 1;
let попытки: number = 0;
let угадано: boolean = false;

// Используй цикл while, пока не угадаешь
// В реальной программе нужно использовать prompt для ввода
// Но пока просто используй фиксированные значения для теста
// Твой код здесь

Задание 3: Калькулятор расходов

Создай программу для учета личных расходов за неделю. У тебя есть массив трат за каждый день. Программа должна:

Посчитать общую сумму расходов за неделю.
Найти самый дорогой день.
Посчитать средний расход в день.
Вывести отчет в красивом формате.

// Данные для работы
interface ДневныеРасходы {
    день: string;
    сумма: number;
    категория: string;
}

let расходыЗаНеделю: ДневныеРасходы[] = [
    { день: "Понедельник", сумма: 350, категория: "Еда" },
    { день: "Вторник", сумма: 200, категория: "Транспорт" },
    { день: "Среда", сумма: 500, категория: "Развлечения" },
    { день: "Четверг", сумма: 150, категория: "Еда" },
    { день: "Пятница", сумма: 600, категория: "Развлечения" },
    { день: "Суббота", сумма: 800, категория: "Покупки" },
    { день: "Воскресенье", сумма: 300, категория: "Еда" }
];

// Твой код: посчитай статистику и выведи отчет

Советы для выполнения заданий:

Начинай с простого — сначала заставь работать базовую часть.
Используй console.log() для проверки промежуточных результатов.
Если что-то не работает, проверь типы данных — возможно, ты пытаешься сложить строку с числом.
Не бойся экспериментировать! Ошибки — это часть обучения.

Заключение

Поздравляю! 🎉 Ты сделал первый шаг в мир TypeScript. Сегодня ты узнал:

Что такое TypeScript и зачем он нужен.
Основные типы данных: string, number, boolean, array, object.
Как создавать переменные и функции с типами.
Как использовать интерфейсы для создания шаблонов объектов.
Как работать с массивами и циклами.
Как обрабатывать ошибки.

TypeScript — это мощный инструмент, который используют профессиональные программисты по всему миру. Он помогает создавать большие и сложные проекты без ошибок. Продолжай практиковаться, и скоро ты сможешь писать свои собственные игры, веб-сайты и приложения!

Запомни главное: Программирование — это как решение головоломок. Чем больше ты практикуешься, тем лучше у тебя получается. Не сдавайся, если что-то не работает с первого раза — каждый великий программист начинал с нуля!

В следующем уроке мы поговорим о более сложных типах данных и научимся работать с классами. Увидимся! 👨‍💻👩‍💻