Избегайте ошибок TypeScript в своем проекте с помощью компилятора TypeScript


Введение

Предположим, у вас есть большой TypeScript-проект с большим количеством функций. В этом проекте перед вами стоит задача рефакторинга одного из самых важных компонентов во всем вашем приложении: формы регистрации пользователя (предполагается, что вы используете React), которая является чрезвычайно подробной и жизненно важной функцией в вашем приложении.

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

Конечно, вы можете использовать старый добрый Cmd+Shift+F или Ctrl+Shift+F, но есть другой более простой и лучший способ сделать это.

Чтобы исправить это, мы можем использовать tsc. Чем хорош tsc, так это тем, что с его помощью вы можете поддерживать целостность вашего проекта и не допускать в нем ошибок.

Прежде всего, что такое tsc?

Если вы новичок в TypeScript, то tsc — это The TypeScript Compiler. Это инструмент, отвечающий за преобразование вашего кода TypeScript (который является супермножеством JS) в обычный JavaScript. Поскольку на сегодняшний день браузеры понимают только код JavaScript, tsc делает ваш TS-код читаемым браузерами.

Хорошо, как это использовать?

Если у вас уже есть проект TypeScript с файлом tsconfig.json, а также файл package.json, добавьте свойство scripts, если его еще нет.

...
"scripts": {
  ...
},
...
Вход в полноэкранный режим Выход из полноэкранного режима

Здесь мы добавим нашу команду typecheck:

...
"scripts": {
  "typecheck": "tsc --project tsconfig.json --noEmit",
},
...
Войти в полноэкранный режим Выйти из полноэкранного режима

Хорошо, теперь давайте рассмотрим эту команду:

  1. Сначала мы запускаем компилятор tsc.
  2. Мы передаем флаг —project, чтобы явно сказать компилятору, что мы хотим проверить тип всего проекта, используя указанный нами файл конфигурации, которым является tsconfig.json.
  3. Наконец, мы передаем флаг —noEmit, чтобы сказать, что мы не хотим выводить скомпилированные JS-файлы в наш проект. Если мы не установим этот флаг и, например, у нас есть TS файл, расположенный по адресу src/utils/boolToText.ts, то будет создан файл src/utils/boolToText.js, который является JavaScript версией файла src/utils/boolToText.ts, выведенного компилятором.

Если в вашем коде нет ошибок TS, вы должны увидеть что-то вроде этого:

Если была найдена какая-то ошибка (ошибки), вы должны увидеть что-то вроде этого:

Теперь вы можете открыть файлы с ошибками и исправить их 🙂

Дополнительная конфигурация, которую вы можете использовать

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

Запуск на pre-commit с помощью husky и lint-staged

Одна вещь, которую я люблю делать, это настройка моей команды typecheck с lint-staged и husky на pre-commit вместе с моими tests и eslint проверкой.

Итак, мой файл .lintstagedrc.json выглядит примерно так:

{
  "*.{ts,tsx}": [
    "eslint 'src/**' --fix",
    "npm run test:staged"
  ]
}
Войти в полноэкранный режим Выйти из полноэкранного режима

А мой файл .husky/pre-commit выглядит следующим образом:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install lint-staged
npm run typecheck
Войти в полноэкранный режим Выход из полноэкранного режима

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

💡 Обратите внимание: Причина, по которой я не выполняю npm run typecheck внутри lint-staged, заключается в том, что, поскольку lint-staged запускает только staged файлы и передает текущий проверяемый файл в качестве аргумента выполняемой команде, мы не можем иметь ссылку на файл tsconfig.json (с флагом —project) и исходный файл для проверки в одной и той же команде. Если вы это сделаете, то получите ошибку TS5042: Option 'project' cannot be mixed with source files on a command line.. Передача npm run typecheck в husky pre-commit hook отдельно от lint-staged приведет к проверке всего проекта, а не только staged файлов. Это не идеально, но это работает! В официальном репозитории TypeScript есть проблема по этому поводу, если вы хотите взглянуть.

Если у вас еще не установлены lint-staged и husky, вы можете обратиться к их официальной документации:

  • lint-staged
  • husky

Создание задачи на VSCode для отслеживания ошибок

Еще одна хорошая вещь, которую вы можете сделать, — это создать задачу VSCode для отслеживания ошибок в вашем проекте в процессе написания кода.

Для этого:

  1. Откройте палитру команд (Cmd+Shift+P) или (Ctrl+Shift+P).
  2. Выберите Задачи: Настроить задачу.
  3. Выберите tsc: watch - tsconfig.json.
  4. Убедитесь, что опция "noEmit": true установлена в секции «compilerOptions» в вашем tsconfig.json, чтобы tsc не выводил js файлы по всему проекту.

Теперь в вашем проекте будет создан .vscode/tasks.json со следующим содержимым:

{
    "version": "2.0.0",
    "tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "option": "watch",
      "problemMatcher": [
        "$tsc-watch"
      ],
      "group": "build",
      "label": "tsc: watch - tsconfig.json"
    }
  ]
}
Войти в полноэкранный режим Выйти из полноэкранного режима
  1. Задайте пользовательский ярлык, если хотите.
{
    ...
    "tasks": [
    {
      ...
      "label": "Watch for TypeScript errors"
    }
  ]
}
Войти в полноэкранный режим Выйти из полноэкранного режима
  1. Теперь вы можете снова открыть палитру команд и выбрать Задачи: Запустить задачу.
  2. Выберите задачу Watch for TypeScript errors (или название, которое вы выбрали).

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

Поздравляем. Вы закончили создание задачи VSCode 🙂

Заключение

Поздравляем! Теперь у вас есть защищенный от ошибок проект, особенно если вы настроили husky и lint-staged.

Как всегда, улучшения и/или исправления приветствуются 😀.

Приятного кодинга!

Дальнейшее чтение

  • https://spin.atomicobject.com/2019/11/20/type-checking-typescript-visual-studio-code/
  • https://www.typescriptlang.org/docs/handbook/compiler-options.html

Оцените статью
Procodings.ru
Добавить комментарий