Introduction to TypeScript

What TypeScript is, why it exists, and how to set up and compile your first TypeScript project.

Overview

TypeScript is JavaScript with static types. It is a superset of JavaScript every valid JavaScript file is also valid TypeScript but it adds optional type annotations that are checked at compile time. When you write TypeScript, a compiler (`tsc`) checks your code for type errors and then outputs plain JavaScript that runs anywhere. The TypeScript files (`.ts`) never run directly; only the compiled `.js` output does. This means TypeScript's type system has zero runtime cost. **Why use TypeScript?** - Catch bugs before they reach production the compiler flags incorrect function calls, typos in property names, and impossible operations - IDE superpowers autocomplete, instant documentation, safe refactoring - Self-documenting code type annotations tell the next developer exactly what a function expects and returns - Scales well large codebases become much easier to navigate and change safely TypeScript is maintained by Microsoft, used by Angular, Vue 3, React teams, and adopted widely across the industry.

Key Points

•TypeScript = JavaScript + static types; every JS file is valid TS
•Types are erased at compile time no runtime overhead
•Install: `npm install -g typescript`; compile: `tsc file.ts`
•`tsconfig.json` controls compiler options: target JS version, strict mode, output directory
•`strict: true` enables the most thorough type checking always use it for new projects
•Key tsconfig options: `target` (ES output version), `module`, `outDir`, `rootDir`, `strict`
•TypeScript does NOT affect runtime behaviour types are removed during compilation

Examples

Your first TypeScript file

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

const message = greet("World");
console.log(message);   // "Hello, World!"

// Type error caught at compile time:
// greet(42);   // Argument of type 'number' is not assignable to parameter of type 'string'

Minimal tsconfig.json

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",       // output JS version
    "module": "commonjs",     // module system
    "strict": true,           // enable all strict checks
    "outDir": "./dist",       // compiled output goes here
    "rootDir": "./src"        // source files location
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

// Compile:  tsc
// Watch:    tsc --watch
// Run:      node dist/index.js

TypeScript vs JavaScript the same logic, safer

// JavaScript (no type safety)
function add(a, b) {
  return a + b;
}
add(1, "2");   // Runs! Returns "12" silent bug

// TypeScript (type safe)
function addTs(a: number, b: number): number {
  return a + b;
}
// addTs(1, "2");   // Error: Argument of type 'string' is not assignable to parameter of type 'number'
addTs(1, 2);       // 3 correct

Common Mistakes

Thinking TypeScript types exist at runtime they are erased; `typeof x` at runtime still returns JS types
Not enabling `strict: true` without it you miss many useful checks like `strictNullChecks`
Using `.ts` extensions in import statements TypeScript imports omit the extension: `import { fn } from "./utils"`

Note

Start every new project with `strict: true` in tsconfig. It enables `strictNullChecks`, `noImplicitAny`, and several other checks. Retrofitting strict mode into an existing codebase is painful; starting strict is free.

Introduction to TypeScript

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

TypeScript types are checked at: