type A2 = {
label: 'name';
render: (v: string) => any;
} | {
label: 'age';
render: (v: number) => any;
} | {
label: ['name'];
render: (v: string) => any;
} | {
label: ['age'];
render: (v: number) => any;
}
const a1: A2 = {
label: 'age',
render: (v) => v,
}
const a2: A2 = {
label: ['name'],
render: (v) => v,
}
In a1, render's 'v' is infered as 'number' correctly.But in a2, it's 'any'.I want to know what's the diffrence and why. Is it a bug for Typescript?
Just posting this as an answer as suggested by Samuli Hakoniemi in the comments to make it easier for future viewers.
You need to use a union inside the array definition:
type A2 = {
label: 'name' | 'age';
render: (v: string | number) => unknown;
} | {
label: ['name' | 'age'];
render: (v: string | number) => unknown;
}
const a1: A2 = {
label: 'age',
render: (v) => v,
}
const a2: A2 = {
label: ['name'],
render: (v) => v,
}