Support incremental transition from flow to typescript

[penx]

Is your proposal related to a problem?

If you have a codebase written in Flow but want to transition to TypeScript, it would be useful for Create React App to support doing this incrementally without additional config.

At the moment, when following the 'Adding Flow' instructions followed by the 'Adding TypeScript' instructions instructions, you get an error such as:

'import type' declarations can only be used in TypeScript files.  TS8006

    1 | // @flow
    2 | import React from 'react';
  > 3 | import type { Node } from 'react';

Example steps to recreate in the first 3 commits here:

https://github.com/penx/cra-flow-ts/commits/master

Describe the solution you'd like

If you follow the 'Adding TypeScript' instructions and add TypeScript to a project that already uses Flow, it should compile both Flow and TypeScript files correctly.

Describe alternatives you've considered

This is possible by manually editing .tsconfig after it is generated, as per @tebuevd's comment below. However, Create React App should detect the presence of flow (either flow-bin being in dependencies or presence of a .flowconfig file) and setup .tsconfig to have "include": ["src/**/*.ts", "src/**/*.tsx"] and "allowJs": false when it is generated.

[tebuevd]

This actually already works. Here is a tsconfig.js file my team is using to transition away from Flow incrementally:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "strictNullChecks": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}

The important part to make it work is the the include line 😊

[penx]

@tebuevd Thanks! I've updated the ticket accordingly. The allowJs: false also seems important in some cases, maybe when TypeScript files import JavaScript files.

[penx]

As create-react-app complains if there's both a tsconfig.json and a jsconfig.json - would the settings above still respect what you have in tsconfig.json when transpiling JS files?

[tebuevd]

Sorry, I'm not familiar with jsconfig.json. We don't use it in our project.

[dominicfraser]

Hey @penx.

From what I can see TypeScript's target settings are not used at all with create-react-app. This is detailed in #5771 and appears to still be accurate in February 2021 (to the best of my understanding).