Учебник по TypeScript: Начальное руководство по усиленному JavaScript

Здравствуйте, будущий супергерой кодирования! ? Добро пожаловать на наш учебник по TypeScript. Я рад быть вашим проводником в этом захватывающем путешествии в мир TypeScript. Как кто-то, кто teaches программирование уже много лет, я с нетерпением жду возможности поделиться своими знаниями и помочь вам解锁 мощь этого удивительного языка.

Что такое TypeScript?

Давайте начнем с основ. TypeScript — это как болееcool и изысканный cousin JavaScript. Это программный язык, который основан на JavaScript, добавляя новые функции и помогая ловить ошибки до того, как они станут проблемами. Представьте JavaScript в элегантном костюме и с monocle — это и есть TypeScript!

Простой пример

Давайте сразу перейдем к простому примеру:

function greet(name: string) {
console.log(`Hello, ${name}!`);
}

greet("Alice"); // Вывод: Hello, Alice!
greet(123); // Ошибка: Аргумент типа 'number' не может быть присвоен параметру типа 'string'.

В этом примере мы определили функцию greet, которая принимает параметр name. Часть : string говорит TypeScript, что name должен быть строкой. Когда мы пытаемся вызвать greet с числом, TypeScript ловит ошибку еще до выполнения кода!

Why Learn TypeScript?

Вы можете задаться вопросом: "Зачем мне учиться TypeScript, когда уже есть JavaScript?" Отличный вопрос! Вот несколько убедительных причин:

1. Обнаружение ошибок рано: TypeScript помогает находить и исправлять ошибки до того, как ваш код даже запустится.
2. Лучшая среда для разработки: Получайте более聪明的 предложения кода и автоматическое завершение в вашем редакторе.
3. Чистый код: TypeScript делает ваш код更容易 читаемым и понятным.
4. Масштабируемость: Он великолепен для больших проектов и команд.

Кто должен учиться TypeScript?

TypeScript подходит всем! Независимо от того, являетесь ли вы:

• Полным новичком в программировании
• Разработчиком JavaScript, стремящимся подняться на новый уровень
• Частью команды, работающей над крупномасштабными приложениями

TypeScript предлагает что-то для каждого. Это как учиться ездить на велосипеде с тренировочными колесами — он дает вам дополнительную поддержку, пока вы учитесь, но вы все равно можете выполнять все классные трюки!

Предварительные условия для изучения TypeScript

Прежде чем мы углубимся, вот что вам следует знать:

• Основное понимание программных концепций (переменные, функции и т.д.)
• Некоторая familiarτητα с JavaScript (но не волнуйтесь, если вы немного подзабыли!)

Если у вас этого нет? Нет проблем! Мы рассмотрим основы по мере продвижения.

Начало работы с TypeScript

Установка

Во-первых, установим TypeScript на ваш компьютер. Откройте терминал и выполните:

npm install -g typescript

Это установит TypeScript глобально на вашем компьютере. Теперь вы готовы начать программирование!

Ваш первый TypeScript-программа

Давайте напишем простую программу для вычисления площади круга:

function calculateCircleArea(radius: number): number {
const pi: number = 3.14159;
return pi * radius * radius;
}

const area: number = calculateCircleArea(5);
console.log(`Площадь круга равна ${area.toFixed(2)} квадратных единиц.`);

Давайте разберем это:

1. Мы определили функцию calculateCircleArea, которая принимает параметр radius типа number.
2. Часть : number после объявления функции указывает, что функция будет возвращать число.
3. Мы вычисляем площадь по формуле πr².
4. Мы вызываем функцию с радиусом 5 и сохраняем результат в area.
5. Наконец, мы выводим результат, используя toFixed(2) для округления до двух знаков после запятой.

Чтобы запустить эту программу, сохраните ее как circle.ts, затем скомпилируйте и запустите:

tsc circle.ts
node circle.js

Вы должны увидеть вывод: "Площадь круга равна 78.54 квадратных единиц."

Типы TypeScript

Одна из superpowers TypeScript — это его типовая система. Давайте рассмотрим некоторые распространенные типы:

Тип	Описание	Пример
number	Числовые значения	let age: number = 30;
string	Текстовые значения	let name: string = "Alice";
boolean	True/false значения	let isStudent: boolean = true;
array	Список значений	let fruits: string[] = ["apple", "banana"];
object	Пары ключ-значение	let person: { name: string, age: number } = { name: "Bob", age: 25 };
any	Любой тип (используйте осторожно!)	let data: any = 42;

Вот более сложный пример с использованием нескольких типов:

interface Student {
name: string;
age: number;
grades: number[];
isActive: boolean;
}

function printStudentInfo(student: Student): void {
console.log(`Name: ${student.name}`);
console.log(`Age: ${student.age}`);
console.log(`Average Grade: ${calculateAverage(student.grades)}`);
console.log(`Active: ${student.isActive ? "Yes" : "No"}`);
}

function calculateAverage(grades: number[]): number {
const sum = grades.reduce((acc, grade) => acc + grade, 0);
return sum / grades.length;
}

const alice: Student = {
name: "Alice",
age: 20,
grades: [85, 90, 92],
isActive: true
};

printStudentInfo(alice);

Этот пример демонстрирует:

1. Использование interface для определения сложного типа (Student).
2. Работа с массивами и объектами.
3. Использование типовых аннотаций в параметрах и типах возвращаемых значений функций.
4. Условный (ternary) оператор для краткой логики if/else.

Компиляция и выполнение TypeScript-программ

Чтобы запустить программы на TypeScript, их нужно сначала скомпилировать в JavaScript. Вот процесс:

1. Напишите ваш код на TypeScript (например, app.ts)
2. Скомпилируйте его: tsc app.ts
3. Запустите resulting JavaScript: node app.js

Совет: Используйте tsc --watch app.ts, чтобы автоматически перекомпилировать при сохранении изменений!

TypeScript в реальном мире

TypeScript не только для обучения — он используется во многих популярных библиотеках и фреймворках:

• Angular (фреймворк для веб-приложений от Google)
• React (с поддержкой TypeScript)
• Node.js (для серверной стороны JavaScript)
• Vue.js (с поддержкой TypeScript)

Изучение TypeScript открывает двери к работе с этими мощными инструментами!

Заключение

Поздравления! Вы сделали свои первые шаги в мир TypeScript. Мы рассмотрели основы, но впереди так много интересного. Помните, что обучение кодированию похоже на обучение новому языку — практика, терпение и persistence являются ключом к успеху.

Продолжая ваше путешествие с TypeScript, не бойтесь犯 ошибок. Каждая ошибка — это возможность для обучения. Продолжайте программировать, продолжайте экспериментировать и, самое главное, получайте удовольствие!

Счастливого кодирования и пусть ваши приключения с TypeScript будут свободны от ошибок и наполнены радостью! ?✨

Credits: Image by storyset