在 Typescript 中的接口中推断类型

Question

I have this implementation of renderTable function

interface Column<T> {
  key: keyof T,
  cellRenderer: (params: {rowData: T, cellData: any}) => void 
}

function renderTable<T>(data: T[], columns: Column<T>[]) {
    data.forEach((rowData) => {
        columns.forEach((column) => {
            const cellData = rowData[column.key]
            column.cellRenderer({rowData, cellData})
        })
    })
}

interface DataType {
  name: string,
  age: number;
}

const data: DataType[] = [
    {name: 'Anry', age: 20},
    {name: 'Brain', age: 30},
]

const columns: Column<DataType>[] = [
    {
        key: 'name',
        cellRenderer: ({cellData}) => {
            console.log('name is', cellData)
        }
    },

    {
        key: 'age',
        cellRenderer: ({cellData}) => {
            console.log('age is', cellData)
        }
    }
]

renderTable<DataType>(data, columns)

I want the compiler to understand that in first column cellData is string and in second column cellData is number

Is there a way to change Column interface to do it?

Answer 1

This might help. changed from any to cellData: T[keyof T]} and Column changed from an interface to type.

type Column<T> = { [K in keyof T]: { 
    key: K;
    cellRenderer: (params: {rowData: T, cellData: T[K]}) => void 
   
    } 
  }[keyof T]
function renderTable<T>(data: T[], columns: Column<T>[]) {
    data.forEach((rowData) => {
        columns.forEach((column) => {
            const cellData = rowData[column.key]
            column.cellRenderer({rowData, cellData})
        })
    })
}

interface DataType {
  name: string,
  age: number;
}

const data: DataType[] = [
    {name: 'Anry', age: 20},
    {name: 'Brain', age: 30},
]

const columns: Column<DataType>[] = [
    {
        key: 'name',
        cellRenderer: ({cellData}) => {
            console.log('name is', cellData)
        }
    },

    {
        key: 'age',
        cellRenderer: ({cellData}) => {
            console.log('age is', cellData)
        }
    }
]

renderTable<DataType>(data, columns)