> ## 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 Public Field

A public field in TypeScript is a class property that is accessible without restriction from any context, including internally within the defining class, within derived subclasses, and externally via instances of the class. By default, all class members in TypeScript are implicitly public unless explicitly restricted using the `private` or `protected` access modifiers, or ECMAScript private fields (`#`).

## Syntax and Declaration

Public fields can be declared implicitly by omitting an access modifier, or explicitly using the `public` keyword.

```typescript theme={"dark"}
class DataNode {
    // Implicitly public field
    nodeId: string;

    // Explicitly public field
    public isActive: boolean = true;

    constructor(id: string) {
        this.nodeId = id;
    }
}
```

## Constructor Parameter Properties

TypeScript provides syntactic sugar for declaring and initializing public fields directly within the constructor signature. By prefixing a constructor parameter with the `public` modifier, the compiler automatically generates the corresponding public field and assigns the argument to it upon instantiation.

```typescript theme={"dark"}
class Config {
    // Automatically declares 'public endpoint: string' and assigns the argument to 'this.endpoint'
    constructor(public endpoint: string) {}
}
```

## Technical Characteristics

* **Type Erasure:** The `public` keyword is a TypeScript-specific access modifier. It exists strictly at compile-time for structural typing and access control. The keyword is completely erased during the emit phase and does not alter the runtime behavior of the resulting JavaScript.
* **Definite Assignment:** When the `strictPropertyInitialization` compiler option is enabled, public fields must be initialized either at their declaration or synchronously within the constructor. If a field is initialized via indirect means (e.g., a dependency injection framework), the definite assignment assertion operator (`!`) must be appended to bypass the compiler check.

```typescript theme={"dark"}
class Service {
    public initializedField: number = 1;
    public deferredField!: string; // Definite assignment assertion
}
```

* **JavaScript Emission:** The compilation of public fields is dictated by the `target` and `useDefineForClassFields` flags in `tsconfig.json`.
  * **Legacy Emission:** When `useDefineForClassFields` is `false`, initialized public fields are emitted as standard property assignments (`this.fieldName = value;`) injected directly into the constructor function.
  * **Standard ECMAScript Emission:** When `useDefineForClassFields` is `true` and the `target` is ES2022 or newer, TypeScript emits public fields using standard ECMAScript class field syntax.
  * **Polyfilled Standard Emission:** When `useDefineForClassFields` is `true` but the `target` is older than ES2022 (e.g., ES2015), TypeScript does not use class field syntax. Instead, it emits `Object.defineProperty` calls inside the constructor to polyfill the standard ECMAScript semantics.
* **Uninitialized Fields and the `declare` Modifier:** Under standard ECMAScript semantics (`useDefineForClassFields: true`), uninitialized public fields (e.g., `public name: string;`) are emitted and initialized to `undefined` on the instance. This behavior can inadvertently overwrite prototype-level getters or setters. To define a field's type without emitting any runtime initialization code, use the `declare` modifier.

```typescript theme={"dark"}
class Base {
    get name() { return "BaseNode"; }
}

class Derived extends Base {
    // Prevents emission of `name;` or `Object.defineProperty`, 
    // preserving the prototype getter while providing type information.
    declare public name: string; 
}
```

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