Intro 😎

Welcome to Episode 1 of the TypeScript 101 Series! In this episode, I’ll give an overview of TypeScript, discuss its advantages over JavaScript, and show you how to set up a TypeScript project and execute your TypeScript code.

Why learn TypeScript when I know or do not know Javascript? 🤔

• If you know JavaScript: TypeScript is a superset of JavaScript, which means that it can be used to write JavaScript code. However, TypeScript also adds features that can help you write more robust and maintainable code, such as static typing and type inference.

• If you don't know JavaScript: TypeScript is a good language to learn if you're new to programming. It's a relatively easy language to learn, and it can help you avoid some of the common pitfalls that new programmers make.

Don’t believe me? Here are the benefits of using TypeScript ✅

• Static typing: Static typing helps to prevent errors by ensuring that the types of variables and expressions are known at compile time. This can help to catch errors early before they cause problems in your application.

• Type inference: Type inference allows you to omit the types of variables and expressions in many cases, which can make your code more concise and easier to read.

• Refactoring safety: TypeScript's refactoring safety features help to protect your code from errors when you make changes to it. This can save you a lot of time and frustration.

• Large ecosystem: TypeScript has a large and active ecosystem, with many libraries and tools available to help you develop your applications.

  

Let’s Get started! 🥳

Before we get started I want you'll to keep this in mind:

TypeScript is just a development tool, your project still runs JavaScript!

Project Setup 📃

Let’s create a new folder → ts-example

To get started with TypeScript, you'll need to install it on your machine. You can do this using a package manager like npm or yarn.

npm i -g typescript

Once you have TypeScript installed, you can create a new TypeScript project using the tsc --init command, which will generate a tsconfig.json file that configures the TypeScript compiler for your project. (don’t worry about it now, we’ll take a look at what it is later)

tsc means TypeScript Compiler

Wow! Now you are all ready to start practically learning TypeScript!

Writing your first TypeScript Code! 😉

Create your first TypeScript file → index.ts

Open index.ts in your favorite code editor, and let's start writing some TypeScript code.

We'll create a simple function that greets the user.

function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

greet("TypeScript");

Code Explanation

In the above code, the greet function takes in a parameter - name and since we are using TypeScript we can define what type of variable it is, here we are specifying it to be a string! ( Static Typing remember? 😎).

Compiling TypeScript to JavaScript 👨‍💻

Let's compile our typescript code using tsc .

tsc index.ts
npx tsc index.ts // If the above command doesn't work.

This will generate the equivalent js file!

Running your code 🏃‍♂️

Finally, you can run your compiled JavaScript code using Node.js. In the terminal, enter the following command

node index.js

You should see the output "Hello, TypeScript!" in the console.

Congratulations!🥳 You've successfully written and executed your first TypeScript code. (CHEERS!)

Summary 📝

• We got introduced to TypeScript and wrote our first TypeScript code.

• We covered how to set up a simple TypeScript project, write a simple TypeScript function, compile TypeScript to JavaScript, and run the compiled code.

• Now that you have a basic understanding of how to write TypeScript code, you're ready to explore the language further and leverage its powerful features in your projects.

Stay tuned for the next blog post in our TypeScript 101 series, where we'll dive deeper into TypeScript's type system and explore how it can help catch errors at compile-time and improve the robustness of your code!

Till then Happy Coding! 😉