TypeScript Tutorial – Learn TypeScript from Scratch with Design, Symbols & Links

Introduction to TypeScript

TypeScript is a typed superset of JavaScript developed by Microsoft that compiles down to plain JavaScript. It’s like JavaScript, but with superpowers.

• Adds static typing
• Offers modern OOP features
• Helps catch bugs early
• Enhances editor tooling and code navigation

Learn more about TypeScript

Setting Up TypeScript

Install Node.js and npm

Download from https://nodejs.org
After installation, open terminal:

node -v
npm -v

Install TypeScript Globally

npm install -g typescript

Verify Installation

tsc -v

Create a TypeScript File

touch hello.ts

Add some code:

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

Then compile:

tsc hello.ts

TypeScript Basics

Compiling TypeScript

Use tsc filename.ts to compile your file into JavaScript.

Watch Mode

tsc -w

This watches for file changes and compiles automatically.

Variables and Data Types

let age: number = 25;
let username: string = "DevUser";
let isLoggedIn: boolean = true;

Data Types

• string
• number
• boolean
• any
• void
• null / undefined

Official TypeScript Data Types

TypeScript Functions

function greet(name: string): string {
  return `Hello, ${name}`;
}

Optional Parameters

function log(message: string, user?: string) {
  console.log(`${user || "System"}: ${message}`);
}

Interfaces and Type Aliases

Interface

interface User {
  id: number;
  name: string;
}

Type Alias

type ID = number | string;

Interfaces vs Types

Classes and Object-Oriented Programming

class Car {
  constructor(public brand: string, private speed: number) {}

  accelerate(): void {
    this.speed += 10;
  }
}

Access Modifiers

• public – accessible anywhere
• private – accessible within class
• protected – accessible within class and subclasses

Example:

class Person {
  public name: string;
  private age: number;
}

Generics in TypeScript

function identity<T>(arg: T): T {
  return arg;
}

Use generics to build reusable components with type safety.

Modules and Namespaces

Modules

// file: user.ts
export const name = "Alex";

// file: main.ts
import { name } from "./user";

Namespaces

namespace Utils {
  export function log(msg: string) {
    console.log(msg);
  }
}

Enums and Tuples

Enum

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

Tuple

let user: [string, number] = ["Alice", 25];

Type Inference and Assertions

Type Inference

let score = 100; // TypeScript infers number

Type Assertion

let someValue: any = "hello";
let strLength: number = (someValue as string).length;

TypeScript vs JavaScript

Why TypeScript Over JavaScript

Best Practices

Use interfaces instead of any
Organize code with modules
Always use explicit types
Enable strict mode in tsconfig.json
Prefer const and let over var

Conclusion

TypeScript is like JavaScript with a safety net — it helps you write better code, faster. From small side projects to large enterprise applications, TypeScript ensures scalability and maintainability. Start simple, and before you know it, you’ll be shipping solid apps with confidence!

FAQs

Q1: Can I use TypeScript with React?
🅰️ Absolutely! Use create-react-app with --template typescript.

Q2: Is TypeScript backward compatible with JavaScript?
🅰️ Yes, every .js file is a valid .ts file.

Q3: How do I run TypeScript in the browser?
🅰️ Compile it to JavaScript and include the output .js in your HTML.

Q4: What are the benefits of TypeScript?
🅰️ Better tooling, early error detection, and improved maintainability.

Q5: Is TypeScript hard to learn?
🅰️ Not really! If you know JavaScript, TypeScript is a smooth upgrade.