DEV Community: Omotoso Abosede Racheal

Conditional Types in TypeScript.

Omotoso Abosede Racheal — Fri, 26 Jul 2024 11:23:50 +0000

Introduction

Conditional types in TypeScript allow you to express type relationships using a form of ternary logic at the type level. They provide a way to perform type checks and return different types based on those checks. The syntax and basic usage of conditional types are similar to JavaScript's ternary operator.

Conditional types help describe the relation between the types of inputs and outputs.

T extend U ? X : Y

Prerequisite

Javascript

What you will learn

Some Conditional types examples
Conditional Type Constraint
Inferring Within Conditional Types
Distributive Conditional Types

Some Conditional types examples

Conditional types take a form that looks a little like conditional expressions (condition ? trueExpression : falseExpression) in JavaScript:

SomeType extends OtherType ? TrueType : FalseType;

When the type on the left of the extends is assignable to the one on the right, then you’ll get the type in the first branch (the “true” branch); otherwise, you’ll get the type in the latter branch (the “false” branch).

let’s take another example for a createLabel function:

interface IdLabel {
  id: number /* some fields */;
}
interface NameLabel {
  name: string /* other fields */;
}

function createLabel(id: number): IdLabel;
function createLabel(name: string): NameLabel;
function createLabel(nameOrId: string | number): IdLabel | NameLabel;
function createLabel(nameOrId: string | number): IdLabel | NameLabel {
  throw "unimplemented";
}

These overloads for createLabel describe a single JavaScript function that makes a choice based on the types of its inputs. Note a few things:

If a library has to make the same sort of choice over and over throughout its API, this becomes cumbersome.
We have to create three overloads: one for each case when we’re sure of the type (one for string and one for number), and one for the most general case (taking a string | number). For every new type createLabel can handle, the number of overloads grows exponentially.

Instead, we can encode that logic in a conditional type:

type NameOrId<T extends number | string> = T extends number
  ? IdLabel
  : NameLabel;

We can then use that conditional type to simplify our overloads down to a single function with no overloads.

function createLabel<T extends number | string>(idOrName: T): NameOrId<T> {
  throw "unimplemented";
}

let a = createLabel("typescript");

let a: NameLabel

let b = createLabel(2.8);

let b: IdLabel

let c = createLabel(Math.random() ? "hello" : 42);
let c: NameLabel | IdLabel

Conditional Type Constraint

In TypeScript, a conditional type constraint is a way to impose restrictions (constraint) on type parameters in generic types using conditional types. This technique allows you to express more complex type relationships and ensure that type parameters meet certain criteria.

Let's start with a basic example to illustrate how conditional type constraints work:

type CheckType<T> = T extends string ? "String Type" : "Other Type";

type A = CheckType<string>;  // "String Type"
type B = CheckType<number>;  // "Other Type"

In this example, CheckType is a conditional type that checks if the type T extends string. If it does, it returns "String Type"; otherwise, it returns "Other Type".

Using Conditional Type Constraints in Generics

Conditional type constraints are often used within generic types to enforce more specific type rules.

Example: Constraining Function Parameters

Here's an example where a conditional type constraint ensures that a function parameter must be a specific type:

type EnsureString<T> = T extends string ? T : never;

function logString<T>(value: EnsureString<T>): void {
  console.log(value);
}

logString("Hello"); // Works
logString(42);   // Error: Argument of type '42' is not assignable to parameter of type 'never'.

In this example, the EnsureString type ensures that T must be a string. If T is not a string, the type becomes never, which is an uninhabitable type and causes a type error.

More Complex Example: Constraining Based on Object Properties

You can also use conditional type constraints to enforce more complex rules, such as ensuring an object has specific properties:

type HasName<T> = T extends { name: string } ? T : never;

function greet<T>(obj: HasName<T>): void {
  console.log(`Hello, ${obj.name}`);
}

greet({ name: "Alice" });       // Works
greet({ name: "Bob", age: 30 }); // Works
greet({ age: 30 });             // Error: Argument of type '{ age: number; }' is not assignable to parameter of type 'never'.

In this example, the HasName type ensures that T must be an object with a name property of type string. If T does not have this property, the type becomes never, causing a type error.

Inferring Within Conditional Types

In TypeScript, you can use the infer keyword within conditional types to introduce a type variable that can be inferred from a specific part of a type. This is particularly useful when working with complex types such as functions, tuples, and arrays, where you might want to extract a particular type of component.

The syntax for using infer within a conditional type is as follows:

type SomeType<T> = T extends SomeCondition ? infer U : FallbackType;

Here, infer U allows TypeScript to infer the type U from T if T satisfies SomeCondition.

Examples

Extracting the Return Type of a Function

You can use infer to extract the return type of a function type:

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

type Func = (a: number, b: string) => boolean;
type ReturnTypeOfFunc = GetReturnType<Func>;  // boolean

In this example, GetReturnType checks if T is a function type. If it is, infer R captures the return type of the function, and GetReturnType resolves to that return type (R). Otherwise, it resolves to never.

Extracting the Element Type of an Array

You can use infer to extract the type of elements in an array:

type ElementType<T> = T extends (infer U)[] ? U : never;

type ArrayOfNumbers = number[];
type NumberElementType = ElementType<ArrayOfNumbers>;  // number

Here, ElementType checks if T is an array type. If it is, infer U captures the element type, and ElementType resolves to that element type (U). Otherwise, it resolves to never.

Extracting Tuple Types

You can use infer to work with tuple types and extract their component types:

type FirstElement<T> = T extends [infer U, ...any[]] ? U : never;

type Tuple = [string, number, boolean];
type FirstType = FirstElement<Tuple>;  // string

In this example, FirstElement checks if T is a tuple type. If it is, infer U captures the type of the first element, and FirstElement resolves to that type (U). Otherwise, it resolves to never.

Advanced Example: Extracting Parameter Types of a Function

You can use infer to extract the types of the parameters of a function:

type GetParameters<T> = T extends (...args: infer P) => any ? P : never;

type Func = (a: number, b: string) => void;
type ParametersOfFunc = GetParameters<Func>;  // [number, string]

In this example, GetParameters checks if T is a function type. If it is, infer P captures the parameter types as a tuple, and GetParameters resolves to that tuple type (P). Otherwise, it resolves to never.

Distributive Conditional Types

When conditional types act on a generic type, they become distributive when given a union type. This means that if you have a conditional type T and T is a union, the conditional type will be applied to each member of the union.
For example, take the following:

type ToArray<Type> = Type extends any ? Type[] : never;

If we plug a union type into ToArray, then the conditional type will be applied to each member of that union.

type ToArray<Type> = Type extends any ? Type[] : never;

type StrArrOrNumArr = ToArray<string | number>;

type StrArrOrNumArr = string[] | number[]

What happens here is that ToArray distributes on:

 string | number;

and maps over each member type of the union, to what is effectively:

ToArray<string> | ToArray<number>;

which leaves us with:

string[] | number[];

Typically, distributivity is the desired behavior. To avoid that behavior, you can surround each side of the extends keyword with square brackets.

type ToArrayNonDist<Type> = [Type] extends [any] ? Type[] : never;

// 'ArrOfStrOrNum' is no longer a union.
type ArrOfStrOrNum = ToArrayNonDist<string | number>;

type ArrOfStrOrNum = (string | number)[]

Conclusion

Conditional types in Typescript are powerful feature that enables advanced type manipulation and can help create more precise and flexible type definitions. They are particularly useful in generic programming and when working with complex type transformation.

Conditional Types in TypeScript.

Omotoso Abosede Racheal — Fri, 26 Jul 2024 11:23:50 +0000

Introduction

Conditional types help describe the relation between the types of inputs and outputs.

T extend U ? X : Y

Prerequisite

Javascript

What you will learn

Some Conditional types examples
Conditional Type Constraint
Inferring Within Conditional Types
Distributive Conditional Types

Some Conditional types examples

Conditional types take a form that looks a little like conditional expressions (condition ? trueExpression : falseExpression) in JavaScript:

SomeType extends OtherType ? TrueType : FalseType;

let’s take another example for a createLabel function:

interface IdLabel {
  id: number /* some fields */;
}
interface NameLabel {
  name: string /* other fields */;
}

function createLabel(id: number): IdLabel;
function createLabel(name: string): NameLabel;
function createLabel(nameOrId: string | number): IdLabel | NameLabel;
function createLabel(nameOrId: string | number): IdLabel | NameLabel {
  throw "unimplemented";
}

These overloads for createLabel describe a single JavaScript function that makes a choice based on the types of its inputs. Note a few things:

If a library has to make the same sort of choice over and over throughout its API, this becomes cumbersome.
We have to create three overloads: one for each case when we’re sure of the type (one for string and one for number), and one for the most general case (taking a string | number). For every new type createLabel can handle, the number of overloads grows exponentially.

Instead, we can encode that logic in a conditional type:

type NameOrId<T extends number | string> = T extends number
  ? IdLabel
  : NameLabel;

We can then use that conditional type to simplify our overloads down to a single function with no overloads.

function createLabel<T extends number | string>(idOrName: T): NameOrId<T> {
  throw "unimplemented";
}

let a = createLabel("typescript");

let a: NameLabel

let b = createLabel(2.8);

let b: IdLabel

let c = createLabel(Math.random() ? "hello" : 42);
let c: NameLabel | IdLabel

Conditional Type Constraint

Let's start with a basic example to illustrate how conditional type constraints work:

type CheckType<T> = T extends string ? "String Type" : "Other Type";

type A = CheckType<string>;  // "String Type"
type B = CheckType<number>;  // "Other Type"

In this example, CheckType is a conditional type that checks if the type T extends string. If it does, it returns "String Type"; otherwise, it returns "Other Type".

Using Conditional Type Constraints in Generics

Conditional type constraints are often used within generic types to enforce more specific type rules.

Example: Constraining Function Parameters

Here's an example where a conditional type constraint ensures that a function parameter must be a specific type:

type EnsureString<T> = T extends string ? T : never;

function logString<T>(value: EnsureString<T>): void {
  console.log(value);
}

logString("Hello"); // Works
logString(42);   // Error: Argument of type '42' is not assignable to parameter of type 'never'.

In this example, the EnsureString type ensures that T must be a string. If T is not a string, the type becomes never, which is an uninhabitable type and causes a type error.

More Complex Example: Constraining Based on Object Properties

You can also use conditional type constraints to enforce more complex rules, such as ensuring an object has specific properties:

type HasName<T> = T extends { name: string } ? T : never;

function greet<T>(obj: HasName<T>): void {
  console.log(`Hello, ${obj.name}`);
}

greet({ name: "Alice" });       // Works
greet({ name: "Bob", age: 30 }); // Works
greet({ age: 30 });             // Error: Argument of type '{ age: number; }' is not assignable to parameter of type 'never'.

In this example, the HasName type ensures that T must be an object with a name property of type string. If T does not have this property, the type becomes never, causing a type error.

Inferring Within Conditional Types

The syntax for using infer within a conditional type is as follows:

type SomeType<T> = T extends SomeCondition ? infer U : FallbackType;

Here, infer U allows TypeScript to infer the type U from T if T satisfies SomeCondition.

Examples

Extracting the Return Type of a Function

You can use infer to extract the return type of a function type:

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

type Func = (a: number, b: string) => boolean;
type ReturnTypeOfFunc = GetReturnType<Func>;  // boolean

Extracting the Element Type of an Array

You can use infer to extract the type of elements in an array:

type ElementType<T> = T extends (infer U)[] ? U : never;

type ArrayOfNumbers = number[];
type NumberElementType = ElementType<ArrayOfNumbers>;  // number

Here, ElementType checks if T is an array type. If it is, infer U captures the element type, and ElementType resolves to that element type (U). Otherwise, it resolves to never.

Extracting Tuple Types

You can use infer to work with tuple types and extract their component types:

type FirstElement<T> = T extends [infer U, ...any[]] ? U : never;

type Tuple = [string, number, boolean];
type FirstType = FirstElement<Tuple>;  // string

In this example, FirstElement checks if T is a tuple type. If it is, infer U captures the type of the first element, and FirstElement resolves to that type (U). Otherwise, it resolves to never.

Advanced Example: Extracting Parameter Types of a Function

You can use infer to extract the types of the parameters of a function:

type GetParameters<T> = T extends (...args: infer P) => any ? P : never;

type Func = (a: number, b: string) => void;
type ParametersOfFunc = GetParameters<Func>;  // [number, string]

Distributive Conditional Types

type ToArray<Type> = Type extends any ? Type[] : never;

If we plug a union type into ToArray, then the conditional type will be applied to each member of that union.

type ToArray<Type> = Type extends any ? Type[] : never;

type StrArrOrNumArr = ToArray<string | number>;

type StrArrOrNumArr = string[] | number[]

What happens here is that ToArray distributes on:

 string | number;

and maps over each member type of the union, to what is effectively:

ToArray<string> | ToArray<number>;

which leaves us with:

string[] | number[];

Typically, distributivity is the desired behavior. To avoid that behavior, you can surround each side of the extends keyword with square brackets.

type ToArrayNonDist<Type> = [Type] extends [any] ? Type[] : never;

// 'ArrOfStrOrNum' is no longer a union.
type ArrOfStrOrNum = ToArrayNonDist<string | number>;

type ArrOfStrOrNum = (string | number)[]

Conclusion

Conditional Rendering in React

Omotoso Abosede Racheal — Wed, 12 Jun 2024 10:13:40 +0000

Introduction

Conditional Rendering in React refers to the technique of displaying components or element based on certain conditions. Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like if statements, &&, and ? : operators.

Prerequisite

HTML
Javascript

What you will learn

How to return different JSX depending on a condition
How to conditionally include or exclude a piece of JSX
Common conditional syntax shortcuts you’ll encounter in React codebases

How to return different JSX depending on a condition

Let’s say you have a PackingList component rendering several Items, which can be marked as packed or not:

function Item({ name, isPacked }) {
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

Notice that some of the Item components have their isPacked prop set to true instead of false. You want to add a checkmark (✔) to packed items if isPacked={true}.

You can write this as an if/else statement like so:

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;

If the isPacked prop is true, this code returns a different JSX tree. With this change, some of the items get a checkmark at the end:

function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✔</li>;
  }
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

Conditionally including JSX
In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output:

<li className="item">{name} ✔</li>

Is very similar to

<li className="item">{name}</li>

Both of the conditional branches return

<li className="item">...</li>

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;

While this duplication isn’t harmful, it could make your code harder to maintain. What if you want to change the className? You’d have to do it in two places in your code! In such a situation, you could conditionally include a little JSX to make your code more DRY.

Conditional (ternary) operator (? :)
JavaScript has a compact syntax for writing a conditional expression — the conditional operator or “ternary operator”.

Instead of this:

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;

You can write this:

return (
  <li className="item">
    {isPacked ? name + ' ✔' : name}
  </li>
);

You can read it as “if isPacked is true, then (?) render name + ' ✔', otherwise (:) render name”.

Now let’s say you want to wrap the completed item’s text into another HTML tag, like 'del' to strike it out. You can add even more newlines and parentheses so that it’s easier to nest more JSX in each of the cases:

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? (
        <del>
          {name + ' ✔'}
        </del>
      ) : (
        name
      )}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

Logical AND operator (&&)
Another common shortcut you’ll encounter is the JavaScript logical AND (&&) operator. Inside React components, it often comes up when you want to render some JSX when the condition is true, or render nothing otherwise. With &&, you could conditionally render the checkmark only if isPacked is true

return (
  <li className="item">
    {name} {isPacked && '✔'}
  </li>
);

You can read this as “if isPacked, then (&&) render the checkmark, otherwise, render nothing”.

Here it is in action

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✔'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

A JavaScript && expression returns the value of its right side (in our case, the checkmark) if the left side (our condition) is true. But if the condition is false, the whole expression becomes false. React considers false as a “hole” in the JSX tree, just like null or undefined, and doesn’t render anything in its place.

Conditionally assigning JSX to a variable
When the shortcuts get in the way of writing plain code, try using an if statement and a variable. You can reassign variables defined with let, so start by providing the default content you want to display, the name

let itemContent = name;

Use an if statement to reassign a JSX expression to itemContent if isPacked is true:

if (isPacked) {
  itemContent = name + " ✔";
}

This style is the most verbose, but it’s also the most flexible. Here it is in action

function Item({ name, isPacked }) {
  let itemContent = name;
  if (isPacked) {
    itemContent = name + " ✔";
  }
  return (
    <li className="item">
      {itemContent}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

If you’re not familiar with JavaScript, this variety of styles might seem overwhelming at first. However, learning them will help you read and write any JavaScript code — and not just React components! Pick the one you prefer for a start, and then consult this reference again if you forget how the other ones work.

Conclusion

In React, you control branching logic with JavaScript.
You can return a JSX expression conditionally with an if statement.
You can conditionally save some JSX to a variable and then include it inside other JSX by using the curly braces.
In JSX, {cond ? : } means “if cond, render , otherwise ”.
In JSX, {cond && } means “if cond, render , otherwise nothing”.
The shortcuts are common, but you don’t have to use them if you prefer plain if.