В этой статье мы рассмотрим обзор и настройку TypeScript в нашей локальной среде.

Машинопись

Это язык с открытым исходным кодом, который основывается на JavaScript, добавляя некоторые дополнительные функции, также известные как Superset как JavaScript.

Его также можно назвать JavaScript + некоторые другие функции (основной причиной являются статические типы).

Чем отличается TypeScript??

TypeScript имеет множество различных преимуществ, перечисленных ниже:

  • Он предлагает дополнительные функции для JavaScript со статическими типами.
  • Использование типов совершенно необязательно.
  • Компилируется в обычный JavaScript.
  • Также может использоваться для внешнего интерфейса JavaScript, а также для внутреннего интерфейса с Node.JS.
  • Включает в себя большинство функций из ES6, ES7 (классы, стрелочные функции и т. д.).
  • Типы из сторонних библиотек можно добавлять с помощью определений типов.
  • Итак, это были основные преимущества TypeScript, которые может предложить ванильный TypeScript.

Типы языков программирования

В программировании есть два типа языков программирования:

  • Динамически типизированный язык
  • Статически типизированный язык

Динамически типизированный язык

При этом типы связаны со значениями времени выполнения и не называются явно в вашем коде.

Пример динамически типизированного языка: JavaScript, Python, Ruby, PHP.

Статически типизированный язык

При этом типы явно назначаются переменным, функциям, параметрам, возвращаемым значениям и т. д.

Пример статически типизированного языка: Java, C, C++, Rust, Go.

Но каковы плюсы и минусы использования TypeScript вместо обычного JavaScript

Таким образом, есть много плюсов и минусов использования TypeScript вместо обычного JavaScript.

Плюсы перечислены ниже: -

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

Всякий раз, когда приходит что-то хорошее, вместе с ним приходит и плохое.

Минусы перечислены ниже: -

  • Больше кода для написания.
  • Больше, чтобы узнать
  • Требуемые компиляции
  • Ненастоящие статические типы (по мнению некоторых программистов)

Компиляция TypeScript

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

  • TypeScript использует расширения .ts и .tsx.
  • TSC ( компилятор TypeScript ) используется для компиляции .ts или .tsx файлов до .js
  • TSC может просматривать файлы и сообщать об ошибках во время компиляции.
  • Он может включать компиляцию .ts по умолчанию.
  • Большинство IDE отлично поддерживают TypeScript.
  • tsconfig.json используется для настройки работы TypeScript.

Итак, давайте закодируем настоящий JavaScript (не со слайдами, а с фактическим кодом).

Давайте установим TypeScript

Поскольку я работаю в Windows, давайте установим его глобально, поскольку TypeScript является необходимой частью всех моих проектов.

Итак, давайте попробуем нажать эту команду

В Windows =› npm i --global typescript

В Mac OS =› sudo npm i --global typescript

Вы можете попробовать ту же команду, что и для Mac OS в Linux, также я не уверен, какая команда будет работать для Linux.

После успешной установки TypeScript вы можете запустить эту команду, чтобы проверить, была ли она успешно установлена ​​или нет.

tsc -v

вывод должен быть что-то вроде Version 4.4.2 на дату 10 September 2021.

Итак, это была базовая настройка TypeScript для вашей локальной среды.

Теперь давайте напишем JavaScript + безопасность типов Я имею в виду TypeScript

После успешной установки создайте новый каталог с именем typescript Learning (назовите его как хотите)

затем создайте новое имя файла, должно быть что-то вроде <desiedNameHere>.ts (введите любое имя, которое вы хотите, вместо «desiedNameHere»)

Итак, давайте напишем здесь обычный JavaScript let id = 5;

а затем запустите свой терминал, и теперь вы можете ввести эту команду, чтобы преобразовать обычный JavaScript в обычный JavaScript (на данный момент).

tsc filename.ts (тип файла не обязателен, просто укажите название)

В основном он будет компилировать ваш код, доступный в формате файла формата .ts, в обычный JavaScript в ES5 (который установлен по умолчанию).

Теперь вы можете проверить скомпилированный код JavaScript в файле с таким же именем, но с расширением .js.

Теперь здесь вы можете видеть, что TypeScript компилирует код в ES5, который установлен по умолчанию, и поскольку функции let и arrow были выпущены с ES6, поэтому он не будет использовать что ( пока ).

Вы также можете сделать этот компилятор TypeScript для просмотра этого кода и компилировать любой код TypeScript, который мы записываем, в обычный JavaScript.

Вы можете сделать это, нажав эту команду

tsc --watch <fileName>.ts

А пока давайте попробуем преобразовать код TypeScript в ES6 JavaScript.

Настройка tsconfig.json

Давайте настроим TypeScript и отредактируем способ, которым код TypeScript будет компилировать код машинописного текста в обычный JavaScript.

Для настройки вы должны сначала нажать эту команду в своем терминале

tsc --init

это в основном создаст файл tsconfig.json и позволит вам использовать любые настройки, которые могут быть полезны в TypeScript, и TypeScript будет работать только на основе этого файла.

Итак, теперь откройте файл tsconfig.json и найдите, где написано target (в основном вы найдете его в строке номер 7)

Измените Target на ES6, если хотите.

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

Итак, я изменю настройку outDir (вы найдете это в строке номер 17 ).

и измените этот параметр на ./dist

а также добавьте новую строку после этого и сделайте ее корневой папкой и установите для нее значение ./src.

Корневой каталог предназначен для получения исходных файлов TypeScript.

Итак, теперь переместите t = ваш предыдущий файл TypeScript в каталог с именем src, где компилятор TypeScript будет искать файлы TypeScript.

и Теперь давайте скомпилируем файл TypeScript, но на этот раз мы скомпилируем их все, не указывая какой-либо конкретный файл.

Нажмите эту команду в своем терминале

tsc --watch

Что эта команда будет делать, так это просто просматривать все файлы внутри каталога SRC и преобразовывать их в обычный JavaScript, если обнаружит, что это файл TypeScript.

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

Вывод

Итак, на данный момент это была базовая установка для Vanilla TypeScript (как сказал мой наставник), и это была базовая файловая структура TypeScript для полного новичка.

Теперь мы углубимся в TypeScript, но это для другой статьи.

До тех пор я буду писать журнал разработки на этой платформе, только обязательно проверьте это.

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