question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support incremental transition from flow to typescript

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:3
  • Comments:5

github_iconTop GitHub Comments

7reactions
tebuevdcommented, Apr 1, 2020

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 😊

0reactions
dominicfrasercommented, Feb 7, 2021

Hey @penx.

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Incremental Migration to TypeScript on a Flowtype codebase
Moving all the code to TypeScript would be an unfeasible task. After release of Babel 7 with TypeScript support, this task became possible....
Read more >
Incremental Migration from JavaScript to TypeScript in Our ...
This means that when we migrated from Flow, we migrated the JavaScript code to TypeScript all at once. But that's not always the...
Read more >
How To Convert a JavaScript Project With Flow Types to ...
Are you interested in migrating from Flow to TypeScript? Want to update your code incrementally without having to do a total rewrite?
Read more >
Migrating millions of lines of code to TypeScript - Stripe
An incremental migration to TypeScript would force developers to work in both ... Both Flow and TypeScript support measuring type coverage, ...
Read more >
Converting a codebase from Flow to TypeScript
There are a lot of small and easy to implement changes between Flow and TypeScript. They're not difficult to do, there's just a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found