Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Get type of generic's value by key declared on a property in Typescript interface and use it as the type of a function's parameter

I want to add a function signature on a typescript interface which one of its parameters will have a type based on the declared key’s value.

I’ve tried the approach bellow but it doesn’t work, as the value‘s type is every possible type from T. Instead, I want the value of the declared key

so if key "num" is a number, I want the "value" parameter in function to be a number

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel


type RowType = Record<string, any>

interface Row<T = RowType, K extends keyof T = keyof T> {
    key: K
    render: (value: T[K], row: T) => any
}

interface DumpRecord = {
    arr: string[], 
    num: number, 
    str: string
}

let row: Row<DumpRecord> = {
 key: 'arr',
 render: (value, row) => ... // value should be array, row should be DumpRecord
}

// or

let row: Row<DumpRecord> = {
 key: 'num',
 render: (value, row) => ... // value should be number
}


>Solution :

You need to use discriminated unions here:

type RowType = Record<string, any>

interface Row<T = RowType, K extends keyof T = keyof T> {
    key: K
    render: (value: T[K], row: T) => any
}

interface DumpRecord {
    arr: string[],
    num: number,
    str: string
}
type Values<T> = T[keyof T]

type Union = Values<{
    [Prop in keyof DumpRecord]: Row<DumpRecord, Prop>
}>

const one: Union = {
    key: 'arr',
    render: (value, row) => {
        value // string[]

    }
}

const two: Union = {
    key: 'num',
    render: (value, row) => {
        value // number
    }
}

Playground

You can find more examples in this question and my article

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading