1. Home
  2. Learn
  3. Introduction to Programming in TypeScript

Introduction to Programming in TypeScript

TypeScript is a strongly typed, object-oriented programming language that builds on JavaScript. Developed by Microsoft, TypeScript adds optional static typing, classes, interfaces, and other features to JavaScript, making it easier to build large-scale applications. TypeScript compiles to plain JavaScript, ensuring compatibility with all JavaScript environments.

This guide will introduce you to the fundamentals of TypeScript programming, helping you write safer, more maintainable, and scalable code.


Table of Contents

  1. What is TypeScript?
  2. Setting Up Your Environment
  3. Variables and Data Types
  4. Control Flow
  5. Functions
  6. Interfaces
  7. Classes
  8. Generics
  9. Modules
  10. Advanced Types

What is TypeScript?

TypeScript is a superset of JavaScript that adds static typing and other features to help developers catch errors early and write more robust code.

1// Example: Your first TypeScript program
2let message: string = "Hello, TypeScript Programming!";
3console.log(message);

Setting Up Your Environment

To write and run TypeScript programs, you need Node.js and the TypeScript compiler installed on your system.

1# Install TypeScript globally
2npm install -g typescript
3
4# Compile a TypeScript file
5tsc main.ts
6
7# Run the compiled JavaScript file
8node main.js

Variables and Data Types

TypeScript is statically typed, meaning you can explicitly define the types of variables. Common data types include string, number, boolean, array, and object.

1// Example: Declaring variables
2let age: number = 25;
3let height: number = 5.9;
4let name: string = "Alice";
5let isStudent: boolean = true;
6
7console.log(`Name: ${name}, Age: ${age}, Height: ${height}`);

Control Flow

TypeScript supports if, else, switch, and loops (for, while, do-while) for controlling program flow.

1// Example: Conditional statement
2let age: number = 18;
3
4if (age >= 18) {
5    console.log("You are an adult.");
6} else {
7    console.log("You are a minor.");
8}

Functions

Functions in TypeScript can have typed parameters and return values, making them more predictable and easier to debug.

1// Example: Function
2function add(a: number, b: number): number {
3    return a + b;
4}
5
6let result: number = add(5, 10);
7console.log(`Result: ${result}`); // 15

Interfaces

Interfaces define the structure of objects, ensuring that they adhere to a specific shape.

1// Example: Interface
2interface Person {
3    name: string;
4    age: number;
5}
6
7let person: Person = { name: "Alice", age: 25 };
8console.log(`Name: ${person.name}, Age: ${person.age}`);

Classes

TypeScript supports object-oriented programming with classes, inheritance, and access modifiers.

 1// Example: Class
 2class Person {
 3    name: string;
 4    age: number;
 5
 6    constructor(name: string, age: number) {
 7        this.name = name;
 8        this.age = age;
 9    }
10
11    display(): void {
12        console.log(`Name: ${this.name}, Age: ${this.age}`);
13    }
14}
15
16let person = new Person("Alice", 25);
17person.display();

Generics

Generics allow you to create reusable components that work with multiple types.

 1// Example: Generics
 2function identity<T>(arg: T): T {
 3    return arg;
 4}
 5
 6let output1 = identity<string>("Hello");
 7let output2 = identity<number>(42);
 8
 9console.log(output1); // Hello
10console.log(output2); // 42

Modules

TypeScript supports modular programming, allowing you to split your code into reusable pieces.

 1// Example: Module
 2// math.ts
 3export function add(a: number, b: number): number {
 4    return a + b;
 5}
 6
 7// main.ts
 8import { add } from './math';
 9
10let result = add(5, 10);
11console.log(`Result: ${result}`); // 15

Advanced Types

TypeScript provides advanced types like union types, intersection types, and type aliases for more complex scenarios.

 1// Example: Union Types
 2let value: string | number;
 3value = "Hello";
 4value = 42;
 5
 6// Example: Type Alias
 7type StringOrNumber = string | number;
 8let value2: StringOrNumber;
 9value2 = "World";
10value2 = 100;