☕ Самоучитель для начинающих: как освоить TypeScript с нуля за 30 минут?

Работа мечты в один клик 💼

💭Мечтаешь работать в Сбере, но не хочешь проходить десять кругов HR-собеседований? Теперь это проще, чем когда-либо!

💡AI-интервью за 15 минут – и ты уже на шаг ближе к своей новой работе.

Как получить оффер?
📌 Зарегистрируйся
📌 Пройди AI-интервью
📌 Получи обратную связь сразу же!

HR больше не тянут время – рекрутеры свяжутся с тобой в течение двух дней! 🚀

Реклама. ПАО СБЕРБАНК, ИНН 7707083893. Erid 2VtzquscAwp

Мы расскажем об истории создания и особенностях синтаксиса TypeScript, а также приведем список литературы для более полного погружения в тему и развития навыков программирования.

История TypeScript

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

Ориентирован TypeScript на прикладные задачи – он помогает кратко и точно выражать идеи (писать более читаемый код), а также обеспечивает масштабируемость и безопасность приложений. Эта надстройка вокруг основного языка JavaScript дает разработчикам статическую типизацию и приведение типов.

Главные преимущества TypeScript:

1. Если тип переменной не поддерживает некую операцию, компилятор выдаст ошибку.
2. Читаемость кода упрощает разработчикам поддержку чужих приложений.
3. Если код компилируется, скорее всего он работает.
4. При внесении правок в код среда сразу укажет на измененные классы и функции, а также предупредит об ошибках компиляции (упрощается рефакторинг).

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

Чтобы начать работать с TypeScript, рассмотрим два варианта: установку через NPM или как плагин к Visual Studio.

Установка через NPM

Node.js – самая популярная платформа для исполнения серверных и клиентских приложений. После ее установки потребуется выполнить команду:

        npm install -g typescript
    

В некоторых случаях (например, в OS X) для установки пакета нужно использовать механизм повышения привилегий sudo:

        sudo npm install -g typescript
    

Использование Visual Studio

Если при инсталляции IDE отметить опцию "Node.js development", установятся все средства для работы с TypeScript.

Синтаксис TypeScript

В TypeScript есть разные типы переменных, а проверка корректности значений перед обработкой позволяет сделать поведение кода более предсказуемым. Язык модули, функции, переменные, операторы и выражения, а также комментарии.

Можно добавлять объявления типов к переменным, параметрам функций и возвращаемым значениям. Тип записывается после двоеточия после имени переменной.

        var num: number =5;
    

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

Большинство из этих типов соотносится с примитивными типами из JavaScript.

{ } – комплексный объект, которому можно определить свойства или индикатор:

        {name: string, age: number} // объект с атрибутами имени и возраста.
    

или

        let person = {name:"Kira", age:25};
console.log(person.name);
// Другой вариант получения свойства. Результат одинаковый
console.log(person["name"]);
    

Рассмотрим пример кода:

        let person = { name: "Kira", age: 25 };
person = { name: "Ira" };
    

Во второй строке мы получим ошибку, поскольку объект person имеет два свойства name и age. Должно быть соответствие по названиям, количеству и типу свойств.

Array используется для определения типов элементов массива.

Указать тип можно двумя способами: Array <T> и T[ ]

Массив чисел Number [ ]

Пример:

        let list: number[] = [11, 22, 33];
let colors: string[] = ["red", "green", "blue"];
console.log(list[0]); // 11
console.log(colors[1]); // green
    

Массив строк Array <string>:

        let names: Array<string> = ["Kira", "Ira", "Vera"];
console.log(names[1]); // Ira
    

Enum – перечисление, возможность дать имена наборам числовых значений:

        enum Day {
 Monday,
 Friday,
 Saturday,
}
let b: Day = Day.Friday
    

Кортежи в TypeScript имеют фиксированное количество элементов определенных типов:

        // Declare a tuple type
let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
// Initialize it incorrectly
x = [10, "hello"]; // Error

    

Компилятор выдаст приблизительно такие сообщения об ошибках:Type 'number' is not assignable to type 'string'.

Type 'string' is not assignable to type 'number'.

        // Определение кортежа – кортеж состоит из двух элементов – строки и числа
let user: [string, number];
// Инициализация кортежа
user = ["Kira", 25];
// Неправильная инициализация – переданные значения не соответствуют типам по позиции
//userInfo = [25, "Kira"]; // Ошибка
// Использование кортежа
console.log(user[1]); // 25
user[1] = 26; // а тут мы поменяли значение 25 на 26
    

Параметры функций подразделяются на параметры по умолчанию, однотипные и необязательные.

1. По умолчанию function NAME_F (NAME_P:тип = “х”):

Пример:

        // Определение функции
function add(a: number, b: number): number {
 return a + b;
}

// Вызов функции
let result1 = add(1, 2); // результат 3
    

Для определения классов поддерживаются модификаторы контроля доступа public, protected и private:

Класс, название, атрибуты:

        class User {
 name: string;
 surname: string;
 year: number;
}
    

Тот же класс, вместе с модификаторами:

        class User {
 protected name: string;
 public surname: string;
 private _year: number;
}
    

Идентификаторы чувствительны к регистру, не могут быть ключевыми словами и не должны содержать пробелы.

Например, Name_one, Name_1, Name1, Name$.

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

Hello world

TypeScript является надмножеством ES5 и включает предлагаемые для ES6 функции, поэтому любая программа на JavaScript – уже и программа на TypeScript (обратное неверно).

• Создаём базовый файл index.html

        <!doctype html>
<html lang=”en»>
<head>
	<meta charset=”UTF-8”>
	<title>Learning TypeScript</title>
</head>
<body>
	<script scr=”HelloWorld.js”></script>
</body>
</html>

    

• Создаем файл с расширением HelloWorld.ts и добавляем в него следующую строку:

        alert(‘hello world in TypeScript!’);
    

• Компиляция. Чтобы преобразовать наш файл в файл на JavaScript нужно в командной строке запустить:

        tsc HelloWorld.ts
    

6 книг по TypeScript для углубленного изучения

Мануал по TypeScript занимает всего 10 страниц. Восполнить пробелы помогут книги с задачами и описаниями чужого опыта. Больше практики, меньше теории.

• «Профессиональный TypeScript. Разработка масштабируемых JavaScript-приложений», Борис Черный.
• «Эффективный TypeScript: 62 способа улучшить код», Дэн Вандеркам.
• «Изучаем TypeScript 3», Натан Розенталс.
• «TypeScript», Jesse Russell, Ronald Cohn.
• «Angular и TypeScript. Сайтостроение для профессионалов», Яков Файн, Антон Моисеев.
• Бесплатное пособие «TypeScript Deep Dive».

Если вы любите статически типизированные подходы в больших приложениях, TypeScript – то что нужно. Легкий в изучении, понятный и строгий на практике – отличный вариант для освоения премудростей веб-разработки. Удачи!