> ## 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 New

The `new` operator allocates memory and initializes a new instance of a class or constructor function. In TypeScript, it acts as a compile-time boundary that enforces strict type-checking against a target's construct signature, validating both the provided arguments and the resulting instance type.

## Syntax

```text theme={"dark"}
new Constructor[<TypeParameters>](...arguments)
```

## Construct Signatures

TypeScript represents the type of a function that can be invoked with `new` using a construct signature. This is defined using the `new` keyword preceding a function signature.

```typescript theme={"dark"}
// Type alias with a construct signature
type Constructor<T> = new (...args: any[]) => T;

// Interface with a construct signature
interface StringConstructable {
    new (value: string): String;
}
```

When the TypeScript compiler encounters the `new` operator, it looks up the construct signature of the operand. If the operand lacks a construct signature, the compiler throws a `TS2351` error ("This expression is not constructable").

## Type Space vs. Value Space

A critical mechanic of the `new` operator in TypeScript is how it interacts with class declarations. A class declaration creates exactly one *type* in the type space (representing the shape of the instantiated object) and one *value* in the value space (the constructor function itself, which contains the construct signature and static members).

To type a variable that holds the constructor itself (the target of the `new` operator), you must use the `typeof` operator on the class value to extract its type, or define a construct signature. The constructor's type is not created as a distinct named type in the scope.

```typescript theme={"dark"}
class Widget {
    constructor(public id: number) {}
}

// 'Widget' is the instance type.
const instance: Widget = new Widget(1);

// 'typeof Widget' extracts the constructor type from the value space.
// It matches the signature: new (id: number) => Widget
const WidgetConstructor: typeof Widget = Widget;

// The new operator applied to the constructor reference
const anotherInstance: Widget = new WidgetConstructor(2);
```

## Generic Instantiation

When the `new` operator is applied to a generic class or constructor, TypeScript performs type inference on the constructor arguments to determine the type parameters. Alternatively, type parameters can be explicitly provided via angle brackets `< >` immediately following the constructor name.

```typescript theme={"dark"}
class Container<T, U> {
    constructor(public primary: T, public secondary: U) {}
}

// Implicit type inference: T is inferred as string, U as number
const inferred = new Container("data", 42); 

// Explicit type instantiation: T and U are strictly bound
const explicit = new Container<string, number>("data", 42);

// Compiler error: Argument of type 'boolean' is not assignable to parameter of type 'number'.
const errorInstance = new Container<string, number>("data", true); 
```

## Abstract Classes

TypeScript prohibits the `new` operator from directly instantiating abstract classes. Abstract classes possess an `abstract new` construct signature in their type representation. The compiler prevents instantiation by explicitly checking for the `abstract` modifier on the constructor type. When the `new` operator is applied to an abstract constructor, the compiler throws a `TS2511` error ("Cannot create an instance of an abstract class"), ensuring the class can only be instantiated via a derived concrete class.

```typescript theme={"dark"}
abstract class Base {
    constructor(public name: string) {}
}

class Derived extends Base {}

// TS2511: Cannot create an instance of an abstract class.
const base = new Base("test"); 

// Valid instantiation of the concrete subclass
const derived = new Derived("test"); 
```

<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>
