Day 1: Introduction to TypeScript & Environment Setup

Welcome to the 30-Day TypeScript Journey!

Welcome to Day 1 of our “Mastering TypeScript” series. Over the next 30 days, we’re going to take you from a complete beginner to a TypeScript expert. We’ll cover everything from basic types to advanced generics and real-world application patterns.

What is TypeScript?

You’ve probably heard of it, but what is it?

Simply put, TypeScript is JavaScript with syntax for types.

JavaScript is a loosely typed language. This means you can assign a number to a variable, and then later assign a string to that same variable. While this offers flexibility, it often leads to bugs that only show up when you run the code (runtime errors).

TypeScript adds a type system on top of JavaScript. It catches errors while you write code, not after you run it.

“TypeScript is a superset of JavaScript.”

This means every valid JavaScript program is also a valid TypeScript program. You don’t lose anything; you only gain super-powers (types!).

Why Should You Learn It?

1. Catch Errors Early: No more undefined is not a function surprises in production.
2. Better Tooling: Autocomplete (IntelliSense) becomes incredibly powerful. Your code editor knows exactly what properties an object has.
3. Readability: Types serve as documentation. You can look at a function signature and know exactly what it expects and what it returns.
4. Industry Standard: Most modern frameworks (Angular, React, Vue, NestJS) are built with or heavily support TypeScript.

Setting Up Your Environment

Let’s get your hands dirty. We need to install Node.js and the TypeScript compiler.

1. Install Node.js

If you haven’t already, download and install Node.js (LTS version is recommended). This gives you npm (Node Package Manager), which we need to install TypeScript.

Verify your installation by opening your terminal and typing:

node -v
npm -v

2. Install TypeScript

We will install TypeScript globally on your machine so you can use the tsc (TypeScript Compiler) command anywhere.

npm install -g typescript

Verify the installation:

tsc -v

You should see a version number like Version 5.x.x.

Your First TypeScript Program

Create a new folder for your learning, something like ts-learning. Open it in VS Code.

1. Create a file named hello.ts.
2. Add the following code:

// hello.ts
const message: string = "Hello, TypeScript World!";
console.log(message);

Notice the : string part? that’s a Type Annotation. We are explicitly telling TypeScript that message must be a string.

Try changing the code to this and see what happens in your editor:

let message: string = "Hello";
message = 42; // Error! Type 'number' is not assignable to type 'string'.

Your editor should underline 42 in red. That’s TypeScript saving you from a bug!

Compiling to JavaScript

Browsers and Node.js don’t understand TypeScript directly. They understand JavaScript. We need to transpile (compile) our .ts file into a .js file.

Run this command in your terminal:

tsc hello.ts

You will see a new file appear: hello.js. Open it.

// hello.js
var message = "Hello, TypeScript World!";
console.log(message);

It looks like normal JavaScript! The type annotations are gone.

Run the JavaScript file:

node hello.js

Output:

Hello, TypeScript World!

Challenge for Today

1. Install Node.js and TypeScript.
2. Create a file day1.ts.
3. Write a function that takes a name (string) as an argument and logs "Welcome to the challenge, [name]!".
4. Compile it and run it with node.

See you on Day 2, where we dive deeper into Primitive Types!