Fading Coder

One Final Commit for the Last Sprint

Home > Notes > Content

Essential TypeScript Concepts for Developers

Notes 1

TypeScript extends JavaScript by introducing optional static typing and class-based object-oriented features, designed for building scalable applications that compile to standard JavaScript for execution in browsers or other enviroments.

Type Annotations Type annotations specify expected types for variables, function parameters, and return values, enabling compile-time error detection.

let userName: string = "Alice Smith";
let userAge: number = 28;
let isLoggedIn: boolean = false;

function welcomeUser(user: string): string {
    return "Welcome, " + user;
}

Interfaces Interfaces define object structures with properteis and method signatures.

interface UserProfile {
    fullName: string;
    yearsOld: number;
    sayHello(): void;
}

let currentUser: UserProfile = {
    fullName: "Bob Johnson",
    yearsOld: 35,
    sayHello() {
        console.log("Hi, " + this.fullName);
    }
};

Classes Classes support object-oriented principles like inheritance and encapsulation, and can implement interfaces.

class StaffMember {
    private memberName: string;
    protected memberAge: number;

    constructor(name: string, age: number) {
        this.memberName = name;
        this.memberAge = age;
    }

    introduce() {
        console.log("I am " + this.memberName);
    }
}

class Supervisor extends StaffMember {
    constructor(name: string, age: number) {
        super(name, age);
    }

    assignTasks() {
        console.log("Assigning work");
    }
}

Generics Generics enable reusable components that work with various types while preserving type safety.

function getValue<T>(input: T): T {
    return input;
}

let textResult = getValue<string>("sample text");
let numericResult = getValue<number>(42);

Enums Enums define named constant sets, focusing on values rather than types.

enum Status {
    Pending,
    Approved,
    Rejected
}

let currentStatus: Status = Status.Approved;

Modules Modules organize code into reusable units with export and import capabilities.

// file: calculations.ts
export function multiply(a: number, b: number): number {
    return a * b;
}

// file: main.ts
import { multiply } from "./calculations";
console.log(multiply(4, 6));

Decorators Decorators are special declarations attached to classes or members, invoked at runtime with @expression syntax.

function freezeClass(target: Function) {
    Object.freeze(target);
    Object.freeze(target.prototype);
}

@freezeClass
class Messenger {
    messageText: string;

    constructor(text: string) {
        this.messageText = text;
    }

    display() {
        return "Message: " + this.messageText;
    }
}

Union and Intersection Types Union types allow values of multilpe types, while intersection types combine multiple types into one.

type TextOrNum = string | number;
type CombinedRole = Student & Worker;

function showIdentifier(id: TextOrNum) {
    console.log("Identifier: " + id);
}

Type Guards and Assersions Type guards verify variable types at runtime, and type assertions inform the compiler of known types.

function checkIfString(value: any): value is string {
    return typeof value === "string";
}

function processInput(input: any) {
    if (checkIfString(input)) {
        console.log("String detected: " + input);
    }

    let lengthValue: number = (<string>input).length;
    let lengthAlt: number = (input as string).length;
}
Tags: typescript

Related Articles

Designing Alertmanager Templates for Prometheus Notifications

How to craft Alertmanager templates to format alert messages, improving clarity and presentation. Alertmanager uses Go’s text/template engine with additional helper functions. Alerting rules referenc...

Deploying a Maven Web Application to Tomcat 9 Using the Tomcat Manager

Tomcat 9 does not provide a dedicated Maven plugin. The Tomcat Manager interface, however, is backward-compatible, so the Tomcat 7 Maven Plugin can be used to deploy to Tomcat 9. This guide shows two...

Skipping Errors in MySQL Asynchronous Replication

When a replica halts because the SQL thread encounters an error, you can resume replication by skipping the problematic event(s). Two common approaches are available. Methods to Skip Errors 1) Skip a...

Leave a Comment

Anonymous

◎Feel free to join the discussion and share your thoughts.