Is it possible to create a return type structure in TypeScript that is determined by the function's argument?

Question

Is it possible to create a return type structure in TypeScript that is determined by the function's argument?

I'm currently stuck on developing a function that takes a string as an argument and outputs an object with this string as a key.

For example (using pseudo code): test('bar') => {bar: ...}

I am facing difficulties in ensuring the correct return type for this function.

While the following code provides me with the desired return type, the TypeScript compiler is still unable to recognize that my returned object matches the specified return Type:

function test<K extends string>(key: K):{[prop in K]: number} {
  return { [key]: 6 } // error: not assignable
}
const foo = test<'bar'>('bar')
// foo type: {bar: number} // return type is good

The above approach works well, but unfortunately does not give me the strongly typed return type I am aiming for. Instead, something like this would work fine:

function test2<K extends string>(key: K){
  return { [key]: 6 }
}
const foo2 = test2<'bar'>('bar')
// foo2 type: {[x: string]: number}  // no good

Any assistance on this matter would be greatly appreciated!

javascript typescript typescript-generics

Answer 1

Answer №1

After making some adjustments to the initial solution, it appears to be functioning correctly:

function generateKey<T extends string>(key: T) {
  return { [key]: 6 } as {[property in T]: number}
}

const result = generateKey('example') // { example: number }

The need to use type casting still strikes me as odd.

Answer 2

After making some adjustments to the initial solution, it appears to be functioning correctly:

function generateKey<T extends string>(key: T) {
  return { [key]: 6 } as {[property in T]: number}
}

const result = generateKey('example') // { example: number }

The need to use type casting still strikes me as odd.

Answer 3

Answer №2

There are endless possibilities with extended typings.

As demonstrated by @SnailCrusher, you can statically define the return type. Furthermore, there is a method to dynamically allocate typings to the returned properties:

// The interface below specifies potential parameters for the methods

interface Tokens {
    foo: number,
    bar: string,
}

// Return one property in the resulting object
// These methods only accept keys from the Tokens interface as valid inputs

function test<K extends keyof Tokens>(key: K) {
    switch(key) {
        case 'foo': return { [key]: 0 } as {[prop in K]: Tokens[K]}
        case 'bar': return { [key]: '0' } as {[prop in K]: Tokens[K]};
    }
    return { [key]: undefined } as {[prop in K]: Tokens[K]}
}

const bar = test('bar') // { bar: string }
const foo = test('foo') // { foo: number }

// Return the entire interface in the result object
// The specified token will be included and all other properties will be optional

function test2<K extends keyof Tokens>(key: K) {
    return { [key]: 6 } as {[prop in K]: Tokens[K]} & {[P in keyof Tokens]?: Tokens[P];}
}

const bar2 = test2('bar') // { foo?: number; bar: string; }
const foo2 = test2('foo') // { foo: number; bar?: string; }

This will also provide comprehensive context in your IDE regarding valid parameters.

You can explore more of this in the Typescript documentation: https://www.typescriptlang.org/docs/handbook/advanced-types.html#index-types-and-index-signatures

Answer 4

There are endless possibilities with extended typings.

As demonstrated by @SnailCrusher, you can statically define the return type. Furthermore, there is a method to dynamically allocate typings to the returned properties:

// The interface below specifies potential parameters for the methods

interface Tokens {
    foo: number,
    bar: string,
}

// Return one property in the resulting object
// These methods only accept keys from the Tokens interface as valid inputs

function test<K extends keyof Tokens>(key: K) {
    switch(key) {
        case 'foo': return { [key]: 0 } as {[prop in K]: Tokens[K]}
        case 'bar': return { [key]: '0' } as {[prop in K]: Tokens[K]};
    }
    return { [key]: undefined } as {[prop in K]: Tokens[K]}
}

const bar = test('bar') // { bar: string }
const foo = test('foo') // { foo: number }

// Return the entire interface in the result object
// The specified token will be included and all other properties will be optional

function test2<K extends keyof Tokens>(key: K) {
    return { [key]: 6 } as {[prop in K]: Tokens[K]} & {[P in keyof Tokens]?: Tokens[P];}
}

const bar2 = test2('bar') // { foo?: number; bar: string; }
const foo2 = test2('foo') // { foo: number; bar?: string; }

This will also provide comprehensive context in your IDE regarding valid parameters.

You can explore more of this in the Typescript documentation: https://www.typescriptlang.org/docs/handbook/advanced-types.html#index-types-and-index-signatures

Answer 5

Answer №3

I am puzzled as to why generics are necessary in this situation. Isn't it simpler to just use the following code snippet?

function test(key: string): { [key: string]: number } {
  return { [key]: 6 };
}

Answer 6

I am puzzled as to why generics are necessary in this situation. Isn't it simpler to just use the following code snippet?

function test(key: string): { [key: string]: number } {
  return { [key]: 6 };
}

Is it possible to create a return type structure in TypeScript that is determined by the function's argument?

Answer №1

Answer №2

Answer №3

Similar questions

Even with the text field populated and clearly existing, Firefox is still throwing a null error when trying to retrieve it using

Saving any type of file in SQL Server with a field type of varbinary(max) can be achieved by utilizing Angular with ASP.NET Core to create a REST API

Typescript controller inheritance leading to Error: $injector:unpr Unknown Provider due to minification

Initiate the python script on the client's end

extracting key-value pairs from nested arrays in javascript objects

Sending a Form Generated in Real Time with a Button Located Outside the Form

`Unable to upload spreadsheet file in xlsx format`

Unexpected date outcomes in JavaScript when using a similar date format

jquery disable document manipulation function

Troubleshooting data binding issues in Angular.js using Jade and Express

I have encountered an issue where after declaring a JavaScript variable on a specific page, including the JavaScript file does not grant access to it

Finding the Number of Days Between Two Dates in AngularJS Using JavaScript

Issue with Angular 7 service worker caching audio files leads to range header problems in Safari browser

The state update is triggering a soft refresh of the page within Next.js

Hmm, JavaScript is throwing a JSON parse error related to single quotes. But where exactly is

Vue.js - when it comes to rounding off digits, I keep getting unexpected results

Is it more beneficial to convert all the current jQuery AJAX webparts into Typescript or should I opt to inject the existing jQuery into SPFX instead?

Implement auto partial page refreshing in ASP.NET without using the UpdatePanel feature

Encountering the "React Hook useEffect missing dependency" warning for a state variable that does not actually need to be included in the dependency array

"The function you are attempting to call is not defined within the HTMLButtonElement.onclick