Selecting string properties in TypeScript

Question

Selecting string properties in TypeScript

Trying to solve the puzzle of accurately coding a show function that requires an object T and a key K where T[K] definitely has a method named toString().

Here's my approach using mapped types

type ToStringablePropertyKeys<T> = keyof {
    [K in keyof T]: { toString(): string }
}

function show<T, K extends ToStringablePropertyKeys<T>>(t: T, k: K): string {
    return t[k].toString()
}

However, the compiler is giving me an error -

Property 'toString' does not exist on type 'T[K]'.

What could I be overlooking here? How can I assure tsc that toString certainly exists due to definition of K?

typescript tsc

Answer 1

Answer №1

Consider another method:

function display<A extends string, B extends {[item in A]:{toString(): string}}>
(entry: B, key: A ): string {
return entry[key].toString()
}

Answer 2

Consider another method:

function display<A extends string, B extends {[item in A]:{toString(): string}}>
(entry: B, key: A ): string {
return entry[key].toString()
}

Answer 3

Answer №2

Behold, a solution that comes close to perfection. While TypeScript can mandate that the keys are limited to those expanding on {toString():string}, it lacks the intelligence to automatically deduce that all instances of T[k] will possess toString():string...

type ToStringable = { toString(): string };

type ToStringablePropertyKeys<T> = {
    [k in keyof T]: T[k] extends ToStringable ? k : never
}[keyof T];

function display<T, K extends ToStringablePropertyKeys<T>>(t: T, k: K): string {
    return (t[k] as any).toString(); // TypeScript seems unable to infer that all t[k] will have toString method
}

const sampleObject = {
    string: 'example',
    number: 456,
    null: null,
    undefined: undefined,
};

display(sampleObject, 'number');
display(sampleObject, 'string');
display(sampleObject, 'invalid-property'); // this will fail
display(sampleObject, 'null'); // this will fail
display(sampleObject, 'undefined'); // this will fail

Link for interactive demo

Answer 4

Behold, a solution that comes close to perfection. While TypeScript can mandate that the keys are limited to those expanding on {toString():string}, it lacks the intelligence to automatically deduce that all instances of T[k] will possess toString():string...

type ToStringable = { toString(): string };

type ToStringablePropertyKeys<T> = {
    [k in keyof T]: T[k] extends ToStringable ? k : never
}[keyof T];

function display<T, K extends ToStringablePropertyKeys<T>>(t: T, k: K): string {
    return (t[k] as any).toString(); // TypeScript seems unable to infer that all t[k] will have toString method
}

const sampleObject = {
    string: 'example',
    number: 456,
    null: null,
    undefined: undefined,
};

display(sampleObject, 'number');
display(sampleObject, 'string');
display(sampleObject, 'invalid-property'); // this will fail
display(sampleObject, 'null'); // this will fail
display(sampleObject, 'undefined'); // this will fail

Link for interactive demo

Selecting string properties in TypeScript

Answer №1

Answer №2

Similar questions

The non-nullable field Mutation.create in typegraphql with bcrypt must not be null, cannot be returned as null

Discover the method for extracting a value from an interface and incorporating it into a separate function

How to Modify a Module that was Imported in Typescript

Ensure the JSON file aligns with the TypeScript Interface

Create a consolidated HTML file by integrating all components of a Typescript website

What is the best way to restrict the number of iterations in ngFor within Angular HTML

Using Puppeteer to send messages on Discord without the use of a bot or application

Monitor the behavior of a function that is provided as an argument to a simulated node package

I am struggling to understand how to work with constrained generic functions

Converting typescript path aliases into local file paths

Uploading an image in Typescript on IE11 using Angular 4

Angular navigation paths directing to incorrect components

Set up your Typescript project to transpile code from ES6 to ES5 by utilizing Bable

Troubleshooting Node TypeScript with Visual Studio Code using webpack bundling

"Obtaining data from a JSON response: A step-by-step

What is the best way to specify a type for an object without altering its underlying implicit type?

Tips on Showing a Unique List in Mat-Table?

What is the best way to combine two functions for the "value" attribute in a TextField?

Creating a Fixed HeaderToolbar in FullCalendar React

How to utilize ngModel for binding to radio buttons in Angular 2