О том, как я свой первый frontend проект на TypeScript переписывал

~2 минуты

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции

О том, как я свой первый frontend проект на TypeScript переписывал главное изображение

В самом начале мне потребовалось правильно настроить окружение, ведь сам код, на самом деле, не сильно отличается от его версии на JavaScript.

Устанавливаю TypeScript

Сперва я установил TypeScript и необходимые модули:

npm install typescript --save-dev

npm install @types/node --save-dev

@types/node требуется для подключения readline-sync через require.

Настраиваю ESLint и Prettier

Зачем нужен Prettier? Всё просто, он делает код более красивым (например, может разбить слишком длинную строку).

npx eslint --init

Здесь выбирал всё то же, что и в первом проекте, но в вопросе про TypeScript нажимал на yes.

Про установку и настройку Prettier вы можете посмотреть на их официальном сайте, тут я лишь покажу итоговые настройки.

.eslintrc.yml

extends:
  - plugin:@typescript-eslint/recommended
  - plugin:import/errors
  - plugin:import/warnings
  - plugin:import/typescript
  - airbnb-base
  - plugin:prettier/recommended
  - prettier

plugins:
  - '@typescript-eslint'
  - 'prettier'

package.json

"devDependencies": {
    "@types/node": "^16.10.3",
    "@typescript-eslint/eslint-plugin": "^4.33.0",
    "@typescript-eslint/parser": "^4.33.0",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-prettier": "^4.0.0",
    "prettier": "^2.4.1",
    "readline-sync": "^1.4.10",
    "typescript": "^4.4.3"
  }

Немного отредактировал Makefile

Запуск линтера осуществляю следующим образом:

npx eslint **/*.ts

Так линтер будет проверять только TypeScript файлы.

Теперь я смог приступить к самому интересному, коду

Создал копии своих .js файлов в разрешении .ts и скопировал туда весь код.

Единственное отличие – импорт readline-sync, он теперь осуществляется следующим образом:

import readlineSync = require("readline-sync");

Дальше я запускаю проверку линтером и исправляю всё на что тот ругается.

Завершаю проект

Когда я закончил исправлять все ошибки и ESLint вернулся со статусом "0", приступил к компиляции TypeScript кода в JavaScript. Делается это при помощи запуска компилятора командой tsc.

После этого проверил работоспособность проекта и выложил свой код :)

Если вам интересно что у меня в итоге получилось, то добро пожаловать на мой GitHub.

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

А на этом у меня всё, спасибо за внимание!

Шахзод Давлатов 14 октября 2021