Всем привет. Меня зовут Лихопой Кирилл и я - Frontend-разработчик в компании Idaproject.
Представляю вашему вниманию cвою первую статью на Хабре, a точне перевод англоязычной статьи, на тему изучения TypeScript (TS, Тайпскрипт).
С начала этого года я начал изучать TS, и меня заинтересовала эта статья, так как в ней все разложено "по полочкам", без лишней воды и сложных определений. В следствие этого родилась идея сделать ее перевод, чтобы начинающие разработчики могли ознакомиться с этой статьей, но уже на русском языке. Итак, приступим.
В последние несколько лет TypeScript обретает все большую популярность. Более того, на многих вакансиях от программистов требуется знание TypeScript.
Однако не стоит бояться - если вы уже знаете JavaScript, то вам не составит большого труда освоить TypeScript.
Даже если вы не планируете изучать TypeScript, знакомство с ним позволит вам глубже понять JavaScript и стать лучше, как разработчик.
В этой статье (серии статей) вы узнаете:
Что такое TypeScript, и почему мне нужно изучить его?
Как создать проект с использованием TypeScript.
Главные концепты TypeScript (типы, интерфейсы, дженерики (обобщенные типы), утверждение типов и многое другое).
Как использовать TypeScript с React'ом.
Я также создал PDF-шпаргалку и постер, которые суммируют эту статью. Они помогут вам быстро понять и освежить в памяти все концпеты и синтаксис TypeScript.
Прим. переводчика: в скором времени будет выпущен перевод данной шпаргалки.
Что такое TypeScript?
TypeScript - это расширенная версия JavaScript. То есть он содержит в себе все то же самое, что и JavaScript, но с некоторыми дополнениями.
Главная причина использовать TypeSciprt - это возможность добавить статическую типизацию к JavaScript. Тип переменной со статической типизацией не может быть изменен после ее объявления. Это может предотвратить БОЛЬШОЕ количество багов.
С другой стороны, JavaScript - динамически типизированный язык, то есть типы переменных могуть изменяться. Например:
// JavaScript
let foo = "Привет";
foo = 55; // тип переменной foo изменяется со строки на число - никаких проблем
// TypeScript
let foo = "Привет";
foo = 55; // ERROR - тип переменной foo не может быть измененTypeScript не воспринимается браузерами, поэтому его надо скомпилировать в JavaScript с помощью TypeScript Compiler (TSC) - мы обсудим его чуть позже.
Стоит ли TypeScript того?
Почему вам нужно использовать TypeScript
Исследование показало, что TypeScript может обнаружить 15% самых частых багов.
Читаемость - намного проще видеть, что делает код. А при работе в команде проще видеть, что делают другие разработчики.
Популярность - знание TypeScript позволит вам расширить круг вакансий, на которые вы сможете претендовать.
Изучение TypeScript даст вам лучшее понимание и новый взгляд на JavaScript.
Здесь вы можете прочитать мою короткую статью, в которой я показываю, как TypeScript может предотвращать раздражающие баги.
Недостатки TypeScript
Написание кода на TypeScript занимает большее время, чем на JavaScript,так как необходимо типизировать переменные. Так что в небольших проектах, возможно, оно не стоит того.
TypeScript необходимо компилировать, а это занимает время, особенно в больших проектах.
Однако время, которое вы потратите на написание более точного кода и компилляцию будет более чем компенисровано тем, сколько багов могло бы быть в вашем коде.
Для большинства проектов - средних и больших - TypeScript сэкономит вам много времени и сил.
Более того, если вы уже знаете JavaScript, то изучение TypeScript не составит вам большого труда. Он станет отличным инструментом в вашем арсенале.
Как настроить TypeScript проект
Установка Node и компилятора TypeScript (TSC)
Для начала убедитесть, что Node глобально установлена на вашей машине.
Затем, глобально установите компилятор TypeScript на вашей машине следующей командой:
npm i -g typescriptУбедитесь, что установка прошла успешно (если да - то команда вернет номер версии).
tsc -vКак компилировать TypeScript
Откройте любой текстовые редактор и создайте TypeScript-файл (например, index.ts).
Напишите какой-нибудь код на JavaScript или TypeScript:
let sport = 'Футбол';
let id = 5;Мы можем скомпилировать это в JavaScript следующей командой:
tsc indexTSC скомпилирует код в JavaScript-файл index.js:
var sport = 'Футбол';
var id = 5;Если вы хотите изменить название файла:
tsc index.ts --outfile file-name.js
Если вы хотите, чтобы TSC компилировал ваш код автоматически, при изменениях, добавьте флаг “watch” (-w):
tsc index.ts -w
Интересная особенность TypeScript - он сообщает об ошибках в вашем текстовом редакторе, пока вы пишете код, но он все равно всегда скомпилирует ваш код - в независимости от того, есть в нем ошибки, или нет.
Например, следующий пример вызывает ошибку TypeScript:
var sport = 'Футбол';
var id = 5;
id = '5'; // Ошибка компилятора - Error: Type 'string' is not assignable to type 'number'.Однако, если мы попытаемся скомпилировать код с помощью tsc index , код скомпилируется, несмотря на ошибку.
Это важное преимущество TypeScript: он предполагает, что разработчик знает больше. Несмотря на то, что TypeScript выдает ошибку, это не отразится на компиляции вашего кода. Он скажет, что есть ошибка, но делать с ней что-то или нет - решать вам.
Как настроить файл конфигурации TypeScript
Файл конфигурации TS должен находиться в корневой директории вашего проекта. В этом файле мы можем уточнить корневые файл, опции компилятора и насколько строго мы хотим, чтобы TypeScript делал проверку в нашем проекте.
Сначала создаейте файл конфигурации TS:
tsc —init
После этого, в корневой директории, у вас должен появиться файл tsconfig.json .
Вот пример некоторых опций, о которых стоит знать (если вы используете frontend-фреймворк с TypeScript, то о большинстве этих вещей уже позаботились):
{
"compilerOptions": {
...
/* Модули */
"target": "es2016", // Измените на "ES2015", чтобы скомпилировать в ES6
"rootDir": "./src", // Откуда компилировать
"outDir": "./public", // Куда компилировать (обычно папка, которая разворачивается на сервере)
/* Поддержка JavaScript */
"allowJs": true, // Позволяет компилировать JS-файлы
"checkJs": true, // Проверяет типы в JavaScript-файлах и сообщает об ошибках
/* Emit */
"sourceMap": true, // Создать source map файлы для готовых файлов JavaScript (хороошо подходит для дебаггинга)
"removeComments": true, // Игнорировать комментарии
},
"include": ["src"] // Компилировать только файлы из папки src
}
Скомпилировать все и наблюдать за изменениями:
tsc -w
Напоминание: если вы указываете входные файлы в коммандной строке (например, tsc index ), файлы tsconfig.json будут игнорироваться.
Типы данных в TypeScript
Примитивы
В JavaScript примитивы значение - это данные, которые не являются объектами и не имеют методов. Всего есть 7 примитивных типов:
string
number
bigint
boolean
undefined
null
symbol
Примитивы иммутабельны: они не могут быть изменены. Важно не путать сами примитивы и переменные, объявленные, как примитивы. Переменной может быть назначено новое значение, но текущее значение не может быть изменено, так же, как могут быть изменены объекты, массивы и функции.
Например:
let name = 'Денис';
name.toLowerCase();
console.log(name); // Денис - метод строки не может изменить саму строку
let arr = [1, 3, 5, 7];
arr.pop();
console.log(arr); // [1, 3, 5] - метод массива изменяет массив
name = 'Анна' // присваивание дает примитиву новое (не измененное) значениеВ JavaScript все примитвные значение (кроме null и undefined) имеют объектные эквиваленты, которые являются оболочкой для примитивы. Эти объекты-оболочки - String, Number, BigInt, Boolean и Symbol. Они имеют методы, которые позволяют манипулировать примитивами.
Теперь поговорим о TypeScript. В TypeScript мы можем указывать у переменной нужный нам тип данны с помощью : type после объявления переменной. Это называется объявлением типа, или подписью типа. Например:
let id: number = 5;
let firstname: string = 'Денис';
let hasDog: boolean = true;
let unit: number; // Объявление переменной без присваивания значение
unit = 5;Однако, в большинстве случаев, лучше не указывать тип явно, так как TypeScript автоматически присваивает тип переменной (вывод типа).
let id = 5; // TS знает, что это число
let firstname = 'danny'; // TS знает, что это строка
let hasDog = true; // TS знает, что это логическое значение
hasDog = 'yes'; // ERROR - TS выдаст ошибкуТакже, мы можем задать переменной объединенное значение. Объединенный тип - это переменная, которой можно присвоить более одного типа.
let age: string | number;
age = 26;
age = '26';Подписывайтесь, чтобы не пропустить следующие части!
