Appreciating TypeScript

I used to be a ~ JavaScript Girlie ~ because as you all know (if you have been reading my previous posts), I started with ReactJS then NextJS.

Everything Changed When the Fire Nation Attacked.

Just kidding. Eventually, when I was learning about Angular, I developed a greater appreciation for TypeScript over JavaScript. If you're not a fan of ambiguity, then TypeScript might be something you'll enjoy! The main distinction between TypeScript and JavaScript is that the former requires variable types to be specified.

So, if you write code in JavaScript like this:

const sampleArray = [
  { type: "thing", name: "ballpen" },
  { type: "person", name: "Monica" },
];

In TypeScript, you'd probably end up doing something like this:

interface SampleItem {
  type: string;
  name: string;
}
...
const sampleArray: SampleItem[] = [
  { type: "thing", name: "ballpen" },
  { type: "person", name: "Monica" },
];

TypeScript feels a bit verbose, doesn't it? But trust me, it's for our own benefit, both for the current developers and for those who will work on the project in the future.

Photo by DEVS.LOL

Just a few weeks ago, I encountered a challenge in TypeScript involving the combination of arrays. Initially, I thought it would be as straightforward as concatenating the first array of type FirstType with the second array of type SecondType. It turned out my initial thought was correct! I did need to concatenate the two arrays. However, the real challenge came in the subsequent steps, where I had to display each element. If the type was FirstType, I had to display the element in pink; otherwise, it had to be displayed in blue

Consider these elements:

in JavaScript:
const infoArray = [
  { id: "1", name: "Nicole", country: "Indonesia", type: "info" },
  { id: "2", name: "Monica", country: "Philippines", type: "info" },
];
const occupationArray = [
  { id: "1", name: "Nicole", occupation: "singer", type: "occupation" },
  { id: "2", name: "Monica", occupation: "developer", type: "occupation" },
];

//concatenate
const concatenatedArray = [...infoArray, ...occupationArray];

in TypeScript:
const infoArray: FirstType[] = [
  { id: "1", name: "Nicole", country: "Indonesia", type: "info" },
  { id: "2", name: "Monica", country: "Philippines", type: "info" },
];
const occupationArray: SecondType[] = [
  { id: "1", name: "Nicole", occupation: "singer", type: "occupation" },
  { id: "2", name: "Monica", occupation: "developer", type: "occupation" },
];

//concatenate
const concatenatedArray: (FirstType | SecondType)[] = [...infoArray, ...occupationArray];

Now, if I initially used JavaScript, how would I go about checking which ones would be displayed in pink or blue?

For someone who has been using TypeScript all this time, I feel like using it would be MUCH easier.

If I used JavaScript, I'd go about determining the type of each element like this:

concatenatedArray.forEach((item) => {
  if (item.type === "info") {
    // Display in pink
  } else if (item.type === "occupation") {
    // Display in blue
  }
});

However, my solution in TypeScript wouldn't even need to access the element. I don't thinkthe attribute type might be even of use when using TypeScript.

concatenatedArray.forEach((item) => {
  if (item instanceof FirstType) {
    // Display in pink
  } else if (item instanceof FirstType) {
    // Display in blue
  }
});

See, you just need to check the type of the element using instanceof. No need to access any data within each element! By the way, I didn't use typeof here since it's usually for primitive data types such as number, string, etc.

This is just one minor feature of what TypeScript can offer its developers. There are many more reasons why a lot of developers prefer TypeScript over JavaScript. Most of the developers I know also aim to produce clean and readable code, and TypeScript makes that possible.

Photo by Ilya Pavlov on Unsplash