Why does TypeScript opt to utilize "extends keyof" when declaring generic type parameters with constraints, instead of using "in keyof"?

Question

Why does TypeScript opt to utilize "extends keyof" when declaring generic type parameters with constraints, instead of using "in keyof"?

typescriptheaven.com, in its article discussing Generics, elaborates on 2 scenarios where the keyword "extends" is utilized when defining type parameters.

In Generic Constraints.

interface Lengthwise {
  length: number;
}
 
function processingIdentity<Type extends Lengthwise>(arg: Type): Type {
  console.log(arg.length);
  return arg;
}

When specifying a type parameter restricted by another type parameter.

function getValue<Type, Key extends keyof Type>(obj: Type, key: Key) {
  return obj[key];
}
 
let y = { p: 1, q: 2, r: 3, s: 4 };
 
getValue(y, "p");

getValue(y, "z");
// Error: Argument of type '"z"' is not assignable to parameter of type '"p" | "q" | "r" | "s"'.

The use of the "extends" keyword while constraining a generic type makes sense as it ensures that the type should possess the properties and methods of the extended type (see the first instance above). This aligns with the usage of "extends" keyword in OOP inheritance.

However, what prompts the utilization of the "extends" keyword in the second case mentioned above to restrict the generic type parameter "Key" to be a property of the type parameter "Type"? Why not opt for "in" like "in keyof Type," which seems more fitting?

We appreciate your input and feedback!

Note: I acknowledge that "in keyof" is employed when defining mapped types as depicted below.

type Optional<T> = {
    [K in keyof T]?: T[K];
};

My query revolves around why not employ the same approach when limiting a generic type parameter to be a property of another type parameter?

typescript generics keyof

Answer 1

Answer №1

It is really a matter of extends as opposed to in, assuming that when you say extends you are referring to "any subtype of" and by in you mean "a single member of". (Different interpretations of these terms can turn this into a subjective question.)

In the context of a mapped type, using P in K implies that P represents a single union member within K.

However, this distinction is not necessary for a generic constraint. With P extends K, P can encompass any subtype of K, allowing for more than just a single union member. For example:

getProperty(x, Math.random() < 0.5 ? "a" : "d");
/* function getProperty<{
    a: number;
    b: number;
    c: number;
    d: number;
}, "a" | "d"> */

In this scenario, Key is inferred as the union "a" | "d". The type "a" | "d" does not fit the definition of "in"

"a" | "b" | "c" | "d"

; it's merely a subtype. Key can be any subtype of

"a" | "b" | "c" | "d"

, such as the complete union, "a" | "d", or even never or complex combinations like "b" & {oops: true}. While usually getKey() will infer Key as an individual key, manual specification of another type is possible.

Having TypeScript introduce a concept of "this type parameter must be a single member of this union" would be valuable, with ongoing discussion in feature requests at microsoft/TypeScript#27808 and microsoft/TypeScript#33014:

interface Foo {
    a: string,
    b: number
}
function foo<<K extends "a" | "b">(k: K): Foo[K] {
    if (k === "a")
        return "abc"; // error! k is "a" but K might be "a" | "b"
    else
        return 123; // error! k is "b" but K might be "a" | "b"
}

The request suggests using extends oneof or extends_oneof. If implemented, perhaps in could be utilized instead, although syntax isn't the focal point. Presently, there exists only one form of generic constraint in TypeScript, signifying "any subtype", hence why extends is favored over in.

Playground link to code

Answer 2

It is really a matter of extends as opposed to in, assuming that when you say extends you are referring to "any subtype of" and by in you mean "a single member of". (Different interpretations of these terms can turn this into a subjective question.)

In the context of a mapped type, using P in K implies that P represents a single union member within K.

However, this distinction is not necessary for a generic constraint. With P extends K, P can encompass any subtype of K, allowing for more than just a single union member. For example:

getProperty(x, Math.random() < 0.5 ? "a" : "d");
/* function getProperty<{
    a: number;
    b: number;
    c: number;
    d: number;
}, "a" | "d"> */

In this scenario, Key is inferred as the union "a" | "d". The type "a" | "d" does not fit the definition of "in"

"a" | "b" | "c" | "d"

; it's merely a subtype. Key can be any subtype of

"a" | "b" | "c" | "d"

, such as the complete union, "a" | "d", or even never or complex combinations like "b" & {oops: true}. While usually getKey() will infer Key as an individual key, manual specification of another type is possible.

Having TypeScript introduce a concept of "this type parameter must be a single member of this union" would be valuable, with ongoing discussion in feature requests at microsoft/TypeScript#27808 and microsoft/TypeScript#33014:

interface Foo {
    a: string,
    b: number
}
function foo<<K extends "a" | "b">(k: K): Foo[K] {
    if (k === "a")
        return "abc"; // error! k is "a" but K might be "a" | "b"
    else
        return 123; // error! k is "b" but K might be "a" | "b"
}

The request suggests using extends oneof or extends_oneof. If implemented, perhaps in could be utilized instead, although syntax isn't the focal point. Presently, there exists only one form of generic constraint in TypeScript, signifying "any subtype", hence why extends is favored over in.

Playground link to code

Answer 3

Answer №2

When dealing with types, the relationship between "a" and

"a" | "b" | "c" | "d"

is important as it signifies subtype relationships.

The use of the extends keyword in programming languages denotes class inheritance, highlighting that an inheriting class is a type of the inherited class.

An interesting operator to consider in type transformations is keyof, which can be written as Key extends TypeKeys for clarity.

Answer 4

When dealing with types, the relationship between "a" and

"a" | "b" | "c" | "d"

is important as it signifies subtype relationships.

The use of the extends keyword in programming languages denotes class inheritance, highlighting that an inheriting class is a type of the inherited class.

An interesting operator to consider in type transformations is keyof, which can be written as Key extends TypeKeys for clarity.

Why does TypeScript opt to utilize "extends keyof" when declaring generic type parameters with constraints, instead of using "in keyof"?

Answer №1

Answer №2

Similar questions

Is there a specific instance where it would be more appropriate to utilize the styled API for styling as opposed to the sx prop in Material-

Ionic 2: Unveiling the Flipclock Component

What is the best way to implement record updates in a nodejs CRUD application using prisma, express, and typescript?

Step-by-step guide to minify Typescript files with Webpack

How can a border be applied to a table created with React components?

What is the best way to declare this massive entity in typescript?

Accessing the Component Property from an Attribute Directive in Angular 2

What is the method to determine the length of a string with TypeScript?

Adjust the appearance of matSelect when the selection menu is activated

Issue with dynamically typed object properties in Typescript codebases

Can you explain the variance between the (Record<string, unknown>) and object type?

The value is not being found in my form, and the slide-toggle is consistently checked

Requires the refreshing of an Angular component without altering any @Input properties

"Encountering an error with the any type in the useLocation feature while using React Router version 6

Ways to turn off Typescript alerts for return statements

Apache ECharts is throwing an error due to incompatible types of the 'trigger' property

Is it possible to utilize an npm package in TypeScript without a d.ts definition file?

Frequent occurrence when a variable is utilized prior to being assigned

Error encountered: TypeError: Unable to access attributes of null object (attempting to read 'useMemo')

Unit Testing in Vue.JS: The original function remains active even after using sinon.stub()