Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

2 <h2>Содержание</h2>

3 <ul><li><a>Устанавливаю TypeScript</a></li>

4 <li><a>Настраиваю ESLint и Prettier</a></li>

5 <li><a>Немного отредактировал Makefile</a></li>

6 <li><a>Теперь я смог приступить к самому интересному, коду</a></li>

7 <li><a>Завершаю проект</a></li>

8 </ul><h2>Устанавливаю TypeScript</h2>

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

10 <p>npm install typescript --save-dev npm install @types/node --save-dev</p>

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

12 <h2>Настраиваю ESLint и Prettier</h2>

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

14 <p>npx eslint --init</p>

15 <p>Здесь выбирал всё то же, что и в первом проекте, но в вопросе про TypeScript нажимал на<em><strong>yes</strong></em>.</p>

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

17 <p>.eslintrc.yml</p>

18 <p>extends: - plugin:@typescript-eslint/recommended - plugin:import/errors - plugin:import/warnings - plugin:import/typescript - airbnb-base - plugin:prettier/recommended - prettier plugins: - '@typescript-eslint' - 'prettier'</p>

19 <p>package.json</p>

20 <p>"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" }</p>

21 <h2>Немного отредактировал Makefile</h2>

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

23 <p>npx eslint **/*.ts</p>

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

25 <h2>Теперь я смог приступить к самому интересному, коду</h2>

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

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

28 <p>import readlineSync = require("readline-sync");</p>

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

30 <h2>Завершаю проект</h2>

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

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

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

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

35 <p>А на этом у меня всё, спасибо за внимание!</p>