> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.

# TypeScript Parameterized Constructor

A parameterized constructor in TypeScript is a special `constructor` method within a class that accepts one or more typed arguments. It is invoked automatically during object instantiation via the `new` keyword, assigning the passed arguments to class properties to establish the initial state of the object.

## Standard Syntax

In its most basic form, parameters are explicitly typed in the constructor signature, and their values are manually assigned to declared class properties using the `this` context.

```typescript theme={"dark"}
class Entity {
    name: string;
    version: number;

    constructor(name: string, version: number) {
        this.name = name;
        this.version = version;
    }
}
```

## Parameter Properties (Shorthand)

TypeScript provides a syntactic shorthand known as parameter properties. By prefixing a constructor parameter with an access modifier (`public`, `private`, `protected`) or the `readonly` modifier, TypeScript automatically declares the class property and initializes it with the provided argument. This eliminates the need for explicit property declarations and manual assignment.

```typescript theme={"dark"}
class Entity {
    constructor(
        public name: string, 
        private version: number, 
        readonly id: string
    ) {
        // Properties are implicitly declared and assigned.
    }
}
```

## Optional and Default Parameters

Constructor parameters follow standard TypeScript function arity rules. They can be marked as optional using the `?` token or assigned default values. Optional parameters must follow all required parameters in the signature.

```typescript theme={"dark"}
class NetworkConfig {
    constructor(
        public host: string, 
        public port: number = 8080, // Default parameter
        public timeout?: number     // Optional parameter
    ) {}
}
```

## Constructor Overloading

TypeScript supports constructor overloading, allowing a class to define multiple constructor signatures to accept different parameter types or counts. However, there can only be one implementation signature. The implementation signature must be compatible with all overload signatures and is the only one that contains the actual execution logic.

```typescript theme={"dark"}
class Coordinates {
    x: number;
    y: number;

    // Overload signatures
    constructor(x: number, y: number);
    constructor(xyString: string);

    // Implementation signature
    constructor(xOrString: number | string, y?: number) {
        if (typeof xOrString === "string") {
            const [parsedX, parsedY] = xOrString.split(",").map(Number);
            this.x = parsedX;
            this.y = parsedY;
        } else {
            this.x = xOrString;
            this.y = y!;
        }
    }
}
```

## Inheritance and `super()`

When a derived class implements a parameterized constructor, it must invoke the base class's constructor using the `super()` method. The arguments passed to `super()` must satisfy the parameter requirements of the base class constructor. Furthermore, `super()` must be executed before any reference to `this` is made within the derived constructor.

```typescript theme={"dark"}
class BaseNode {
    constructor(public nodeId: string) {}
}

class ComputeNode extends BaseNode {
    constructor(nodeId: string, public cores: number) {
        super(nodeId); // Invokes BaseNode constructor
        // 'this' can only be accessed after super()
    }
}
```

<div
  style={{ 
display: "flex", 
justifyContent: "space-between", 
alignItems: "center", 
maxWidth: "754px", 
padding: "1rem 0",
marginBottom: "24px"
}}
>
  <span style={{ fontWeight: "bold", fontSize: "1.25rem", color: "var(--tw-prose-headings)", fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" }}>Tired of Poor TypeScript Skills? Fix That With Deep Grasping!</span>

  <a
    href="https://syntblaze.com"
    target="_blank"
    style={{ 
  marginLeft: "24px",
  textDecoration: "none", 
  backgroundColor: "#007AFF",
  color: "#ffffff", 
  padding: "6px 16px", 
  borderRadius: "16px",
  fontSize: "0.9rem",
  fontWeight: "600",
  textAlign: "center",
  transition: "background-color 0.2s ease"
}}
  >
    Learn More
  </a>
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/skill-tracking.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=b9b0305c93bb501c9e767b5c76c88835" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/skill-tracking.png" />

  <img src="https://mintcdn.com/syntblazellc/23tyuOzaWS88qFlc/images/nuggets.png?fit=max&auto=format&n=23tyuOzaWS88qFlc&q=85&s=c86c80197299762989e9b882419b2109" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/nuggets.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/bite-sized-exercises.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=a65f9a38c37ff28ab73ed783c53c60e3" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/bite-sized-exercises.png" />
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap", marginTop: "12px" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/mastery-chain.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=748a1763454713e679260fbb95f154a2" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/mastery-chain.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-previews.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=242f61448ff5dd6deaaab2dccc13b507" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-previews.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-explanations.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=cf0fc1c31f9cd0fc26716781be05fbc9" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-explanations.png" />
</div>
