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

The `string` type in TypeScript is a primitive data type representing an immutable sequence of UTF-16 code units. It encompasses all textual data and serves as the foundational type for both standard text assignment and advanced, string-based type transformations within the TypeScript compiler.

TypeScript supports three syntax forms for string initialization, identical to JavaScript: double quotes (`"`), single quotes (`'`), and backticks (`` ` ``) for template literals.

```typescript theme={"dark"}
const double: string = "text";
const single: string = 'text';
const interpolated: string = `value: ${double}`;
```

## String Literal Types

Beyond the generic `string` primitive, TypeScript allows exact string values to be declared as discrete types. A string literal type restricts a variable to one specific sequence of characters.

```typescript theme={"dark"}
let exactValue: "SUCCESS";
exactValue = "SUCCESS"; // Valid
exactValue = "PENDING"; // Type Error: Type '"PENDING"' is not assignable to type '"SUCCESS"'.
```

Literal types are frequently combined using union operators to create finite sets of permissible string values.

```typescript theme={"dark"}
type Direction = "NORTH" | "SOUTH" | "EAST" | "WEST";
let heading: Direction = "NORTH";
```

## Template Literal Types

TypeScript extends JavaScript's template literal syntax into the type system. Template literal types allow you to build new string types by concatenating or interpolating existing string literal types. When interpolating unions, TypeScript computes the cross-product of all possible combinations.

```typescript theme={"dark"}
type Color = "Red" | "Blue";
type Size = "Small" | "Large";

type ProductVariant = `${Size}-${Color}`;
// Resolves to: "Small-Red" | "Small-Blue" | "Large-Red" | "Large-Blue"
```

## Intrinsic String Manipulation Types

The TypeScript compiler provides four intrinsic utility types specifically for transforming string literal types at the type level. These are implemented directly in the compiler for performance.

```typescript theme={"dark"}
type Base = "helloWorld";

type U = Uppercase<Base>;    // "HELLOWORLD"
type L = Lowercase<Base>;    // "helloworld"
type C = Capitalize<Base>;   // "HelloWorld"
type UC = Uncapitalize<Base> // "helloWorld"
```

These utilities can be combined with template literal types to enforce strict naming conventions dynamically.

```typescript theme={"dark"}
type Entity = "user" | "post";
type FetcherMethod = `get${Capitalize<Entity>}`;
// Resolves to: "getUser" | "getPost"
```

## `string` vs. `String`

TypeScript distinguishes between the primitive `string` type and the global `String` wrapper object. The lowercase `string` represents the primitive value and should be used for type annotations. The uppercase `String` refers to the JavaScript object prototype and should generally be avoided in type signatures.

```typescript theme={"dark"}
const primitiveString: string = "hello"; // Correct
const objectString: String = new String("hello"); // Valid, but anti-pattern for typing

// Type Error: 'string' is a primitive, but 'String' is a wrapper object.
const mismatched: string = new String("hello"); 
```

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