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

Сторонникам Java понравится именно Javascript!

Не секрет, что одной из характеристик, которая удерживает многих разработчиков от мира JavaScript, является отсутствие строгих типов. Но вы можете спросить: Зачем вообще нужны типы? Они незаменимы? Ответ будет зависеть от того, кого вы спросите. Если бы мне пришлось ответить, я бы сказал…. ммм, может быть.

Рассмотрим эту функцию javascript:

function add(a, b) {
   return a + b;
}

Здесь нет ничего нового, это добавит два числа, не так ли? Не всегда! Что делать, если одним из параметров является строка, или, может быть, объект или массив, как насчет картошки. Будет ли работать с картофелем? Наверное, не так.

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

TypeScript спешит на помощь!

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

Давайте перепишем предыдущую функцию, используя машинописный текст:

function add(a:number, b:number):number {
   return a + b;
}

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

В настоящее время машинописный текст обычно используется для разработки приложений Angular. Но вполне возможно использовать его и для разработки приложений React и Node. Вот почему я считаю это инструментом, о котором нам следует узнать больше. Сделаем это!

Установка компилятора и настройка проекта песочницы

Во-первых, необходимо установить наш компилятор машинописного текста с помощью npm:

$npm install typescript -g

Давайте создадим новую папку. Вы можете называть его typescript-sandbox или любым другим именем, которое вам нравится. Переместитесь в эту папку с помощью cd.

$mkdir typescript-sandbox
$cd typescript-sandbox

На данный момент команда tsc уже доступна, и мы можем использовать ее для компиляции любого файла машинописного текста (с расширением ts), который нам нужен. Но давайте сначала инициализируем файл конфигурации машинописного текста, выполнив следующие действия:

$tsc --init

Вы заметите, что в нашем корневом проекте появился новый файл под названием tsconfig.json. Этот файл используется для настройки параметров компилятора, чтобы мы могли избежать использования командной строки.

Если вы посмотрите на этот файл, вы заметите несколько параметров конфигурации (большинство из них прокомментированы). Здесь мы собираемся внести некоторые минимальные изменения:

  • Измените целевое значение на “ES2016” , чтобы использовать функции ES7.
  • Раскомментируйте "noImplicitAny", чтобы получить сообщение об ошибке при обнаружении типа any.
  • Добавьте “noEmitOnError”: true, чтобы избежать компиляции в случае ошибки.
  • Добавьте “outDir”: “./dist” для вывода скомпилированных файлов в папку «dist».

В итоге этот tsconfig.json файл должен выглядеть так:

Привет, мир, класс

На этом этапе у нас должна быть возможность скомпилировать .ts файл. Мы можем сделать это, просто набрав tsc на терминале. Итак, давайте создадим класс машинописного текста, который будет регистрировать «Hello World» из своего конструктора. Мы можем определить этот класс внутри main.ts файла или с любым другим именем, которое вы предпочитаете.

class HelloWorld {
   constructor(name: string) {
      console.log(`Hello ${name}`);
   }
}
new HelloWorld("World");

Как видите, этот класс принимает строковый параметр в свой конструктор («Мир») и записывает в него приветственное сообщение. Давайте скомпилируем это, набрав tsc на терминале. Мы должны увидеть новую папку dist с main.js файлом внутри нее со следующим содержимым:

"use strict";
class HelloWorld {
   constructor(name) {
      console.log(`Hello ${name}`);
   }
}
new HelloWorld("World");

Скомпилированный файл JS очень похож на файл машинописного текста, что имеет смысл, поскольку мы установили ES2016 в качестве целевой версии в нашем tsconfig.json, поэтому классы JS доступны для использования.

Если мы изменим целевую версию на более старую (ES5), мы заметим - после повторной компиляции - существенную разницу:

"use strict";
var HelloWorld = /** @class */ (function () {
   function HelloWorld(name) {
      console.log("Hello " + name);
   }
   return HelloWorld;
}());
new HelloWorld("World");

Как вы, возможно, знаете, ES5 не поддерживает классы JS. Таким образом, компилятор всегда будет использовать прототипы функций.

Наконец, чтобы запустить этот код, мы можем использовать командную строку узла:

$node dist/main.js

Нам нужно запустить скомпилированный файл, а не машинописный. Наша среда узлов будет работать правильно, так как мы установили commonjs в качестве генератора модулей. Таким образом, любой оператор «import» будет правильно переведен на «require».

Если вы не хотите всегда писать tsc на терминале для компиляции кода, я рекомендую запустить компилятор в режиме просмотра, выполнив следующие действия:

$tsc --watch

Теперь каждый раз, когда вы вносите изменения, будет создаваться новый скомпилированный файл JS.

Вот и все! Наша песочница машинописного текста запущена и работает. Я предлагаю вам прочитать вторую часть этой статьи, чтобы узнать больше о синтаксисе машинописного текста.



Изучение основ TypeScript с нуля (Часть 2 - Синтаксис и функции)
Эта статья является второй частью моей серии статей« Изучение основ TypeScript . medium.com»