Недавно я смотрел короткое видео, в котором автор использовал TypeScript, за исключением того, что единственное, что отличало TS в их коде, — это расширение файла. В остальном он выглядел идентично JavaScript, который я полюбил.
С тех пор, как я наконец присоединился к поезду React, я подумал, что, возможно, пришло время более серьезно взглянуть на TS, пока я могу делать это маленькими пошаговыми шагами, по одному пальцу ноги за раз.
У меня сложилось впечатление, что я могу использовать TypeScript так же, как я могу использовать компилятор SCSS с обычным CSS, и это приведет к рабочей сборке, то есть только с изменением имени файла на мой JavaScript (или достаточно близко).
Мои цели
Единственное, чего я хотел от этого эксперимента с опусканием пальцев ног, это:
- В узле я хочу использовать
import x from 'x'
с конфигурацией от нуля до почти нуля (в идеале ноль… да, я хотел бы свой пирог, и я хотел бы его съесть) - Введите подсказки в моем коде (я использую VS Code)
- Мой код продолжает работать без необходимости добавлять типы ко всему и, что важно: не нужно рефакторить мой код.
То, что, как мне кажется, немного усложняет мою задачу, чем «просто использовать TypeScript», заключается в том, что у меня в первую очередь есть работающая кодовая база. Поэтому я намерен портировать свой код.
Шаг 1: поиск минимального требования
Потребовалось некоторое время, чтобы найти минимальные требования для запуска моего кода. Я надеялся увидеть видео, объясняющее установи это и добавь это, но в конце концов я подумал, что нашел то, что искал, в электронной книге Глубокое погружение в TypeScript от @basarat.
По сути… видимо:
npm i -D typescript @types/node
tsc --init
- Использовать
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