Introduction to TypeScript

What is TypeScript?

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. Developed and maintained by Microsoft, TypeScript is a superset of JavaScript, meaning that any valid JavaScript code is also valid TypeScript code. However, TypeScript adds optional static typing, classes, interfaces, and many other features that help developers write more robust and maintainable code.

Why Use TypeScript?

1. Static Type Checking

TypeScript catches type-related errors during development, before your code runs. This means you can find bugs earlier in the development process:

// JavaScript - no error until runtime
function greet(person) {
    return "Hello, " + person.name;
}

greet("John"); // Runtime Error: Cannot read property 'name' of undefined

// TypeScript - error caught during development
function greet(person: { name: string }) {
    return "Hello, " + person.name;
}

greet("John"); // Compile Error: Argument of type 'string' is not assignable

2. Enhanced IDE Support

TypeScript provides excellent autocomplete, intelligent code navigation, and refactoring capabilities. Modern editors like VS Code can provide real-time feedback as you type, showing you available properties and methods, catching typos, and suggesting fixes.

3. Better Code Documentation

Type annotations serve as inline documentation that never gets out of sync with your code. When you see a function signature, you immediately know what types of arguments it expects and what it returns.

// Self-documenting function signature
function calculateDiscount(
    price: number,
    discountPercent: number,
    applyTax: boolean = true
): number {
    let discounted = price * (1 - discountPercent / 100);
    return applyTax ? discounted * 1.1 : discounted;
}

4. Easier Refactoring

When you rename a property or change a function signature, TypeScript will find all the places where you need to update your code. This makes large-scale refactoring much safer and faster.

5. Access to Modern JavaScript Features

TypeScript supports the latest JavaScript features (ES2015+) and allows you to use them even if you need to target older browsers. The compiler will transpile modern syntax into code that works in your target environment.

TypeScript vs JavaScript

Setting Up TypeScript Environment

Prerequisites

Before installing TypeScript, you need to have Node.js and npm (Node Package Manager) installed on your computer. You can download Node.js from nodejs.org. The npm package manager comes bundled with Node.js.

// Check if Node.js is installed
node --version

// Check if npm is installed
npm --version

Installing TypeScript

There are two main ways to install TypeScript:

1. Global Installation (Recommended for Learning)

This installs TypeScript globally on your system, making the tsc (TypeScript Compiler) command available everywhere:

npm install -g typescript

// Verify installation
tsc --version

2. Local Installation (Recommended for Projects)

This installs TypeScript as a development dependency in your project:

// Initialize a new npm project
npm init -y

// Install TypeScript locally
npm install --save-dev typescript

// Verify installation
npx tsc --version

Your First TypeScript File

Let's create a simple TypeScript file and compile it:

Step 1: Create a file named hello.ts:

// hello.ts
function greet(name: string): string {
    return `Hello, ${name}!`;
}

const message = greet("TypeScript");
console.log(message);

Step 2: Compile the TypeScript file:

tsc hello.ts

Step 3: This creates a hello.js file:

// hello.js (generated)
function greet(name) {
    return "Hello, " + name + "!";
}
var message = greet("TypeScript");
console.log(message);

Step 4: Run the JavaScript file:

node hello.js
// Output: Hello, TypeScript!

Setting Up a TypeScript Project

For larger projects, you'll want to create a proper project structure with a configuration file:

// Create a new project directory
mkdir my-typescript-project
cd my-typescript-project

// Initialize npm
npm init -y

// Install TypeScript
npm install --save-dev typescript

// Create a TypeScript configuration file
npx tsc --init

This creates a tsconfig.json file with many commented options. We'll explore this file in detail in the next lesson.

Recommended Project Structure

my-typescript-project/
├── src/              # TypeScript source files
│   └── index.ts
├── dist/             # Compiled JavaScript files
├── node_modules/     # Dependencies
├── package.json      # Project metadata
└── tsconfig.json     # TypeScript configuration

Watch Mode

During development, you can use watch mode to automatically recompile files when they change:

// Watch a single file
tsc hello.ts --watch

// Watch all files in a project
tsc --watch

TypeScript Playground

Before setting up a local environment, you can experiment with TypeScript in the official online playground at typescriptlang.org/play. This is perfect for trying out small code snippets and seeing how TypeScript compiles to JavaScript.

Summary

• TypeScript is a superset of JavaScript that adds static typing and other powerful features
• It catches errors during development rather than at runtime
• TypeScript code must be compiled to JavaScript before it can run
• TypeScript provides better IDE support, easier refactoring, and self-documenting code
• You can install TypeScript globally or locally in your projects
• The tsc command compiles TypeScript files to JavaScript
• Every JavaScript file is already valid TypeScript - you can adopt TypeScript gradually