В этой статье мы рассмотрим обзор и настройку 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 и получить подписку. Я буду уверен, что всякий раз, когда я получу хорошую статью, я лично отправлю вам электронное письмо для этого без какой-либо спам-почты.