Изучение TypeScript — Полное руководство для начинающих. Часть 1 — введение и примитивные типы данных

Всем привет. Меня зовут Лихопой Кирилл и я — 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 index

TSC скомпилирует код в 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';

Подписывайтесь, чтобы не пропустить следующие части!