Skip to main content

From JS

Automated JS to TS Conversion​

for JSON - http://json2ts.com/ generate TypeScript interfaces from JSON

Manual JS to TS Conversion​

the "Just Renaming" strategy

  • OSX/Linux: find src -name "*.js" -exec sh -c 'mv "$0" "${0%.js}.tsx"' {} \;

You can either load typescript files with webpack, or use the tsc compiler to compile your TS files to JS side by side. The basic tsconfig.json is:

{
  "compilerOptions": {
    "allowJs": true
  }
}

Then you will want to enable it to check JS:

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  }
}

If you have a large codebase and this throws too many errors at once, you can opt out problematic files with //@ts-nocheck, or instead turn off checkJs and add a //@ts-check directive at the top of each regular JS file.

TypeScript should throw up some egregious errors here which should be easy to fix.

Once you are done, swallow the red pill by turning off implicit any's:

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "noImplicitAny": true // or "strict": true
  }
}

This will raise a bunch of type errors and you can start converting files to TS or (optionally) use JSDoc annotations in your JS.

A common practice here is using an ambient TODO type alias for any so you can keep track of what you need to come back to:

type TODO_TYPEME = any;
export function myFunc(foo: TODO_TYPEME, bar: TODO_TYPEME): number {
  // ...
}

Gradually add more strict mode flags like noImplicitThis, strictNullChecks, and so on until you can eventually just run in full strict mode with no js files left:

{
  "compilerOptions": {
    "strict": true
  }
}

3 Step Process​

image

https://speakerdeck.com/amhinson/convert-a-react-native-project-to-typescript-in-10-minutes?slide=23

More resources​

Old content that is possibly out of date