Building with TypeScript: A Lego-Based Guide

Introduction

"Start where you are, use what you have" is one of the sayings that I live by or try to. This expression covers a component of the growth mindset. Most of us in front-end or JavaScript land have either started to or completely migrated to TypeScript. Some of us may still have issues understanding the concepts or converting our thinking from JavaScript to TypeScript's approach. To fix this, we're going to use one of my favorite tools: Legos. So let's start here: "Think of JavaScript as a basic Lego set where you can build freely, and TypeScript as the same set with detailed instruction manuals and quality control checks." A deeper dive into TypeScript can be found here, here and in this video. This approach aims to show you how each JavaScript concept translates to TypeScript, using Lego analogies to make the concepts easier to understand.

Variable Scope and Hoisting: The Building Rooms

Definitions of Concepts

A variable scope refers to the context in which variables are accessible and can be used within a program. There are two main types of scope: local scope and global scope. A variable declared outside of any function is in the global scope, meaning it can be accessed and modified anywhere in the code. On the other hand, variables declared inside a function are in local scope and are only accessible within that function. JavaScript uses the var, let, and const keywords to declare variables, each affecting scope differently. Variables declared with let and const are block-scoped, this means that they are only accessible within the nearest enclosing block {}. In contrast, var is function-scoped, making it available throughout the entire function where it is declared. A clear understanding of variable scope helps prevent issues like variable name conflicts and unintended side effects in JavaScript programs.

Hoisting is a behavior where variable and function declarations are moved to the top of their containing scope before the code is executed (the compilation phase). This means that variables and functions can be used before they are declared. Function declarations are fully hoisted, allowing them to be called even before their definition in the code. However, variable declarations using var are hoisted without their initial values, so accessing them before the assignment will result in undefined. Variables declared with let and const are also hoisted but are not initialized, leading to a ReferenceError if accessed before declaration. Understanding hoisting helps developers avoid common pitfalls by properly structuring variable and function declarations.

The Lego Analogy

Think of scope like different Lego building rooms:

• Global scope: The shared living room where all builders can access pieces.
• Function scope: Personal building tables.
• Block scope: Specific sections of your building table.

JavaScript Implementation

// Global building room
const globalBricks = "Everyone can use these";
function buildSection() {
    // Personal table
    var tableBricks = "Only for this builder";

    if (true) {
        // Specific section
        let sectionBricks = "Just for this part";
    }
}

TypeScript Evolution

// Adding type safety to our building rooms
type BrickType = "regular" | "special" | "rare";
const globalBricks: BrickType = "regular";

function buildSection(): void {
    // TypeScript ensures we only use valid brick types
    const tableBricks: BrickType = "special";

    if (true) {
        // TypeScript prevents using sectionBricks outside this block
        let sectionBricks: BrickType = "rare";
    }
}

// Real-world example: Configuration management
interface AppConfig {
    readonly apiKey: string;
    environment: "dev" | "prod";
    features: Set<string>;
}

const config: AppConfig = {
    apiKey: "secret",
    environment: "dev",
    features: new Set(["feature1", "feature2"])
};

Functions and Closures: The Building Instructions

Definitions of Concepts

Functions are reusable blocks of code designed to perform a specific task. This enhances modularity and code efficiency. They can be defined using the function keyword followed by a name, parentheses (), and a block of code enclosed in curly braces {}. Parameters can be passed into functions within the parentheses or curly braces, and these parameters act as placeholders for values provided when the function is called. JavaScript also supports anonymous functions, which have no name, and arrow functions, which offer a more concise syntax. Functions may return a value using the return statement or perform an action without returning anything. Additionally, functions in JavaScript are first-class objects, meaning they can be assigned to variables, passed as arguments, and returned from other functions, enabling functional programming patterns.

Closures are a powerful feature that allows a function to remember and access its lexical scope, even when the function is executed outside that scope. This can be created when a function is defined inside another function and references variables from the outer function. The inner function maintains access to these variables even after the outer function has finished executing. This capability is useful for data encapsulation and maintaining state in environments like event handlers or callbacks. Closures enable patterns like private variables, where a function can expose specific behaviors while hiding implementation details.

The Lego Analogy

• Functions are like building instructions.
• Parameters are like required pieces.
• Return values are like completed structures.
• Closures are like sealed building kits with some pieces permanently included.

JavaScript Implementation

function buildHouse(floors, color) {
    const foundation = "concrete";

    return function addRoof(roofStyle) {
        return `${color} house with ${floors} floors and ${roofStyle} roof on ${foundation}`;
    };
}

TypeScript Evolution

// Basic function with types
interface House {
    floors: number;
    color: string;
    roofStyle: string;
    foundation: string;
}

// Adding type safety to our builder
function buildHouse(
    floors: number,
    color: string
): (roofStyle: string) => House {
    const foundation = "concrete";

    return (roofStyle: string): House => ({
        floors,
        color,
        roofStyle,
        foundation
    });
}

// Real-world example: Component factory
interface ComponentProps {
    id: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
}

function createComponent<T extends ComponentProps>(
    baseProps: T
): (additionalProps: Partial<T>) => React.FC<T> {
    return (additionalProps) => {
        // Component implementation
        return (props) => <div {...props} />;
    };
}

Objects and Prototypes: The Building Techniques

Definitions of Concepts

Objects in JavaScript are fundamental data structures that serve as containers for related data and functionality. They consist of key-value pairs, where each key (property) maps to a value that can be any valid JavaScript type including functions (methods). Objects can be created in several ways:

• Object literals: const obj = {}
• Constructor functions: new Object()
• Object.create() method

The prototype system is JavaScript's built-in inheritance mechanism. Each object has an internal link to another object called its prototype. When trying to access a property that doesn't exist on an object, JavaScript automatically looks for it in the prototype chain. This chain of objects continues until it reaches an object with a null prototype, typically Object.prototype. Understanding prototypes is crucial for:

• Implementing inheritance
• Sharing methods across instances
• Managing memory efficiency
• Building object hierarchies

The Lego Analogy

Think of objects and prototypes like this:

• Objects are like specialized Lego kits with their own unique pieces and instructions.
• Prototypes are like master templates that multiple kits can reference.
• Inheritance is like having a basic kit that more advanced kits can build upon.
• Properties are like the specific pieces in each kit.
• Methods are like the special building techniques included with each kit.

JavaScript Implementation

// Creating a basic Lego kit template
const basicKit = {
    pieces: 100,
    build() {
        return "Basic structure complete";
    },
    inventory() {
        return `Kit contains ${this.pieces} pieces`;
    }
};

// Creating a specialized kit that inherits from basicKit
const advancedKit = Object.create(basicKit);
advancedKit.specialFeatures = ["moving parts", "lights"];
advancedKit.pieces = 250;

// Adding custom functionality
advancedKit.useSpecialFeatures = function() {
    return `Using ${this.specialFeatures.join(" and ")}`;
};

// Demonstrating prototype chain
console.log(advancedKit.build());  // Inherited method
console.log(advancedKit.inventory());  // Inherited method with local property
console.log(advancedKit.useSpecialFeatures());  // Own method

TypeScript Evolution

// Define the structure of our kits
interface BaseKit {
    pieces: number;
    theme?: string;
    build(): string;
    inventory(): string;
}

interface SpecializedKit extends BaseKit {
    specialFeatures: string[];
    useSpecialFeatures(): string;
}

// Implementation with type checking
class BasicKit implements BaseKit {
    constructor(public pieces: number, public theme?: string) {}

    build(): string {
        return "Basic structure complete";
    }

    inventory(): string {
        return `Kit contains ${this.pieces} pieces`;
    }
}

// Extending with type safety
class AdvancedKit extends BasicKit implements SpecializedKit {
    constructor(
        pieces: number,
        public specialFeatures: string[],
        theme?: string
    ) {
        super(pieces, theme);
    }

    useSpecialFeatures(): string {
        return `Using ${this.specialFeatures.join(" and ")}`;
    }

    // Override base method with enhanced functionality
    build(): string {
        return `${super.build()} with special features`;
    }
}

// Real-world example: UI Component inheritance
interface UIComponent {
    render(): string;
    attach(element: HTMLElement): void;
}

interface InteractiveComponent extends UIComponent {
    onClick: (event: MouseEvent) => void;
    onHover?: (event: MouseEvent) => void;
}

class Button implements InteractiveComponent {
    constructor(private text: string) {}

    render(): string {
        return `<button>${this.text}</button>`;
    }

    attach(element: HTMLElement): void {
        element.innerHTML = this.render();
    }

    onClick(event: MouseEvent): void {
        console.log('Button clicked!', event);
    }
}

Asynchronous Programming: The Building Team

Definitions of Concepts

Asynchronous Functions and Programming

Async functions are a special type of function in JavaScript that provide an elegant way to handle asynchronous operations. When declared with the async keyword, these functions automatically return a promise and enable the use of the await keyword within their body. The await operator pauses the execution of the function until a promise is either resolved or rejected, allowing asynchronous code to be written in a more synchronous, readable style. This syntax effectively reduces callback complexity and eliminates the need for nested promise chains. For example, in async function fetchData() { const response = await fetch(url); }, the function waits for the fetch operation to complete before continuing execution, making the code behave more predictably while ensuring the main thread remains unblocked. This pattern is particularly useful when dealing with multiple asynchronous operations that depend on each other, as it allows developers to write code that clearly expresses the sequence of operations without sacrificing performance.

Promises

A promise represents a value that may be available now, in the future, or never. It is an object with three possible states: pending, fulfilled, or rejected. It is used for handling asynchronous operations. Promises have methods like .then(), .catch(), and .finally() for chaining actions based on the outcome. This makes them a powerful alternative to nested callbacks, improving code readability and error handling.

The Lego Analogy

• Async functions are like team members working on different parts.
• Promises are like agreements to deliver completed sections.

JavaScript Implementation

async function buildProject() {
    const foundation = await layFoundation();
    const [walls, roof] = await Promise.all([
        buildWalls(),
        prepareRoof()
    ]);
}

TypeScript Evolution

// Define our structures
interface BuildingSection {
    name: string;
    pieces: number;
    completed: boolean;
}

// Type-safe async building
async function buildProject(): Promise<BuildingSection[]> {
    try {
        const foundation: BuildingSection = await layFoundation();

        // Parallel work with type safety
        const [walls, roof]: [BuildingSection, BuildingSection] = 
            await Promise.all([
                buildWalls(),
                prepareRoof()
            ]);

        return [foundation, walls, roof];
    } catch (error) {
        if (error instanceof BuildError) {
            throw new Error(`Construction failed: ${error.message}`);
        }
        throw error;
    }
}

// Real-world example: Data fetching
interface UserData {
    id: string;
    profile: Profile;
    preferences: Preferences;
}

async function fetchUserData(id: string): Promise<UserData> {
    const [profile, preferences] = await Promise.all([
        api.getProfile(id),
        api.getPreferences(id)
    ]);

    return { id, profile, preferences };
}

Modern Features: The Advanced Building Techniques

Definitions of Concepts

Destructuring

This is a concise way to extract values from arrays or properties from objects into distinct variables. Array destructuring uses square brackets [], while object destructuring uses curly braces {}. This syntax makes it easier to work with complex data structures by unpacking values directly into variables, reducing the need for repetitive code. For example, const [a, b] = [1, 2] assigns 1 to a and 2 to b, while const { name } = person extracts the name property from a person object.

Spread Operator

The spread operator is represented by three dots (...). It allows an iterable like an array or object to be expanded in places where multiple elements or key-value pairs are expected. It can be used to copy, combine, or pass array elements as function arguments. For example, const arr = [1, 2, ...anotherArray].

Optional Chaining

Optional chaining is represented by ?.. It provides a safe way to access deeply nested object properties without causing errors if a property is undefined or null. It short-circuits and returns undefined immediately if a reference is nullish. For example, user?.address?.street checks if user and address exist before accessing street. This syntax prevents runtime errors and makes working with nested data structures more concise and error-resistant, particularly in APIs or user input-dependent data.

The Lego Analogy

• Destructuring is like sorting pieces into containers.
• Spread operator is like copying pieces between sets.
• Optional chaining is like checking if pieces exist before using them.

JavaScript Implementation

const { pieces, color } = legoSet;
const allPieces = [...basicPieces, ...specialPieces];
const feature = legoSet?.features?.lights;

TypeScript Evolution

// Define structured types
interface LegoSet {
    pieces: number;
    color: string;
    features?: {
        lights?: boolean;
        motors?: boolean;
    };
}

// Type-safe destructuring and spreading
function analyzeLegoPieces(set: LegoSet) {
    const { pieces, color, features } = set;

    // TypeScript ensures type safety when spreading
    const enhancedSet: LegoSet = {
        ...set,
        features: {
            ...features,
            lights: true
        }
    };

    return enhancedSet;
}

// Real-world example: Component props
interface ButtonProps {
    text: string;
    onClick: () => void;
    style?: React.CSSProperties;
    disabled?: boolean;
}

function Button({ text, onClick, ...props }: ButtonProps) {
    return (
        <button onClick={onClick} {...props}>
            {text}
        </button>
    );
}

Summary

The transition from JavaScript to TypeScript is like upgrading your Lego building process:

1. JavaScript (Basic Building):

   • Free-form building
   • Flexible piece usage
   • Runtime error discovery

2. TypeScript (Professional Building):

   • Detailed and specific instructions
   • Piece compatibility checking
   • Error prevention before building

Key Transition Tips:

1. Start with basic type annotations.
2. Gradually add interfaces and type definitions.
3. Use the compiler to catch errors early.
4. Leverage type inference where possible.
5. Add strict null checks and other compiler options gradually.

Remember: TypeScript builds upon your JavaScript knowledge, adding safety and clarity rather than changing the fundamental building process. That being said my recommendation remains... learn JavaScript first then learn TypeScript.

References

• W3Schools. (n.d.). JavaScript scope. W3Schools. Retrieved January 12, 2025, from https://www.w3schools.com/js/js_scope.asp
• Mozilla. (n.d.). Variables — JavaScript. MDN Web Docs. Retrieved January 14, 2025, from https://developer.mozilla.org/en-US/docs/Learn-web-development/Core/Scripting/Variables