Day 2 of TypeScript — As a Beginner

Things that I’ve learned on day 3…

Things I’ve Learned On Day 3:

1. Higher-order Functions
2. Quick Difference Between JS and TS.

Photo by Austin Distel on Unsplash

1. Higher-Order Functions

Let’s recap what the Higher-order functions is.

They are functions that can accept other functions as arguments and/or return functions as their results.

Some key points are as follows:

1. Accepting functions as arguments
2. Returning functions
3. Function composition
4. Encapsulation of behavior
5. Abstraction and generalization

Now let’s see how we can use TypeScript for implementing Higher-order Functions.

Problem:

Write a function calculateSum that takes an array of numbers as input and a callback function. The function should calculate the sum of the numbers in the array and pass the result to the callback function.

Higher Order Function

Explanation:

1. The calculateSum function takes in an array of numbers (numArr) and a callback function (callBack) as parameters.
2. It initializes a variable sum to keep track of the sum of the numbers. The initial value is set to 0.
3. Using a for loop, it iterates through each element of the numArr array.
4. Inside the loop, it mistakenly adds the loop index (i) instead of the element at index i to the sum. This should be corrected by changing sum += i; to sum += numArr[i];.
5. After the loop, it calls the provided callback function (callBack) and passes the calculated sum as an argument.
6. The purpose of the callback function is to allow customization of how the calculated sum is handled or processed. It can be provided by the caller of the calculateSum function.

Processing The Output Function

Explanation:

1. This processSum used to display the output by taking sum as parameter with the “Number” Type.
2. Then it logs the output as a string template.

Array Data and Calling the Higher Order Function

Explanation:

1. The numbers array is defined with the values [1, 2, 3, 4, 5].
2. The calculateSum function is called with the numbers array and the processSum function as arguments.

The Whole Code Explanation:

Entire TypeScript Higher-Order Function Code

Explanation:

1. The calculateSum function takes in an array of numbers (numArr) and a callback function (callBack) as arguments.
2. Inside the calculateSum function, we initialize a variable called sum to keep track of the sum and set it to 0.
3. Using a for loop, we go through each element in the numArr array. For each iteration, we mistakenly add the loop index (i) to the sum. Oops! We should fix that to add the actual element numArr[i] instead.
4. Once we finish the loop, we call the provided callback function (callBack) and pass the calculated sum as an argument.
5. The purpose of the callback function is to process or handle the calculated sum in some way. In this case, we have another function called processSum that accepts the sum as a parameter.
6. The processSum function simply logs a message to the console, displaying the sum using string interpolation.
7. Finally, we create an array called numbers with the values [1, 2, 3, 4, 5].
8. We invoke the calculateSum function, passing the numbers array and the processSum function as arguments.
9. The calculateSum function calculates the sum of the numbers in the numbers array (although it currently has a bug in the loop), and then calls the processSum function, passing the calculated sum.
10. As a result, we should see the output in the console: “The sum is: 15” (assuming we fix the bug in the code).

2. Quick Differences Between JS and TS (with some funny comparisons)

a. TypeScript Types:

• Like a friendly librarian, TypeScript is all about organization and categorization.
• It asks you to explicitly label your variables, function parameters, and return types with specific types. It’s like putting books on well-labeled shelves, so you can find them easily and avoid mixing up romance novels with cookbooks.
• JavaScript, on the other hand, is like a free-spirited artist who loves surprises and embraces the unpredictable.
• It’s perfectly fine with you using a variable to hold a number one moment and a string the next. It’s like having a magical box where objects can shape-shift and change their nature whenever they want.

b. Type Annotations:

• TypeScript is the responsible friend who always carries a notebook with clearly written labels.
• It loves to jot down the types of variables, function parameters, and return values explicitly, so there’s no confusion or guessing games.
• It’s like having a personal assistant who keeps everything organized and reminds you of what type each thing is.

c. Type Inference:

• TypeScript also has a hidden talent for mind-reading.
• It can often figure out the type of a variable or function without you explicitly telling it.
• It’s like having a Sherlock Holmes detective who observes the clues (assigned values and context) and deduces the most probable types, saving you from writing down every single type annotation.

d. Additional Types:

• TypeScript introduces some fancy new types that JavaScript doesn’t have, like union types and intersection types.
• It’s like having a superhero toolkit with extra gadgets that allow you to combine types, creating powerful and flexible data structures.
• JavaScript, on the other hand, is content with its classic superhero powers, like being able to hold any type and adapting to the situation.

So there you have it!

I hope you liked this blog.

Share it with your friendly developers and clap this blog and comment what you think of this blog.

I’m open to suggestions as well. So make sure to let me know what are the programming-related things I can cover in future.

Thanks, and bye for now…👋💘

Check out my other blogs as well👇😁

Day 1 of TypeScript — As a Beginner

Day 2 of React — As a Beginner