First, use a suitable editor/IDE. VSCode is very good for developing TS. It can easily check the type information of each variable and field. However, in terms of code reconstruction, WebStorm has more functions, providing functions such as "reconstructing variable names", "synchronously modifying the place where the file is introduced when moving a file", and "adjusting method parameter signatures". Personally, I still recommend WebStorm. Proper use of the above functions can greatly improve reconstruction efficiency. WebStorm provides support for TS, and code diagnostic information from tsserver will be displayed in the TypeScript panel.

Second, coding style. If the original code style is messy, it is recommended to use prettier. After simple configuration, run a command line script (or call the prettier tool in WebStorm) to format all the code, which is more worry-free. You can also use ESLint with the --fix parameter, but the configuration is relatively cumbersome.

Third, upgrade TS. Since it is refactored, TS is recommended to be directly upgraded to the latest version (the current version is 2.8). The new version of TS has stronger type expression capabilities, and there are few break changes in the upgrade. Set noImplicitAny to true (or set strict to true) in tsconfig.json to complete the previously missing type information. When the variable types are clear and certain, reconstruction is actually quite simple, so first add the missing type information. If a certain type requires subsequent refactoring, you can temporarily use any and then add a TODO next to it.

Fourth, bottom-up component reconstruction. Refactor the interfaces of some widgets and improve their props/state type information. After refactoring the implementation of the component, adjust the code that calls the component (WebStorm: Find Usages, and then fill in the correct props according to the TS error message). Generally speaking, the reconstruction of small components will not cause the entire application to fail to run. During the reconstruction process, you can open the front-end application next to it. After the reconstruction is completed, if the web page behaves the same as before, it means that there is no problem with the reconstruction.

Fifth, top-down state reconstruction. When using React, the state of top-level components is generally richer, and we often use Redux to manage the global state of the application. Many subcomponents will rely on these global states (or the state of the top-level component), so it is best to use the type/interface keyword to write out the types of these states explicitly. For example, the following figure shows the status of Redux store management of a front-end application. This type can be easily referenced by using State in other places (such as calling the connect function of react-redux).