I have a following code:
interface Data { [x: string]: number;}type Unpacked<T> = T extends (infer U)[] ? U : T extends (...args: any[]) => infer U ? U : T extends Promise<infer U> ? U : T;interface Props<T extends Data[]> { data: T xLabel: Extract<keyof Unpacked<T>, string>; yLabel: Extract<keyof Unpacked<T>, string>;}const Chart = <T extends Data[]>({ data, xLabel, yLabel }: Props<T>): ReactElement => { const styles = useStyles(); return (<View style={styles.container}><VictoryChart width={350} theme={VictoryTheme.material}><VictoryArea data={data} x={xLabel} y={yLabel} /><VictoryAxis /></VictoryChart></View> );};const data = [ { quarter: 1, earnings: 13000 }, { quarter: 2, earnings: 16500 }, { quarter: 3, earnings: 14250 }, { quarter: 4, earnings: 19000 },];const Home = (): ReactElement => { const styles = useStyles(); return (<ScrollView showsVerticalScrollIndicator><Block><Chart data={data} xLabel="abc" yLabel="earnings" /></Block></ScrollView> );};Based on my understandings, xLabel="abc" should result in error because it is not the key of the data ("quarter" or "earnings" only in this case). However, unfortunately, xLabel and yLabel is type of "string", which's not what I expected. Did I do anything wrong?