Introduction: Why TypeScript?

When I was first introduced to TypeScript, I thought, “I can already discern the data types just by looking at the code. Why should I bother with TypeScript?” At first glance, this perspective seems reasonable since JavaScript does have built-in data types, and we often can identify them visually.

• "Hello" is a string
• 2 is a number
• true/false is a boolean
• {} is an object
• [] is an array
• NaN signifies not a number
• null represents an empty or unknown value
• undefined indicates that no value has been assigned

Yet, real-world applications are rarely this straightforward. Data is frequently nested and complex. For instance, consider retrieving the quantity of an item from a store’s database using the function getItemQuantity("378982", "128365"), where the first parameter is the item’s ID and the second is the store’s ID.

The function name getItemQuantity doesn’t clarify what type of value will be returned; it could be a number, an array, a string, or even undefined or null, depending on the API's design. Imagine receiving a value like "1" from the database, and then trying to add it to another number in your application. In JavaScript, the operation "1" + 1 would yield "11", rather than the expected 2. This could lead to confusion and time spent debugging to realize that the API returns numbers as strings.

TypeScript alleviates this ambiguity by providing clarity on what kind of data you should anticipate. It eliminates the guesswork of whether a value is '1' or 1. This example is just the tip of the iceberg; data structures can become significantly more intricate, especially with nested objects and arrays, which we'll delve into later. The greater the complexity, the more invaluable TypeScript becomes.

How TypeScript Functions

Let’s explore some practical examples:

TypeScript serves as a tool for describing various entities. For instance, consider the illustration of a house above. We can use TypeScript's interface feature to define its properties clearly. An interface specifies the characteristics of an object, offering precise information about its structure.

Here’s a basic interface for the house example:

interface SimpleHouse {

price: number; // Expects a number, not a formatted string.

color: string; // Accepts any valid color string.

numberOfWindows: 0 | 1 | 2; // Restricts values to 0, 1, or 2 only.

}

Let’s break down this interface:

• SimpleHouse is the name we use to describe the house, and it could be named anything relevant.
• price: number; specifies that the price should be a numerical value.
• color: string; indicates that the color must be a string.
• numberOfWindows: 0 | 1 | 2; defines that the house can have either 0, 1, or 2 windows, utilizing a union type to limit options.

If an attempt is made to assign a value of 3 to numberOfWindows, TypeScript will trigger an error, indicating that the value is not permissible.

Recap: Engaging with TypeScript

In the example application below, you can modify the values for the house illustration and observe how TypeScript helps in validating the input according to the specified expectations. For instance, entering 3 for numberOfWindows will prompt TypeScript to issue a warning.

I genuinely hope this article serves as a valuable introduction to what will be an expansive series. Thank you for reading.