Could you share some case studies of JS-to-TS migration?
Lucidchart migrated their entire codebase of 600k lines across 2840 files in just three days, resulting in 500k lines of TypeScript code. About 80% of the conversion was aided by tools. They made a dependency graph in a spreadsheet, started converting from the leaves and moved up file by file. At each step, they checked that TS files compiled successfully. After pushing to production, the team expected issues to arise but none were reported.
allowJsoption. Any new files that you create should be in TypeScript.
You can start adding type checking to existing JS files using type declaration files, of extension
*.d.ts. Use the
typesoption when invoking the TS compiler. At a later stage, you can refactor your JS files into TS files, at which point type declaration files become redundant.
Gradually, legacy code can be migrated. Simply rename
*.tsfiles. Then start introducing type declarations in the legacy files, although TypeScript's type inference can resolve types in most cases. Linting can throw up a lot of issues when JS files are renamed to TS files. One approach is to disable linting by adding
// tslint:disableat the start of all legacy files. Then, enable linting file by file when you start working on them.
Do you have any tips for refactoring JS code to TS?
Since TypeScript is object-oriented, convert function constructors to class constructors. Give member variables explicit access modifiers. Use
publicbut you can restrict access using
private. Replace instance methods with arrow methods, which will use
thisreference to the object. Replace prototype methods with methods.
To pass TS compilation, you may be tempted to use
anytype: avoid doing this. However, since migration is often incremental, allow TypeScript to automatically infer the
anytype if type is not specified. You can suppress this behaviour later using the
Legacy code might contain runtime type checks and related exception handling. Because now type checking is done at compile time, these extra bits of code can be removed. This can even improve performance.
When migrating security code, it's recommended that critical code be migrated to TS first. App and third-party code can be migrated later.
What extra configuration should I do in a TypeScript project?
Webpack can be set up with a config file
webpack.config.js. This can make use of
ts-loaderto load TS files and
json-loaderfor JSON files. Type declarations for third-party JS modules can be installed from @types. For example, to install "prompt-sync" you can do
npm install --save-dev @types/prompt-sync. Another possible loader to use is
awesome-typescript-loader. This can be combined with
source-map-loaderto assist source level debugging.
Before migrating to TypeScript, it's good to ask what's the background of those who will be working on it. In one instance, a team of C# developers could quickly learn TypeScript for frontend work. In fact, developers with a background in object-oriented programming will be able to pick up TypeScript easily.
Are there tools to automate JS-to-TS migration?
Back in 2015, JetBrains described how easy it is to use ReSharper 9 tool to perform conversions. Some of the limitations of the tool are possibly removed in later updates. The tool allows us to convert a file, an entire folder, a project or a solution.
Type definitions are now available via NPM at
@types. This deprecates earlier approaches: DefinitelyTyped, TSD, Typings. As on April 2019, more than 6,300 packages have type definitions.
- Airbnb GitHub. 2020. "airbnb/ts-migrate." Airbnb, on GitHub, August 19. Accessed 2020-08-19.
- Bandi, Jonas. 2018. "Here is why you might NOT want to use TypeScript — Part 1: Alternatives." Medium, April 05. Accessed 2019-04-24.
- Bering, Nicholas. 2017. "TypeScript for Small Projects, Too!" June 17. Accessed 2019-04-09.
- Bowden. 2016. "Announcing TypeScript 1.8." Microsoft Blog, February 22. Accessed 2019-04-25.
- Davis, Scott. 2016. "Converting Dojo-AMD Projects To TypeScript." Utah AGRC, March 28. Accessed 2019-04-09.
- Draper, Paul and Ryan Stringham. 2017. "Converting 600k lines to TypeScript in 72 hours." Lucidchart, November 16. Accessed 2019-04-09.
- Embrey, Blake. 2018. "A Brief History of Types (with TypeScript)." GitHub, November 11. Accessed 2019-04-24.
- Ewerlöf, Alex. 2016. "When should I use TypeScript?" freeCodeCamp, March 24. Accessed 2019-04-09.
- Poly, Charly. 2018. "Why use TypeScript, good and bad reasons." ITNEXT, on Medium, February 14. Accessed 2019-04-09.
- Sułkowski, Tomek. 2018. "TypeScript — Tips & Tricks." Medium, October 28. Accessed 2019-04-09.
- Respati, Resi. 2019a. "Migrating to TypeScript, Part 1: Getting started." Kata Engineering Tech Blog, on Medium, January 21. Accessed 2019-04-09.
- Respati, Resi. 2019b. "Migrating to TypeScript, Part 2: Trust the compiler!" Kata Engineering Tech Blog, on Medium, February 27. Accessed 2019-04-09.
- Microsoft GitHub. 2018. "TypeScript React Conversion Guide." Microsoft/TypeScript-React-Conversion-Guide, GitHub, October 29. Accessed 2019-04-09.
- Ali Syed, Basarat. 2019. "TypeScript, Deep Dive." Via GitBook, April. Accessed 2019-04-09.
- TypeScript Data Types
- TypeScript Tooling
- TypeScript in Angular
- TypeScript in React