Unveiling the Hidden Treasures: Exploring Lesser-Known TypeScript Features
Tags: webdev, typescript, programming, beginners
Published: 2023-08-08 10:42:54

Greetings, fellow developers! While we traverse the familiar landscapes of TypeScript, there exists an uncharted territory brimming with lesser-known gems that can infuse your code with power and elegance. In this journey, we'll delve into the depths of TypeScript's enigmatic toolkit, uncovering features that might have eluded your radar but hold the potential to transform your coding experience. So, fasten your seatbelts as we embark on an exhilarating expedition to discover these unsung heroes of TypeScript!

## 1. **Mapped Types: Crafting Dynamic Transformations**

Picture a toolkit that empowers you to craft dynamic transformations for your types. Welcome to the realm of Mapped Types! These versatile constructs allow you to wield the magic of type manipulation, breathing new life into your code.

```typescript
type MagicMap<T> = { [K in keyof T]: T[K] | null };

const originalObj = { name: "Merlin", age: 1000 };
const nullableObj: MagicMap<typeof originalObj> = { name: "Gandalf", age: null };
```

Let's unravel the practical enchantment of mapped types:

```typescript
type PartialAndNullable<T> = { [K in keyof T]?: T[K] | null };

interface User {
  id: number;
  name: string;
  email: string;
}

const partialUser: PartialAndNullable<User> = { id: 1, name: null };
```

## 2. **Conditional Types: Pioneering Type Predictions**

Imagine gazing into a crystal ball that predicts and adapts types based on conditions. Say hello to Conditional Types! These mystical constructs enable you to weave intricate type logic, providing a dynamic edge to your code.

```typescript
type IsString<T> = T extends string ? true : false;

type CheckString = IsString<"Wizard">; // true
```

Transcend into the realm of practical application:

```typescript
type Pluck<T, K extends keyof T> = {
  [P in K]: T[P];
};

interface Spell {
  name: string;
  incantation: string;
  effect: string;
}

const spell: Pluck<Spell, "name" | "effect"> = {
  name: "Levitation",
  effect: "Objects float in the air",
};
```

## 3. **Tuple Type: Symphony of Ordered Abstractions**

Envision a symphony where data harmoniously follows an ordered arrangement. This is the magic of Tuple Types! These structured envoys bring a touch of elegance to your arrays, preserving both sequence and data types.

```typescript
type SpellComponent = [string, number];

const fireball: SpellComponent = ["Fire", 3];
```

Harmonize your data with the power of tuples:

```typescript
type Coordinate = [number, number];

function calculateDistance(pointA: Coordinate, pointB: Coordinate): number {
  const [x1, y1] = pointA;
  const [x2, y2] = pointB;
  return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
}
```

## 4. **Template Literal Types: Strings Amplified into Types**

Imagine a realm where strings metamorphose into versatile types. Enter Template Literal Types, the enigmatic alchemy that binds strings and types in an intricate dance.

```typescript
type Message<T> = `Hello, ${T}!`;

const greeting: Message<"Sorcerer"> = "Hello, mighty sorcerer!";
```

Unveil the practical magic within template literals:

```typescript
type JoinStrings<T extends string, U extends string> = `${T} ${U}`;

type Combined = JoinStrings<"Enchanted", "Forest">; // "Enchanted Forest"
```

## 5. **Infer Keyword: Unveiling the Cryptic Prophecies of Types**

Enter the oracle's chamber, where types are unveiled through cryptic prophecies. The `infer` keyword opens a portal to the hidden identities of types, adding an air of mystery to your code.

```typescript
type InferReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function greet(): string {
  return "Greetings!";
}

type Greeting = InferReturnType<typeof greet>; // string
```

Peer into the cryptic future with the power of type inference:

```typescript
type Magic<T> = T extends infer U ? U extends string ? true : false : never;

type IsMagic = Magic<"abracadabra">; // true
```

## 6. **Key Remapping in Mapped Types: Unleashing the Shapeshifting Powers**

Visualize a world where keys within your types can be reshaped, remolded, and reborn anew. Key Remapping in Mapped Types offers you the power to unlock shapeshifting abilities for your data structures.

```typescript
type RenameKey<T, K extends keyof T, NewKey extends string> = {
  [P in keyof T as P extends K ? NewKey : P]: T[P];
};

interface Potion {
  name: string;
  duration: number;
}

type EnhancedPotion = RenameKey<Potion, "duration", "effectDuration">;
```

Unleash the transformative force of key remapping:

```typescript
type Coordinate = { x: number; y: number };
type Offset = { dx: number; dy: number };

function translate(coord: Coordinate, offset: Offset): Coordinate {
  return {
    x: coord.x + offset.dx,
    y: coord.y + offset.dy,
  };
}
```

## 7. **GlobalThis: Peering into the Global Horizon**

Imagine gazing through a mystical window that grants you a view of the entire global realm. With `GlobalThis`, you can access the cosmic nexus of global objects, uniting the various threads of your code's reality.

```typescript
const globalVar = 42;

console.log(GlobalThis["globalVar"]); // 42
```

Harness the cosmic energy of `GlobalThis` in your own code realms:

```typescript
declare global {
  interface Window {
    mysticalScroll: string;
  }
}

window.mysticalScroll = "Scroll of Ancient Wisdom";
```

---

## Conclusion

Thanks for joining me on this little journey, we will see if there will be more parts to this series. If you have any questions or feedback, feel free to reach out to me  ^^