Category: Typescript

Hey there, if you enjoy this story, feel free to like or share it!

---

My JavaScript codebase is an energetic pet shop. Each piece of code is like a different animal in the shop, full of life and purpose, but sometimes a little unpredictable. Now, I love my pet shop, but I want to bring a bit more order and predictability to it, so I decide to upgrade it using TypeScript, which is like hiring a team of expert animal trainers.

First, I start by introducing these trainers to my shop—this is like setting up TypeScript in my project and configuring it. The trainers begin by observing the animals, understanding their quirks and behaviors, which is akin to gradually adding type annotations to my code. They don’t rush in to change everything at once; they take their time to learn and adjust.

Next, the trainers begin training the animals one by one. They start with the more straightforward creatures, like the tame cats and dogs, which are like the simpler parts of my code. This corresponds to slowly converting JavaScript files to TypeScript, ensuring each piece functions as expected before moving on to the next.

As the trainers work with the animals, they use specific techniques to handle each one, just like I use TypeScript’s powerful features such as interfaces and enums to make my code more robust and organized. This process helps in bringing clarity and structure, much like making sure each animal knows its space and role in the shop.

Finally, after all the animals have been trained, my pet shop runs smoother than ever. The trainers have done their job, and the animals are happier and more predictable, just as my codebase is now more reliable and easier to maintain with TypeScript. With everything in order, I can introduce new animals or make changes with confidence, knowing that my trainers are there to keep things in check.

So, transforming my JavaScript pet shop into a TypeScript haven made it a more harmonious and efficient place, just like how TypeScript can enhance a codebase. If you think this analogy helped, don’t hesitate to like or share!

---

Step 1: Setting Up TypeScript

Just like hiring the trainers, the first step is to set up TypeScript in my project. I start by installing TypeScript with:

npm install --save-dev typescript

Then, I create a tsconfig.json file to configure TypeScript options. This is like giving the trainers a guidebook on how to handle the animals:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

Step 2: Gradual Introduction

The trainers started with the more straightforward animals, so I begin by converting simple JavaScript files to TypeScript. For example, a basic JavaScript function for adding two numbers:

// add.js
function add(a, b) {
  return a + b;
}

In TypeScript, I can add type annotations to ensure the inputs are numbers:

// add.ts
function add(a: number, b: number): number {
  return a + b;
}

This change provides clarity and helps avoid errors, much like training the simple animals first.

Step 3: Using TypeScript Features

As the trainers used specific techniques, I utilize TypeScript’s features to enhance my code. Take an example of defining a shape:

// shape.js
function getArea(shape) {
  if (shape.kind === 'circle') {
    return Math.PI * shape.radius ** 2;
  }
  return shape.width * shape.height;
}

In TypeScript, I can define interfaces to describe the shape structure, making my code more robust:

// shape.ts
interface Circle {
  kind: 'circle';
  radius: number;
}

interface Rectangle {
  kind: 'rectangle';
  width: number;
  height: number;
}

type Shape = Circle | Rectangle;

function getArea(shape: Shape): number {
  if (shape.kind === 'circle') {
    return Math.PI * shape.radius ** 2;
  }
  return shape.width * shape.height;
}

This helps ensure that my function handles each “animal” correctly, avoiding any surprises.

Final Thoughts

By gradually introducing TypeScript into my JavaScript codebase, I bring order and reliability to my project, just like the trainers did with the pet shop. TypeScript’s type system provides a safety net that catches errors early, making development smoother and more predictable.

Key Takeaways:

• Start with setting up TypeScript in your project with a tsconfig.json.
• Gradually convert JavaScript files to TypeScript, beginning with simpler parts of your code.
• Use TypeScript features like type annotations and interfaces to improve code robustness.
• A step-by-step approach allows for a smooth transition, ensuring your project benefits from the added structure and safety of TypeScript.