Learning TypeScript through refactoring

Avatar of Lucy Lucy, Associate Software Engineer

The Agent Portal (AP) is a modern web application built using JavaScript and React. The Agent Portal (AP) is the entry point to the policy origination system, offering essential access points for the “agent-user segment.” I worked on refactoring AP using TypeScript. This blog is about my experience of refactoring React components and learning about TypeScript. During the refactoring, I updated React components to use the newer functional component style and added TypeScript type annotations.

My Refactoring Process

I needed to update the code that was written using the old style of react class components. For example, the component “SearchableText” is written using the React class component.

Screen shot of an old styled React component
Old styled React component
  1. Convert the code to use React functional components. Going through the process of updating the component helps me to understand the code.
  2. Console log the component props to confirm their types. This step can be a challenge sometimes. For example, if a component has a prop that is a > child prop passed from a parent component, then I need to track down the parent component to figure the types.
  3. Use command git mv \***.js **\*.tsxto rename the file to use the.tsx extension, which supports TypeScript. Using git mv is important for Git to automatically detect the rename and update the history accordingly.
  4. Add TypeScript type annotations and Interfaces. The challenge of this step is to understand the codebase and determine the appropriate types for variables and functions. Sometimes, bugs will be revealed in the code as I add type annotations. Fixing these bugs as they crop up can be time-intensive.
  5. Run unit tests and update unit tests accordingly. This step helps me guarantee that the refactored code is still valid and can run successfully.

As a result, I get a React functional component that uses TypeScript. Here are the type annotations that I added. They clearly indicate the types of each prop.

TypeScript Interface Example
TypeScript interface example

What I Learned About TypeScript While Refactoring

TypeScript Union Type
Example of an interface containing a union type

Learning Through Practical Application

It is hard to acquire new knowledge without applying what you’re learning. The refactoring process is a great opportunity to learn about TypeScript. Instead of just reading documentation and practicing using example code/code playgrounds, refactoring is a real world application. Every challenge that I encountered during refactoring was helpful to make the learning process more natural.


Technology develops fast and refactoring will keep a product alive and more competitive in terms of performance. I am a fan of refactoring not just because I personally benefit a ton from it, but also due to the benefits of having high quality code and better performing projects. Having a habit of refactoring code is a double win.

In summary, there are many ways to acquire programming knowledge, and I find my best and favorite way is through refactoring. AP is a perfect project for me to keep improving my programming skills, allowing me to enhance my knowledge during refactoring. The knowledge that I gain through refactoring is long-term knowledge, because I was able to not only learn about new topics but to apply it to the AP project.