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

С тех пор, как я наконец присоединился к поезду React, я подумал, что, возможно, пришло время более серьезно взглянуть на TS, пока я могу делать это маленькими пошаговыми шагами, по одному пальцу ноги за раз.

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

Мои цели

Единственное, чего я хотел от этого эксперимента с опусканием пальцев ног, это:

  • В узле я хочу использовать import x from 'x' с конфигурацией от нуля до почти нуля (в идеале ноль… да, я хотел бы свой пирог, и я хотел бы его съесть)
  • Введите подсказки в моем коде (я использую VS Code)
  • Мой код продолжает работать без необходимости добавлять типы ко всему и, что важно: не нужно рефакторить мой код.

То, что, как мне кажется, немного усложняет мою задачу, чем «просто использовать TypeScript», заключается в том, что у меня в первую очередь есть работающая кодовая база. Поэтому я намерен портировать свой код.

Шаг 1: поиск минимального требования

Потребовалось некоторое время, чтобы найти минимальные требования для запуска моего кода. Я надеялся увидеть видео, объясняющее установи это и добавь это, но в конце концов я подумал, что нашел то, что искал, в электронной книге Глубокое погружение в TypeScript от @basarat.

По сути… видимо:

  1. npm i -D typescript @types/node
  2. tsc --init
  3. Использовать nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts в моих npm run dev сценариях

Пока не так уж плохо. Теперь, видимо, мне просто нужно переименовать src/index.js в src/index.ts, и все заработает.

Мой первый блокиратор

[ts] Cannot redeclare block-scoped variable 'directiveResolvers'. [2451]

Да… без понятия. Это не совсем понятно без поиска ответа в Google, и даже тогда я не был уверен, почему я вижу эту ошибку.

Я мог бы реорганизовать свой код, чтобы решить проблему (вместо объявления переменной directiveResolvers я бы экспортировал значение напрямую), но я все еще не знал, почему.

Итак, новый подход.

Миграционный подход

Другой дружественный твиттер посоветовал мне Руководство по миграции на TypeScript, которое стоило попробовать, так как я не мог обойти описанную выше ошибку (не без изменения моей кодовой базы).

Это означало откат моих предыдущих попыток (я использую git, так что это было безопасно) и вставку их минимального файла tsconfig.json:

{
  "compilerOptions": {
    "outDir": "./dist",
    "allowJs": true,
    "lib": ["esnext"],
    "target": "es5"
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules", "__tests__"]
}

Затем я запустил tsc в каталоге, в котором находился файл tsconfig.json.

Из-за моей существующей кодовой базы tsc начал выдавать много ошибок, например, сотни!

error TS2583: Cannot find name 'AsyncIterator'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.

Предложение в ошибке состояло в том, чтобы добавить "lib": ["es2015"] к tsconfig.json, за исключением того, что это вообще не сработало. Путем проб и ошибок я обнаружил, что использование esnext вместо этого позволяет мне работать без этой конкретной ошибки. Итак, теперь у меня были новые ошибки, с которыми нужно бороться…

Мои зависимости

Как только я исправил ошибку выше, tsc сильно пожаловался на большое количество кода, который я не распознал:

К счастью, имя файла было видно достаточно, чтобы понять, что процесс компиляции идет в каталог node_modules, и я полагаю, что в конфигурации была опция exclude.

За исключением добавления

"exclude": ["node_modules"]

… не сработало — и по-прежнему выдавало те же ошибки TypeScript. Вот где я оставил это на данный момент.

Обычные разочарования

Я работаю один, и поэтому у меня нет никого, к кому я мог бы легко обратиться, чтобы задать очевидные вопросы, такие как «что я здесь не так делаю». В руководстве по миграции с JavaScript на веб-сайте TypeScript сразу после базовой настройки он заканчивается:

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

Чего я, конечно, нет. К сожалению, нет предложенного пути вперед, если вы попадаете в категорию «каким-то образом потерпевшего неудачу».

Так что тем временем я обратился к StackOverflow (что кажется… каким-то жутким), в надежде, что я смогу получить ответ на свой текущий сбой сборки и надеюсь продолжить эту историю с падением пальцев ног.

Увы, пока такое ощущение, что Object.freeze(toe) гангренозно отвалился...

Я вернусь с новыми пальцами (и, возможно, меньше каламбуров) ✊

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

Первоначально опубликовано в журнале Remy Sharp’s b:log