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
- What is TypeScript?
- Setting Up Your Environment
- Variables and Data Types
- Control Flow
- Functions
- Interfaces
- Classes
- Generics
- Modules
- 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.
// Example: Your first TypeScript program
let message: string = "Hello, TypeScript Programming!";
console.log(message);
Setting Up Your Environment
To write and run TypeScript programs, you need Node.js and the TypeScript compiler installed on your system.
# Install TypeScript globally
npm install -g typescript
# Compile a TypeScript file
tsc main.ts
# Run the compiled JavaScript file
node 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
.
// Example: Declaring variables
let age: number = 25;
let height: number = 5.9;
let name: string = "Alice";
let isStudent: boolean = true;
console.log(`Name: ${name}, Age: ${age}, Height: ${height}`);
Control Flow
TypeScript supports if
, else
, switch
, and loops (for
, while
, do-while
) for controlling program flow.
// Example: Conditional statement
let age: number = 18;
if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are a minor.");
}
Functions
Functions in TypeScript can have typed parameters and return values, making them more predictable and easier to debug.
// Example: Function
function add(a: number, b: number): number {
return a + b;
}
let result: number = add(5, 10);
console.log(`Result: ${result}`); // 15
Interfaces
Interfaces define the structure of objects, ensuring that they adhere to a specific shape.
// Example: Interface
interface Person {
name: string;
age: number;
}
let person: Person = { name: "Alice", age: 25 };
console.log(`Name: ${person.name}, Age: ${person.age}`);
Classes
TypeScript supports object-oriented programming with classes, inheritance, and access modifiers.
// Example: Class
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
display(): void {
console.log(`Name: ${this.name}, Age: ${this.age}`);
}
}
let person = new Person("Alice", 25);
person.display();
Generics
Generics allow you to create reusable components that work with multiple types.
// Example: Generics
function identity<T>(arg: T): T {
return arg;
}
let output1 = identity<string>("Hello");
let output2 = identity<number>(42);
console.log(output1); // Hello
console.log(output2); // 42
Modules
TypeScript supports modular programming, allowing you to split your code into reusable pieces.
// Example: Module
// math.ts
export function add(a: number, b: number): number {
return a + b;
}
// main.ts
import { add } from './math';
let result = add(5, 10);
console.log(`Result: ${result}`); // 15
Advanced Types
TypeScript provides advanced types like union types, intersection types, and type aliases for more complex scenarios.
// Example: Union Types
let value: string | number;
value = "Hello";
value = 42;
// Example: Type Alias
type StringOrNumber = string | number;
let value2: StringOrNumber;
value2 = "World";
value2 = 100;