Understanding the operator of index type queries and the utility of the extends keyword

Question

Understanding the operator of index type queries and the utility of the extends keyword

While reviewing the documentation on Advanced Types in Typescript, I came across an interesting concept known as the Index Query Operator. The documentation can be found here: https://www.typescriptlang.org/docs/handbook/advanced-types.html. One example provided was the following code snippet:

function pluck<T, K extends keyof T>(o: T, names: K[]): T[K][] {
  return names.map(n => o[n]);
}

It's clear to me how keyof generates a union of all known public property names on object T. However, I'm unsure about the specific role of the extends keyword. I understand that it enforces that K must be a valid property of T, but I'm curious as to why extends is used and if there are other alternatives. Additionally, I'm wondering if it's possible to extend unions in Typescript, or if this is a concept specific to generics.

Any insights on this would be greatly appreciated. Thank you.

typescript

Answer 1

Answer №1

When using the keyword extends in this scenario, it serves as a way to impose a restriction on a type parameter.

For instance, in the following straightforward example, the compiler will only permit passing objects that adhere to the Person interface:

interface Person {
    name: string;
}

function displayAndReturnPerson<T extends Person>(person: T) {
    console.log(person.name);
    return person;
}

// valid
const result1 = displayAndReturnPerson<Person>({ name: "David" });
// invalid, as string does not meet the constraints of Person
const result2 = displayAndReturnPerson<string>("");

When you encounter K extends keyof T in your code, it signifies that K is restricted to being a key from T. Simply put, K is a string that must be a property name within T.

This concept is unique to generics and it's worth noting that you can utilize a union type within a constraint as well.

Answer 2

When using the keyword extends in this scenario, it serves as a way to impose a restriction on a type parameter.

For instance, in the following straightforward example, the compiler will only permit passing objects that adhere to the Person interface:

interface Person {
    name: string;
}

function displayAndReturnPerson<T extends Person>(person: T) {
    console.log(person.name);
    return person;
}

// valid
const result1 = displayAndReturnPerson<Person>({ name: "David" });
// invalid, as string does not meet the constraints of Person
const result2 = displayAndReturnPerson<string>("");

When you encounter K extends keyof T in your code, it signifies that K is restricted to being a key from T. Simply put, K is a string that must be a property name within T.

This concept is unique to generics and it's worth noting that you can utilize a union type within a constraint as well.

Understanding the operator of index type queries and the utility of the extends keyword

Answer №1

Similar questions

Creating a Custom TreeView in VS Code using JSON data

How can a parent component update a child component's prop value in VUE?

The synchronization between Typescript and the HTML view breaks down

Matching TypeScript search field names with column names

Displaying a disabled div depending on the dropdown selection in Angular Material

Include required "user" after middleware in Express with Typescript and Passport setup

Encountering an unexpected token error while trying to compile a Typescript file to Javascript, even though it had previously worked

Changing Observable to Promise in Angular 2

Guide on dynamically applying a CSS rule to an HTML element using programming techniques

Differences between React Typescript: @types/react-router-dom and react-router-dom

Passing a click event to a reusable component in Angular 2 for enhanced functionality

The message shown on items.map stating that parameter 'item' is implicitly assigned the type 'any'

Execute --runTestsByPath on two or more distinct paths

The data type 'null' is not a valid index type to be used in the Array.reduce() accumulator

What is the reason behind the checkbox event status returning the string "on" rather than true/false?

What is the best way to handle various sections with changing structures within a complex form using react-hook-form?

Tips on designing unique field validation decorators in NestJS using GraphQL

Issues with incorrect source path in Typescript, Gulp, and Sourcemaps configuration

Performing several HTTP requests in a for loop in Angular 8

Posting an array as form data in Angular Typescript: A step-by-step guide