TypeScript - The Basics

TypeScript is a statically typed superset of JavaScript that compiles to plain JavaScript. It offers optional static typing, classes, and interfaces, which can help you build robust and maintainable applications. This article will cover the basics of TypeScript to get you started.

Table of Contents

1. Introduction to TypeScript

2. Setting Up TypeScript

3. Basic Types

4. Functions

5. Interfaces

6. Classes

7. Modules

8. Conclusion

1. Introduction to TypeScript

TypeScript extends JavaScript by adding types, which can help catch errors early in the development process and improve the overall quality of your code. It is developed and maintained by Microsoft and has gained widespread adoption in the developer community.

2. Setting Up TypeScript

To get started with TypeScript, you need to install it using npm (Node Package Manager). If you don't have npm installed, you can download it from nodejs.org.

npm install -g typescript

After installing TypeScript, you can compile TypeScript files (.ts) to JavaScript files (.js) using the tsc command.

tsc filename.ts

3. Basic Types

TypeScript provides several basic types that you can use to annotate your variables and function parameters.

Boolean

let isDone: boolean = false;

Number

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

String

let color: string = "blue";
color = 'red';

Array

let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

Tuple

let x: [string, number];
x = ["hello", 10];

Enum

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

Any

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;

Void

function warnUser(): void {
    console.log("This is my warning message");
}

Null and Undefined

let u: undefined = undefined;
let n: null = null;

4. Functions

TypeScript allows you to specify the types of function parameters and return values.

function add(x: number, y: number): number {
    return x + y;
}

let myAdd = function(x: number, y: number): number { return x + y; };

Optional and Default Parameters

function buildName(firstName: string, lastName?: string): string {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

function buildNameWithDefault(firstName: string, lastName = "Smith"): string {
    return firstName + " " + lastName;
}

5. Interfaces

Interfaces define the structure of an object. They can be used to enforce type checking.

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "John", lastName: "Doe" };
console.log(greeter(user));

6. Classes

TypeScript supports object-oriented programming with classes.

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");
console.log(greeter.greet());

Inheritance

class Animal {
    move(distanceInMeters: number = 0) {
        console.log(`Animal moved ${distanceInMeters}m.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }
}

const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();

7. Modules

Modules in TypeScript help organize code by splitting it into smaller, reusable pieces.

Exporting

export class Calculator {
    add(x: number, y: number): number {
        return x + y;
    }
}

Importing

import { Calculator } from './Calculator';

let calculator = new Calculator();
console.log(calculator.add(2, 3));

8. Conclusion

This article covered the basics of TypeScript, including setting up TypeScript, basic types, functions, interfaces, classes, and modules. TypeScript offers many more features and capabilities that can help you build robust and maintainable applications. To learn more, visit the official TypeScript documentation.