打字稿数组映射联合

Question

I'm try to map over array that contains union of types but typescript marks my code as error, i can't figure out how i can implement this correctly, can you explain what is going on and how i can fix it ?

interface x {
    name: string;
}

interface y {
    value: string;
}

const arr: (x | y)[] = [{ name: '1' }, { value: '2' }];
arr.map(item => {
    console.log(item.name); // error here
})

Playground link

Answer 1

Since the array can contain either x or y you need to type guard for each of those scenarios. For example here you could use an in type guard:

interface x {
    name: string;
}

interface y {
    value: string;
}

const arr: (x | y)[] = [{ name: '1' }, { value: '2' }];
arr.map(item => {
    if ('name' in item) {
        console.log(item.name);
    }
});