Chapter 1: Introduction to TypeScript

Are you looking to enhance your coding skills and gain a deeper understanding of TypeScript? If so, you’re in the right place! This article will guide you through the process of coding with TypeScript and offer tips on how to seamlessly integrate it into your daily programming.

We’ll be working with an array of age data, aiming to produce an output in the form of an object: {mode:26, count:5}. This object will indicate the most frequently occurring age and the number of times it appears.

const ages: number[] = [

31, 26, 34, 37, 27, 26, 32, 32, 26, 27,

27, 24, 32, 33, 27, 25, 26, 38, 37, 31,

34, 24, 33, 29, 26, 31

];

Before we dive into the implementation, it's worth noting that there are three approaches we can take: using forEach(), reduce(), or the Set object. For this article, we’ll focus on the forEach() method. If you're interested in exploring the other methods, feel free to leave a comment.

Let’s tackle this problem using TypeScript.

Typically, types are defined in the code as needed. However, for clarity in this example, I will present the types in a separate code snippet.

The desired output will be an object with mode and count properties, both of which must be of type number. To achieve this, we'll define our type using an interface called IAnswer.

Next, we need to declare a function type that accepts an array of numbers as its parameter and returns our structured answer.

interface Counts {

age: number;

}

interface Answer {

mode: number;

count: number;

}

type RepeatedAges = (ages: number[]) => Answer;

Now, let’s create our function named repeatedAges using the types we defined, and see how we can get the result.

const repeatedAges: RepeatedAges = (ages: number[]): Answer => {

let counts = {} as Counts;

ages.forEach((age: number): void => {

counts[age] = (counts[age] ?? 0) + 1;

});

let min: number = 0;

let answer = {} as Answer;

Object.entries(counts).forEach(([key, value]: [string, number]): void => {

if (value > min) {

min = value;

answer.mode = +key;

answer.count = value;

}

});

return answer;

};

If you need to declare the type of an object without assigning it an initial value, you can use the as keyword to avoid errors. Since the forEach() method does not return a value, its return type is void. You can also use tuples for array destructuring. Keep in mind that object keys are implicitly converted to strings, which is why we convert them back to numbers.

console.log(repeatedAges(ages)); // { mode: 26, count: 5 }

Conclusion

In this article, we explored how to enhance your coding experience with TypeScript. We discussed how to transition smoothly into using it daily and highlighted its advantages, including type checking and improved code readability. I encourage you to give TypeScript a try to elevate your coding skills and see the benefits in your development workflow. I hope you found this information useful. Happy coding!

If you have any questions, feel free to ask in the comments.

If you enjoy this type of content and wish to support me, consider buying me a coffee or clicking the clap 👏 button below a few times to show your appreciation. Your support means a lot and helps me continue writing—thank you!

Chapter 2: Practical Examples

In this video, you'll learn how to find duplicate elements in an array using JavaScript. This will help you understand how to implement similar logic in TypeScript as well.

This video guides you through the process of finding and removing duplicate items in an array using JavaScript, providing a practical approach that can be applied in TypeScript.