Building SaltHub: My Experience Converting a JavaScript Codebase to TypeScript

2023-05-04

This is a continuation blog post from Salthub. For this part 3, I'll be sharing how I get started with the implementation phase.

Below are the steps that I took to understand the codebase that was already written by previous Frontend Team:

1. Identify the purpose and scope of the codebase: I lead my Frontend Team by reviewing the project documentation, talking to our Team Manager, and examine our User requirements.
2. Identify the key components: Review the structure of the codebase and identify the key components, such as modules, classes, and functions. Understand how these components are organised and how they interact with each other.
3. Review the architecture and design patterns: Review the codebase's architecture and design patterns to understand how the code is structured and how it works. I read the code comments and ensure that the design documents are up to date.
4. Understand the coding conventions and standards: Review the coding conventions and standards used in the codebase, such as naming conventions, coding styles, and formatting rules. This actually have helped me to read and understand the code more easily.
5. Identify the tools and technologies used: Review the tools and technologies used in the codebase, such as programming languages, frameworks, and libraries. This have helped me to understand how the codebase is implemented and how it interfaces with other systems.

The outcome:

1. We decided to convert all the code from JavaScript to TypeScript. Here are the advantages of writing in TypeScript:
2. Catching errors at compile-time: TypeScript's static typing helps catch many common programming errors at compile-time, such as misspelling variable names or passing the wrong data type to a function. This can reduce the time and effort spent on debugging and testing.
3. Better code organisation and maintainability: TypeScript's static typing can help make code more organised and easier to maintain over time. By clearly specifying the types of variables, functions, and objects, we can create more structured code that is easier to read and understand.
4. Better scalability: TypeScript can help improve the scalability of codebases by providing better support for large and complex projects. The type system can help catch issues before they become major problems, and can provide better code organisation and maintainability.
5. Compatibility with JavaScript: TypeScript is a superset of JavaScript, which means that the existing JavaScript code can be easily converted to TypeScript without any major changes. This makes it easier for us to adopt TypeScript gradually and without disrupting existing code.

Here's some snippet of the code that I did converting JavaScript to TypeScript: index.tsx

export const getServerSideProps: GetServerSideProps<ILoginData> = async ({ req }) => {
  const session = await getSession({ req });
  const users: IUser[] = await fetchAllUsers();
  
  if (session) {
    const consultant: IUser | undefined = users.find(user => user.email === (session?.user?.email ?? '') && user.userType === 'Consultant');
    const delivery: IUser | undefined = users.find(user => user.email === (session?.user?.email ?? '') && user.userType === 'Delivery');

    if (consultant) {
      return {
        redirect: {
          destination: `/pgprs/profile/${consultant.id}`,
          permanent: false,
        },
      };

The types for IUser is in utils/types.

export interface IUser {
  id: number;
  email: string;
  userType: 'Consultant' | 'Delivery';
}

Conclusion:

In general, converting a large JS codebase to TS can also be a time-consuming and complex process, and may require significant effort from developers. Therefore, it's important to carefully evaluate the benefits and costs of such a conversion before proceeding, and to ensure that sufficient resources and expertise are available to carry out the task effectively. Ultimately, the decision to convert to TS will depend on the specific needs and goals of the project, as well as the technical capabilities and resources of the development team.

---

Also on codewithkatyrosli.com

Building SaltHub: How Using React-Icons Streamlined Our Frontend Development Workflow, 2023-05-09

This is a continuation blog post from Salthub. For this part 4, I'll be sharing another benefits of me being a Frontend Developer with a background of UX/UI Designer.

For this blog post, I'll be sharing about how I close the bridge between Design and Frontend Development.

Icons are an important part of web development and are commonly used to enhance the user experience by providing visual cues and improving the overall design of the application.

Read More