Refactoring Legacy Code in TypeScript: From A to Z

Introduction: Why Refactoring Legacy Code is Not a Luxury, But a Necessity

In modern web development, TypeScript has become the de facto standard for large projects. However, many companies and startups face a problem: a codebase written in plain JavaScript or early, non-strict versions of TypeScript turns into a "swamp" over time. The lack of types, bloated functions, implicit dependencies, and outdated patterns all slow down development and increase the number of bugs.

Refactoring legacy code is the process of improving the internal structure of a program without changing its external behavior. In the context of TypeScript, it gains special value: we not only clean up the code but also gain a powerful type system that prevents errors at the compilation stage. In this article, we will break down a step-by-step refactoring plan, from initial analysis to final testing, with real-world examples in TypeScript.

1. Analysis and Inventory: Where to Start?

The first and most important step is to understand what we are dealing with. You cannot simply rewrite everything at once. That is a path to chaos and wasted time. The right approach is to audit the codebase.

\n
• Identify "hot spots." Find modules that are changed most often or contain the most bugs. Use tools like git log or SonarQube.
\n
• Identify implicit types. In legacy JS code, you often encounter functions that accept any or use @ts-ignore. Make a list of such places.
\n
• Check dependencies. Outdated libraries (e.g., lodash 3.x) can hinder the transition to modern TypeScript APIs.
\n
• Write tests. Before any refactoring, cover key sections of code with tests. This is your "safety net."
\n

Example: you have a JS function that processes user data. Instead of rewriting it immediately, add unit tests using Jest or Vitest:

// legacy.js\nfunction processUser(data) {\n    return { name: data.name, age: data.age + 1 };\n}\n\n// test.js\nimport { processUser } from './legacy';\ntest('processUser increments age', () => {\n    expect(processUser({ name: 'Alice', age: 30 })).toEqual({ name: 'Alice', age: 31 });\n});\n

Only after this can you proceed with refactoring.

2. Gradual Migration to Strict Typing

TypeScript offers several levels of strictness. For legacy code, it is recommended to start with "strict": false and gradually raise the bar. Abruptly enabling all options can break hundreds of files.

Key steps:

\n
• Enable noImplicitAny. This will force you to explicitly specify types for all parameters and return values. It may be painful at first, but this is how you will find the most dangerous places.
\n
• Use strictNullChecks. One of the main causes of bugs is null and undefined. This flag will force you to handle them explicitly.
\n
• Add noUnusedLocals and noUnusedParameters. They will help remove dead code.
\n

Example of refactoring a function with implicit types:

// Before refactoring (legacy JS)\nfunction calculateTotal(price, tax) {\n    return price + (price * tax);\n}\n\n// After refactoring (TypeScript)\ninterface PriceData {\n    price: number;\n    tax: number;\n}\n\nfunction calculateTotal({ price, tax }: PriceData): number {\n    if (price < 0 || tax < 0) {\n        throw new Error('Price and tax must be non-negative');\n    }\n    return price + (price * tax);\n}\n

Notice: we not only added types but also made the API safer by using an interface and validation.

3. Eliminating Anti-Patterns and Outdated