What is the best way to retrieve a property from a conditional type using generics?

Question

What is the best way to retrieve a property from a conditional type using generics?

The code snippet above presents an issue in TypeScript:

const exampleFn = function<AttributeName extends 'attributeA' | 'attributeB'>(
    whatToProcess: AttributeName extends 'attributeA' ? {attributeA: string} : {attributeB: string},
    attributeName: AttributeName
) {
    //Error here: Type 'AttributeName' cannot be used to index type 
    //'AttributeName extends "attributeA" ? { attributeA: string; } : { attributeB: string; }'.ts(2536)
    console.log(whatToProcess[attributeName]);
}

To interact with the TypeScript playground for this specific example, click here.

If the value of attributeName is 'attributeA', whatToProcess should contain attributeA. Similarly, if the value of attributeName is 'attributeB', whatToProcess should have attributeB. In each scenario, attributeName must be capable of indexing the type of whatToProcess.

Please assist me in comprehending how to correctly utilize generic and conditional typing within TypeScript, as it appears that I am missing a fundamental understanding of its functionality.

typescript attributes conditional-types object-properties generic-type-parameters

Answer 1

Answer №1

In TypeScript, the issue arises when trying to link `AttributeName` as a key of either `{attributeA: string}` or `{attributeB: string}`, resulting in the `whatToProcess` argument being an object that cannot be accessed by arbitrary strings. Because TypeScript won't know the object at runtime, coding for all possibilities becomes necessary.

A more effective solution may lie in restricting developer access to the object using specific keys. By defining a unary type - `CustomType` - encompassing both `{attributeA: string}` and `{attributeB: string}`, ensuring the second parameter is a key of this type (`keyof CustomType`) resolves the problem:

type CustomType = {attributeA: string} | {attributeB: string};

const exampleFn = function(whatToProcess: CustomType, attributeName: keyof CustomType) {
    console.log(whatToProcess[attributeName]);
}

You can experiment with this concept on the TypeScript Playground.

This approach should provide a clearer path forward!

Answer 2

In TypeScript, the issue arises when trying to link `AttributeName` as a key of either `{attributeA: string}` or `{attributeB: string}`, resulting in the `whatToProcess` argument being an object that cannot be accessed by arbitrary strings. Because TypeScript won't know the object at runtime, coding for all possibilities becomes necessary.

A more effective solution may lie in restricting developer access to the object using specific keys. By defining a unary type - `CustomType` - encompassing both `{attributeA: string}` and `{attributeB: string}`, ensuring the second parameter is a key of this type (`keyof CustomType`) resolves the problem:

type CustomType = {attributeA: string} | {attributeB: string};

const exampleFn = function(whatToProcess: CustomType, attributeName: keyof CustomType) {
    console.log(whatToProcess[attributeName]);
}

You can experiment with this concept on the TypeScript Playground.

This approach should provide a clearer path forward!

Answer 3

Answer №2

If you want TypeScript to use inferencing, consider using a generic in your code,

const exampleFunction = function<T extends Record<any, any>>
    (inputData: T, propertyName: keyof T) 
{
    console.log(inputData[propertyName]);
}

You have the option to accept any object or restrict it to a specific subset as shown below

type CustomObjectType = {propertyA: string} | {propertyB: string};

const exampleFunction = function<T extends CustomObjectType>
    (inputData: T, propertyName: keyof T) 
{
    console.log(inputData[propertyName]);
}

You can also make use of this approach to define a custom return type

const exampleStrictFunction = function<T extends CustomObjectType>
    (inputData: T, propertyName: keyof T): T extends {propertyA: string} ? never : string
{
    console.log(inputData[propertyName]);
    return null! //temporary implementation
}

See this in action on TS Playground

Answer 4

If you want TypeScript to use inferencing, consider using a generic in your code,

const exampleFunction = function<T extends Record<any, any>>
    (inputData: T, propertyName: keyof T) 
{
    console.log(inputData[propertyName]);
}

You have the option to accept any object or restrict it to a specific subset as shown below

type CustomObjectType = {propertyA: string} | {propertyB: string};

const exampleFunction = function<T extends CustomObjectType>
    (inputData: T, propertyName: keyof T) 
{
    console.log(inputData[propertyName]);
}

You can also make use of this approach to define a custom return type

const exampleStrictFunction = function<T extends CustomObjectType>
    (inputData: T, propertyName: keyof T): T extends {propertyA: string} ? never : string
{
    console.log(inputData[propertyName]);
    return null! //temporary implementation
}

See this in action on TS Playground

What is the best way to retrieve a property from a conditional type using generics?

Answer №1

Answer №2

Similar questions

Is it possible for Typescript and Next.js to import a different project's source code only from the module's root directory?

Having trouble verifying the selection option in Angular 6

How do you properly include a new property in an Object using Typescript?

Does this fall under the category of accepted practices for employing an effect in Angular?

Listening for keypress events on a div element using React

Increasing the token size in the Metaplex Auction House CLI for selling items

The upcoming construction of 'pages/404' page will not permit the use of getInitialProps or getServerSideProps, however, these methods are not already implemented in my code

Transfer all specified resources from one stack to another in AWS CDK

Combining several string attributes from an object in Python

What could be causing the vue-property-decorator @Emit to malfunction in my Vue TypeScript file?

Issue with Build System CTA's/Callback function functionality not operational

Testing in Vue revealed an unexpected absence of data

Bring in d3 along with d3-force-attract

TypeScript: defining a custom type with a collection of properties following a consistent pattern

Can you use getters and setters in a TypeScript declaration file?

The issue persists in VSCode where the closing brackets are not being automatically added despite

Is there a way to utilize "npm install ts-node-dev -D" in Termux?

Transforming Excel data into JSON format using ReactJS

Disabling eslint does not prevent errors from occurring for the unicorn/filename-case rule

Enhance your Angular application with lazy loading and nested children components using named outlets

What is the best way to retrieve a property from a conditional type using generics?

Answer №1

Answer №2

Similar questions

Is it possible for Typescript and Next.js to import a different project's *source code* only from the module's root directory?

Having trouble verifying the selection option in Angular 6

How do you properly include a new property in an Object using Typescript?

Does this fall under the category of accepted practices for employing an effect in Angular?

Listening for keypress events on a div element using React

Increasing the token size in the Metaplex Auction House CLI for selling items

The upcoming construction of 'pages/404' page will not permit the use of getInitialProps or getServerSideProps, however, these methods are not already implemented in my code

Transfer all specified resources from one stack to another in AWS CDK

Combining several string attributes from an object in Python

What could be causing the vue-property-decorator @Emit to malfunction in my Vue TypeScript file?

Issue with Build System CTA's/Callback function functionality not operational

Testing in Vue revealed an unexpected absence of data

Bring in d3 along with d3-force-attract

TypeScript: defining a custom type with a collection of properties following a consistent pattern

Can you use getters and setters in a TypeScript declaration file?

The issue persists in VSCode where the closing brackets are not being automatically added despite

Is there a way to utilize "npm install ts-node-dev -D" in Termux?

Transforming Excel data into JSON format using ReactJS

Disabling eslint does not prevent errors from occurring for the unicorn/filename-case rule

Enhance your Angular application with lazy loading and nested children components using named outlets

Is it possible for Typescript and Next.js to import a different project's source code only from the module's root directory?