What made the "in" operator not the best choice in this situation?

Question

What made the "in" operator not the best choice in this situation?

When I set out to create a type that represents the values of a given object type, I initially came up with this:

type Book = {
  name:string,
  year:number,
  author:string
}

// expected result "string" | "number"
type ValueOf<T extends {}> = T[k in keyof T] // error due to "in"

let x:ValueOf<Book> ;

However, it turns out that using in here is unnecessary. I could have simply used T[keyof T].

I've noticed the use of the in operator in similar scenarios like this one:

type OptionsFlags<Type> = {
  [Property in keyof Type]: boolean;
};

Why wasn't it necessary in my situation? What key concept did I overlook regarding the usage of in? When should I consider using in as a rule of thumb?

typescript

Answer 1

Answer №1

in is used in your example for Mapped types.

What you need is :

type ValueOf<T extends {}> = T[keyof T] 

type foo =  ValueOf<Book> ; // string | number

Test it out

A Mapped type is a kind of generic type that uses a union of PropertyKeys (often created using keyof) to loop through keys and create a type. It typically looks like :

{ [Property in keyof Type]: whatEverType; }

Answer 2

in is used in your example for Mapped types.

What you need is :

type ValueOf<T extends {}> = T[keyof T] 

type foo =  ValueOf<Book> ; // string | number

Test it out

A Mapped type is a kind of generic type that uses a union of PropertyKeys (often created using keyof) to loop through keys and create a type. It typically looks like :

{ [Property in keyof Type]: whatEverType; }

Answer 3

Answer №2

Understanding Mapped types in Typescript

Utilizing the in keyword when working with mapped types is crucial, as demonstrated in the following example:

type OptionsFlags<Type> = {
  [Property in keyof Type]: boolean;
};

Mapped types allow you to construct a new object type by iterating through existing properties:

keyof Book = 'name' | 'year' | 'author'
OptionsFlags<Book> = {
  name: boolean;
  year: boolean;
  author: boolean;
}

Exploring Indexed Access Types in Typescript

An important aspect of indexed access types like your ValueOf type is eliminating the use of k in:

type ValueOf<T extends {}> = T[keyof T];

Indexed access types enable you to retrieve the type associated with a specific key within an object:

type BookName = Book['name'] // string

Additonally, the key can be a union type, exemplified by keyof T.

Consider it as "What types do I obtain when cycling through all these key values?" (a form of projection). For instance, using your Book type would result in this sequence:

ValueOf<Book>
=> Book[keyof Book]
=> Book['name' | 'year' | 'author']
=> Book['name'] | Book['year'] | Book['author']
=> string | number | string
=> string | number

Answer 4

Understanding Mapped types in Typescript

Utilizing the in keyword when working with mapped types is crucial, as demonstrated in the following example:

type OptionsFlags<Type> = {
  [Property in keyof Type]: boolean;
};

Mapped types allow you to construct a new object type by iterating through existing properties:

keyof Book = 'name' | 'year' | 'author'
OptionsFlags<Book> = {
  name: boolean;
  year: boolean;
  author: boolean;
}

Exploring Indexed Access Types in Typescript

An important aspect of indexed access types like your ValueOf type is eliminating the use of k in:

type ValueOf<T extends {}> = T[keyof T];

Indexed access types enable you to retrieve the type associated with a specific key within an object:

type BookName = Book['name'] // string

Additonally, the key can be a union type, exemplified by keyof T.

Consider it as "What types do I obtain when cycling through all these key values?" (a form of projection). For instance, using your Book type would result in this sequence:

ValueOf<Book>
=> Book[keyof Book]
=> Book['name' | 'year' | 'author']
=> Book['name'] | Book['year'] | Book['author']
=> string | number | string
=> string | number

What made the "in" operator not the best choice in this situation?

Answer №1

Answer №2

Understanding Mapped types in Typescript

Exploring Indexed Access Types in Typescript

Similar questions

What are the best practices for preventing risky assignments between Ref<string> and Ref<string | undefined>?

An issue has occurred with attempting to access the 'phone' property of a null value. This error is at the root of the problem and needs to

Tips for managing various potential return types in TypeScript?

Redirect user to the "Confirm Logout" page in Keycloak after refreshing the page before logging out

In Angular/Typescript, dynamically add a class to a `td` element when it is clicked. Toggle the class on and off

The Aurelia application encounters a "Maximum call stack size exceeded" error while trying to bind FullCalendar

What is the best way to iterate through all class properties that are specified using class-validator?

Error TS2604: Upon importing the 'material-ui' button from one package into another

A guide on capturing the response in the POST method within Angular 7

What is the best way to link labels with input fields located separately in Angular?

Error TS2322: Cannot assign type 'Promise<Hero | undefined>' to type 'Promise<Hero>'

Can you clarify the significance of the "1" in this particular Typescript code snippet?

Is there a way to specify a type for a CSS color in TypeScript?

Tips for avoiding a React component from causing the page to freeze post-loading

Isolated Modules in Angular Version 17 and Beyond

Checkboxes within Angular's reactive forms are a powerful tool for creating dynamic user

The VSCode's intellisense for Angular Material fails to function effectively

Angular 13: Masking User Input with Reactive Form Controls

Creating an interceptor to customize default repository methods in loopback4

Trouble with Jest when trying to use route alias in Next.js with Typescript