Introduction to TypeScript - TypeScript Tutorial | TechLead

What is TypeScript?

TypeScript is a strongly typed programming language that builds on JavaScript. Developed by Microsoft, it adds optional static typing, classes, interfaces, and other features that help you write more robust and maintainable code.

Why TypeScript?

Catch Errors Early: Find bugs at compile time, not runtime
Better IDE Support: Autocomplete, refactoring, and navigation
Self-Documenting: Types serve as inline documentation
Safer Refactoring: Change code confidently with type checking
Team Collaboration: Clear contracts between modules

TypeScript vs JavaScript

// JavaScript - no type safety
function greet(name) {
  return "Hello, " + name.toUpperCase();
}

greet("Alice");    // Works fine
greet(42);         // Runtime error! toUpperCase is not a function
greet(undefined);  // Runtime error!

// TypeScript - type safety
function greet(name: string): string {
  return "Hello, " + name.toUpperCase();
}

greet("Alice");    // Works fine
greet(42);         // Compile error! Argument must be string
greet(undefined);  // Compile error!

Setting Up TypeScript

Installation

# Install TypeScript globally
npm install -g typescript

# Or install in your project
npm install --save-dev typescript

# Check version
tsc --version

Initialize a Project

# Create a new directory
mkdir my-ts-project
cd my-ts-project

# Initialize npm
npm init -y

# Initialize TypeScript (creates tsconfig.json)
npx tsc --init

Basic tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Your First TypeScript File

// src/index.ts

// Basic type annotations
let message: string = "Hello, TypeScript!";
let count: number = 42;
let isActive: boolean = true;

// Function with types
function add(a: number, b: number): number {
  return a + b;
}

// Array type
let numbers: number[] = [1, 2, 3, 4, 5];

// Object type
let user: { name: string; age: number } = {
  name: "Alice",
  age: 30
};

console.log(message);
console.log(add(10, 20));
console.log(user.name);

Compile and Run

# Compile TypeScript to JavaScript
npx tsc

# Run the compiled JavaScript
node dist/index.js

# Or use ts-node to run directly
npx ts-node src/index.ts

TypeScript with React

# Create React app with TypeScript
npx create-react-app my-app --template typescript

# Or with Vite
npm create vite@latest my-app -- --template react-ts

# Or with Next.js
npx create-next-app@latest my-app --typescript

Type Inference

TypeScript can often infer types automatically:

// TypeScript infers the type from the value
let name = "Alice";        // inferred as string
let age = 30;              // inferred as number
let isStudent = true;      // inferred as boolean

// Inferred return type
function multiply(a: number, b: number) {
  return a * b;  // return type inferred as number
}

// Array inference
let fruits = ["apple", "banana"];  // inferred as string[]

// Object inference
let person = {
  name: "Bob",
  age: 25
};  // inferred as { name: string; age: number }

Best Practice

Let TypeScript infer types when possible. Only add explicit type annotations when:

• The type cannot be inferred (function parameters)
• You want to be explicit for documentation
• You want a wider type than what would be inferred

Key Takeaways

• TypeScript adds static typing to JavaScript
• Catches errors at compile time, not runtime
• Provides better IDE support and autocomplete
• Compiles to plain JavaScript
• Type inference reduces the need for explicit annotations