🔵 Why TypeScript & Setup

TypeScript Fundamentals — Why TypeScript & Setup

TypeScript Fundamentals

Course 1 · Chapter 1 · Why TypeScript & Setup

🔵 Why TypeScript & Setup

TypeScript transforms JavaScript with static typing and powerful tooling. In this chapter, we'll explore why TypeScript exists, what problems it solves, and get your development environment ready for the journey ahead.

The Problem TypeScript Solves

JavaScript is incredibly flexible — but that flexibility comes with a cost:

JavaScript vs TypeScript

JavaScript

Dynamic types. Errors appear at runtime:

function greet(name) {
  return "Hello, " + name.toUpperCase();
}

// ❌ No error until runtime!
greet(42);  // TypeError: name.toUpperCase is not a function
                

TypeScript

Static types. Errors caught during development:

function greet(name: string) {
  return "Hello, " + name.toUpperCase();
}

// ✅ Error caught immediately!
greet(42);  // ❌ Argument of type 'number' is not assignable to parameter of type 'string'
                

Key Benefits of TypeScript

Catch bugs early: Type errors are discovered during development, not in production.
Better IDE support: Autocomplete, refactoring, and navigation all improve dramatically.
Self-documenting code: Types tell developers what functions expect and return.
Scalability: Large codebases stay maintainable as complexity grows.
Confidence in refactoring: Change code knowing the compiler will catch breaking changes.
Industry standard: Used by React, Angular, Vue, Node.js frameworks, and more.

⚙️ Installation & Setup

TypeScript runs on Node.js. If you don't have Node.js installed, download it from nodejs.org (LTS version recommended).

Step 1: Install TypeScript Globally (Optional)

npm install -g typescript

This makes the tsc (TypeScript compiler) available anywhere in your terminal.

Step 2: Create a Project Directory

mkdir my-typescript-project
cd my-typescript-project
            

Step 3: Initialize Node.js Project

npm init -y

This creates a package.json file to manage your project's dependencies.

Step 4: Install TypeScript Locally

npm install --save-dev typescript

Installing locally (rather than globally) is best practice for team projects.

Step 5: Generate tsconfig.json

npx tsc --init

This creates the tsconfig.json configuration file. Review it — the defaults are usually fine for beginners.

⚙️ Understanding tsconfig.json

The tsconfig.json file tells the TypeScript compiler how to behave. Here are the most important settings:

{
  "compilerOptions": {
    "target": "ES2020",          // JavaScript version to compile to
    "module": "commonjs",        // Module system (commonjs for Node.js)
    "lib": ["ES2020"],          // Built-in types available
    "outDir": "./dist",         // Where compiled .js files go
    "rootDir": "./src",          // Where your .ts files are
    "strict": true,             // Enable strict type checking
    "esModuleInterop": true,   // Better CommonJS compatibility
    "skipLibCheck": true,      // Skip type checking of declaration files
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"],           // Include src directory
  "exclude": ["node_modules"]  // Exclude node_modules
}
        

🚀 Your First TypeScript Program

Step 1: Create src directory and file

mkdir src
// Create: src/hello.ts
            

Step 2: Write TypeScript

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

Step 3: Compile to JavaScript

npx tsc

This compiles all TypeScript files in src/ to JavaScript in dist/.

Step 4: Run the compiled code

node dist/hello.js

Output: Hello, TypeScript!

💻 Coding Challenges

Challenge 1: Type the Parameters

Add type annotations to this function so TypeScript prevents passing wrong types:

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

Goal: Make sure add("5", 3) produces a TypeScript error.

→ Solution

Challenge 2: Debug the tsconfig

You've installed TypeScript, but npx tsc gives an error saying it can't find tsconfig.json. What command did you forget?

Goal: Recall the command to generate tsconfig.json.

→ Solution

Challenge 3: Compile and Run

Create a TypeScript file that prints your name in uppercase. Compile it and run the resulting JavaScript file.

Goal: Demonstrate the full workflow: write TS → compile → run JS.

→ Solution

💡 Real-World Tip: Watch for Compilation Errors

The TypeScript compiler is your first line of defense. If it complains about a type error, stop and read the message carefully — it's trying to protect you from bugs! As you learn, you'll develop a sense for why the compiler is rejecting your code, and you'll start writing types that prevent mistakes naturally.

🎯 What's Next

In the next chapter, we'll explore TypeScript's type system: primitives, any, unknown, and how type inference works. You'll learn the vocabulary that makes TypeScript powerful.