JavaScript Essentials - TypeScript

Introduction to TypeScript and its integration with JavaScript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It provides optional static typing, classes, and interfaces, making it easier to build and maintain large-scale applications. This tutorial introduces you to TypeScript and how to integrate it with JavaScript.

Getting Started with TypeScript

To get started with TypeScript, you need to install the TypeScript compiler and set up a TypeScript configuration file.

// Install TypeScript globally
npm install -g typescript

// Initialize a TypeScript project
tsc --init
                

The tsconfig.json file created by tsc --init contains configuration options for the TypeScript compiler.

Basic TypeScript Syntax

TypeScript extends JavaScript with types. Here are some basic examples of TypeScript syntax:

// Variables with types
let message: string = 'Hello, TypeScript!';
let count: number = 42;
let isActive: boolean = true;

// Functions with typed parameters and return type
function greet(name: string): string {
    return `Hello, ${name}!`;
}

console.log(greet('Alice'));
                

TypeScript Interfaces and Classes

TypeScript supports interfaces and classes, allowing you to define complex types and structures.

Interfaces

// Interface
interface Person {
    name: string;
    age: number;
    greet(): string;
}

const person: Person = {
    name: 'Bob',
    age: 30,
    greet() {
        return `Hello, my name is ${this.name}`;
    }
};

console.log(person.greet());
                

Classes

// Class
class Animal {
    constructor(public name: string, public age: number) {}

    describe(): string {
        return `${this.name} is ${this.age} years old.`;
    }
}

const dog = new Animal('Buddy', 4);
console.log(dog.describe());
                

Integrating TypeScript with JavaScript

You can gradually integrate TypeScript into your existing JavaScript codebase. TypeScript files use the .ts extension, while JavaScript files use .js.

// JavaScript file (main.js)
function sayHello(name) {
    return `Hello, ${name}`;
}

console.log(sayHello('World'));

// TypeScript file (main.ts)
function sayHelloTS(name: string): string {
    return `Hello, ${name}`;
}

console.log(sayHelloTS('TypeScript'));
                

You can use the TypeScript compiler to compile TypeScript files to JavaScript:

// Compile TypeScript to JavaScript
tsc main.ts
                

Advanced TypeScript Features

TypeScript offers many advanced features, such as generics, decorators, and modules. Here is an example of using generics:

// Generics
function identity(value: T): T {
    return value;
}

console.log(identity('Hello'));
console.log(identity(42));
                

Summary

In this tutorial, you learned about TypeScript and its integration with JavaScript. TypeScript provides static typing, interfaces, and classes, which help catch errors early and improve code maintainability. By gradually integrating TypeScript into your JavaScript projects, you can take advantage of its powerful features while maintaining compatibility with existing code.