Migrating a React + Ant Design + MobX Project from JavaScript to TypeScript

The article describes how to migrate a React application built with react + antd + mobx to a TypeScript stack ( typescript + react + antd + mobx ), assuming the reader already knows the basics of TS and React.

Convenient migration method

If the original project has never run npm run eject , the author recommends creating a new TypeScript‑based project with npx create-react-app new-project --scripts-version=react-scripts-ts , then copying source files and adjusting configurations.

Copy the original src and public directories into the newly generated new-project folder.

Merge and edit package.json , using tools like TypeSearch to locate type declaration packages for dependencies.

Migrate root‑level configuration files such as .env.production and README.md .

Adjust build files (e.g., config-overrides.js for react-app-rewired ) to add TypeScript support for Ant Design.

Batch rename source files: js → ts , jsx → tsx (e.g., brew install rename ).

Declare global third‑party variables (e.g., declare var $: any; for jQuery).

Add module declarations for non‑JS resources, e.g., declare module '*.css'; .

Refer to the linked article for business‑code modifications.

Run npm start to start the service and debug any remaining errors.

Prefer using any initially to silence type errors, then gradually replace with stricter types.

Link the project to a Git version control repository.

Global variable control

When using third‑party libraries like jQuery or custom globals attached to window , the author recommends creating a dedicated .d.ts file (e.g., global.d.ts ) to declare those globals instead of inline variable declarations that pollute the compiled output.

API handling

The project uses axios , which already provides its own .d.ts declarations, so no extra type packages are needed. After switching to TypeScript, API calls must be made through an instance method (e.g., appAxiosInstance.request ) that returns an AxiosPromise whose resolved value is an AxiosResponse containing a data field.

Two files are created in the API folder: index.ts for request functions and interface.ts for response type definitions. By specifying generic parameters such as <IResponseData<IDraftListItem>> on then , IDEs can provide strong type hints.

Store (MobX) integration

The state management library used is MobX . When injecting the store prop into components, the author discusses the need to declare the prop as required in TypeScript, but also shows a workaround by making it optional to avoid passing it through every component level. Advanced techniques involve splitting required and optional prop interfaces and using type assertions when rendering components.

Sass configuration

Upgrading react-scripts-ts to version 4 brings built‑in support for Sass. After installing node-sass , developers can simply import ./index.scss in components, and the configuration is greatly simplified, with automatic CSS code splitting and other performance improvements.

Conclusion

After completing the migration, the author notes that TypeScript catches common mistakes (e.g., passing a number to parseInt where a string is expected) and provides richer IDE assistance, ultimately improving code robustness and development efficiency despite the higher initial learning curve.