Your First TypeScript Program

TypeScript has gained significant popularity among developers for its ability to enhance JavaScript with strict typing and object-oriented programming features. In this article, we'll delve into the basics of TypeScript by creating our first program. We'll see how TypeScript's strict typing can prevent common errors that can occur in JavaScript.

Getting Started

Before we begin, make sure you have an Integrated Development Environment (IDE) and TypeScript installed on your system. We'll start by creating two files in our project: index.html and index.js. The index.html file will contain basic HTML code, while the index.js file will initially have a simple JavaScript program that we'll gradually convert to TypeScript.

Writing the JavaScript Program

In the index.js file, let's write a simple JavaScript function that takes two numbers and returns their sum:

function sum(a, b) {
  return a + b;
}

We can then execute this function and log the result to the console:

console.log(sum(2, 3)); // Output: 5

This function works fine when passed numeric values, but what if someone inadvertently passes strings instead of numbers? In JavaScript, this would result in string concatenation rather than numerical addition, which is not the intended behavior.

Introducing TypeScript

This is where TypeScript comes to the rescue. To demonstrate, let's create a new TypeScript file in our project, index.ts. Copy the JavaScript code from index.js into index.ts, and then delete the index.js file.

With the code in the TypeScript file, you'll notice that your IDE may already start flagging errors. TypeScript is warning us that the parameters a and b are implicitly of type any, which is not desirable. Let's refactor the code to comply with TypeScript standards:

function sum(a: number, b: number): number {
  return a + b;
}

In this refactored function, we are explicitly telling TypeScript that both a and b should be of type number. Additionally, the function is expected to return a value of type number.

Compiling TypeScript to JavaScript

Since browsers understand JavaScript but not TypeScript, we need to compile our TypeScript file into JavaScript. In your terminal, run the following command:

tsc index.ts

This command checks if your code is TypeScript compliant and, if so, generates a JavaScript file (index.js) beside your TypeScript file.

Verifying the Results

After compiling, refresh your browser where index.html is open. You should see the expected result:

5

Now, let's see what happens if we try to pass strings instead of numbers, as we did in the JavaScript example:

console.log(sum("2", "3")); // TypeScript error

TypeScript will flag an error, preventing this mistake from happening. This example showcases the fundamental advantage of TypeScript: catching potential errors at compile time, thus enhancing code reliability, especially in larger projects.

Conclusion

This exercise marks your first step into the world of TypeScript. As you proceed through the course, you'll explore more complex scenarios, learning how TypeScript's features can prevent common errors and facilitate writing robust, maintainable code.

What Can You Do Next 🙏😊

If you liked the article, consider subscribing to Cloudaffle, my YouTube Channel, where I keep posting in-depth tutorials and all edutainment stuff for software developers.