Недавно я хотел перенести не слишком большой проект, но в нем еще было несколько десятков файлов, написанных на JS, и поток не работал у меня. Я действительно хотел этого сладкого, сладкого совершенства в проверке типов, и хотел простой способ перейти от Flow к TS.

Я решил сделать рывок, и вот моя история о том, как мне это удалось.

  1. yarn add -D typescript @types/react @types/node @types/react-dom @types/jest
    В зависимости от того, что вы используете, может потребоваться добавить несколько других определений типов. В большинстве случаев yarn add -D @types/package-name у меня сразу работает, или команда выдает ошибку.
  2. Запустите yarn start. Это сгенерирует для вас tsconfig.json. Однако на этом этапе ваш проект выдаст миллион ошибок.
  3. Переименуйте все .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
  4. Исправьте все ошибки! Может потребоваться время.

Кроме того, если вы использовали 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 строк.
То есть два дня на написание типов и исправление скрытых ошибок, которые мне помогли увидеть ошибки типов / типов, а также другие соответствующие рефакторы.

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