Недавно я хотел перенести не слишком большой проект, но в нем еще было несколько десятков файлов, написанных на JS, и поток не работал у меня. Я действительно хотел этого сладкого, сладкого совершенства в проверке типов, и хотел простой способ перейти от Flow к TS.
Я решил сделать рывок, и вот моя история о том, как мне это удалось.
yarn add -D typescript @types/react @types/node @types/react-dom @types/jest
В зависимости от того, что вы используете, может потребоваться добавить несколько других определений типов. В большинстве случаевyarn add -D @types/package-name
у меня сразу работает, или команда выдает ошибку.- Запустите
yarn start
. Это сгенерирует для васtsconfig.json
. Однако на этом этапе ваш проект выдаст миллион ошибок. - Переименуйте все
.js/.jsx
файлы вsrc
в.ts/.tsx
В MacOS один простой способ:brew install rename
cd src
rename "s/\.js/\.ts" **/*.{js,jsx}
b. Кроме того, переименуйте все файлы, содержащие код элемента React, в.tsx
Примеры:rename "s/\.ts/\.tsx" components/**/{index,index.test}.ts
rename "s/\.ts/\.tsx" views/**/{index,index.test}.ts
- Исправьте все ошибки! Может потребоваться время.
Кроме того, если вы использовали NODE_PATH
и, возможно ,SASS_PATH
для абсолютного импорта, вам нужно будет сделать следующее:
Создайте отдельный файл tsconfig.extended.json
(имя не имеет значения) с содержанием:
{ "compilerOptions": { "baseUrl": "src" } }
В tsconfig.json
в корне JSON добавьте: "extends": "./tsconfig.extended.json",
Причина, по которой вам нужно это сделать, заключается в том, что CRA удалит все свойства, которые сочтет недопустимыми в tsconfig.json
. Однако файлы, которые он расширяет, не касаются. И добавление этого действительно работает, так что, возможно, в ближайшем будущем он получит официальную поддержку.
В конце ваш tsconfig.json
может выглядеть так:
{ "extends": "./tsconfig.extended.json", "compilerOptions": { "module": "esnext", "target": "es5", "sourceMap": true, "allowJs": false, "skipLibCheck": false, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": false, "forceConsistentCasingInFileNames": true, "moduleResolution": "node", "resolveJsonModule": true, "noEmit": true, "jsx": "preserve", "downlevelIteration": true, "lib": [ "es2018", "dom" ], "isolatedModules": true }, "exclude": [ "node_modules" ], "include": [ "src" ] }
Некоторые вещи там были изменены по сравнению с tsconfig.json
по умолчанию, например allowJs
, lib
и strict
.
allowJs
неверно, потому что все файлы в моем проекте были изменениями в файлах TS, поэтому я использую .js
только для файлов, для которых явно не хочу проверять тип. Например, файл registerServiceWorker
, любые полифиллы или что-то еще, что я не хочу контролировать или не могу контролировать.
В lib
добавлены es2018
и dom
, поэтому TS знает о типах, связанных с окнами.
strict
неверно, потому что мне потребовалось бы гораздо больше времени, чтобы перенести проект в TS с включенным strict
. Одна из вещей, которые strict
делает, - это запрещать какие-либо неявные any
выведенные типы. Но для начала я установил false
. Со временем он будет перемещен в true
.
Все это заняло у меня около двух дней на базе кода, состоящей из 4000 строк.
То есть два дня на написание типов и исправление скрытых ошибок, которые мне помогли увидеть ошибки типов / типов, а также другие соответствующие рефакторы.
Я, вероятно, не рекомендую делать это на базе кода намного большей, чем эта, при условии, что у вас в первую очередь есть необходимое время.