Typescript Introduced

TypeScript is a programming language that builds on JavaScript by adding static type definitions, helping developers catch errors early and write more robust code.

---

The Big Picture

Imagine you're working with a set of building blocks to create a model. Each block represents a piece of code. JavaScript allows you to build anything you want with these blocks but doesn't check if the pieces fit perfectly until you try to use the model. TypeScript, on the other hand, acts like an instruction manual that not only tells you how to put the pieces together but also ensures that each piece fits correctly before you even start building.

Core Concepts

1. Static Typing: TypeScript introduces types (such as number, string, boolean) that help describe the kinds of values variables can hold.
2. Type Annotations: You can specify types for variables, function parameters, and return values.
3. Type Inference: TypeScript can automatically deduce types based on the values assigned to variables.
4. Interfaces and Types: These are used to define the shape of objects, including what properties they must have.
5. Classes and Modules: TypeScript enhances JavaScript's class syntax and supports modules for better organization and reuse of code.

Detailed Walkthrough

Static Typing

In JavaScript, you can declare a variable without specifying what type of data it will hold:

let message = "Hello, world!";

TypeScript allows you to add type annotations:

let message: string = "Hello, world!";

This ensures message can only hold string values. If you try to assign a number to it, TypeScript will give an error before you run the code.

Type Annotations

Types can be added to function parameters and return values:

function greet(name: string): string {
    return "Hello, " + name;
}

This function takes a string parameter and returns a string. If you call greet(42), TypeScript will catch this error.

Type Inference

TypeScript often infers types automatically:

let count = 10; // inferred as number

Here, count is inferred to be a number based on the assigned value.

Interfaces and Types

Interfaces define the structure of an object:

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

let user: User = {
    name: "Alice",
    age: 25
};

Classes and Modules

TypeScript builds on JavaScript's class syntax to add features like visibility modifiers:

class Person {
    private name: string;
    constructor(name: string) {
        this.name = name;
    }
    greet() {
        console.log("Hello, " + this.name);
    }
}

let person = new Person("Bob");
person.greet(); // "Hello, Bob"

Modules help organize code:

// mathUtils.ts
export function add(a: number, b: number): number {
    return a + b;
}

// main.ts
import { add } from "./mathUtils";
console.log(add(2, 3)); // 5

Understanding Through an Example

Consider an example where you need to handle user data in an application:

interface User {
    id: number;
    username: string;
    email: string;
}

function getUserInfo(user: User): string {
    return `User Info: ${user.username} (${user.email})`;
}

let user: User = { id: 1, username: "john_doe", email: "john@example.com" };
console.log(getUserInfo(user));

In this example, TypeScript ensures that the user object has the necessary properties before the code runs, preventing runtime errors.

Conclusion and Summary

TypeScript enhances JavaScript by adding static types, which help catch errors early and make the code more robust. Key features include type annotations, type inference, interfaces, and enhanced class and module syntax.

Test Your Understanding

1. What is static typing and how does it benefit development?
2. How does TypeScript's type inference work?
3. Write a TypeScript function that takes an object with firstName and lastName properties and returns a formatted string with the full name.

Reference

• Official TypeScript Documentation