Skip to content

Latest commit

 

History

History
177 lines (124 loc) · 3.62 KB

readme.md

File metadata and controls

177 lines (124 loc) · 3.62 KB
Raw




🎉 Using TypeScript is fun, but Flow is even better. The typing systems are similar, but the community is quickly supporting Flow for React. Take React Native for example, Flow is supported by default while TypeScript is a nightmare to configure (think /build dir, hot reloading, and concurrent typescript compilation separate from babel).

With this increase in open-source effort, many companies are doubling down on Flow (Facebook, Uber, etc.).


Adopt Flow instantly with TypeWriter.


⚡️ Tell TypeWriter which files you care about, and it will run a big list of codemods instantly!

⚠️ This is early stage software. There will be bugs. Please help improve it by using this and reporting issues ⚠️

🔧 There is minor manual work after running TypeWriter. If you see room for improvement, create an issue!


Install

$ npm install --global tw-cli

Usage

$ typewriter src
✔ Converted src/index.ts -> src/index.js
✔ Converted src/App.tsx -> src/App.jsx

See more examples


Codemods Included

  • Rename files from .ts -> .js & .tsx -> .jsx
  a.ts -> a.js
  a.tsx -> a.jsx

  • Add flow keyword quote (// @flow)
  "content" -> "// @flow\ncontent"

  • Remove public and private keywords
  "public render()" -> "render()"

  • interface -> type
  "interface Prop {}" -> "type Prop = {}"

  • Type imports
  • ensure your types are in types, types/*, interface/*, or interfaces/*
// imports from types change
// "import {Prop} from './types'" -> "import type {Prop} from './types'"

// imports from everywhere else are left alone
// "import {NotProp} from './not-types'" -> "import {NotProp} from './not-types'"

  • Remove readonly

Before:

{
  readonly color: string
}

After:

{
  color: string
}

  • JSX.Element -> React.Node

In prop typings for TypeScript, a react element is called JSX.Element while in Flow this is React.Node.

Before:

{
  element: JSX.Element;
}

After:

{
  element: React.Node;
}

More Help

$ typewriter --help

  TypeScript -> Flow Converter

  Usage
     $ typewriter <path|glob> [...]

  Examples
     $ typewriter index.ts
     ✔ Converted index.ts -> index.js

     $ typewriter src
     ✔ Converted src/index.ts -> src/index.js
     ✔ Converted src/App.tsx -> src/App.jsx

     # ignore node_modules

     $ typewriter * '!node_modules/*'
     ✔ Converted src/index.ts -> src/index.js
     ✔ Converted src/App.tsx -> src/App.jsx
     ✔ Converted index.ts -> index.js

Support Development

The work done for this project is free. If you save time with TypeWriter, consider making a donation.

Are Bitcoin (BTC) donations more your style?

14xAeqDucUpRZkSDQrHCXaKsWmNPeqaB5q

License

MIT © Dawson Botsford