Почему не работает данный код typescript?

Рейтинг: 0Ответов: 1Опубликовано: 21.07.2023

Я хочу перебрать изображения и получить их ключ. Но не могу понять, почему данный код не работает:

const tokenCheckboxes: ReactNode[] = images.map((image: ReactNode) => {
const name: string = image!["key" as keyof Object];
console.log(name);

return image;})

В то время как данный код работает:

const tokenCheckboxes: ReactNode[] = images.map((image: ReactNode) => {
const name: string = image!["key" as keyof Object] as unknown as string;
console.log(name);
return image;})

Ошибка при первом коде:

TS2322: Type 'Function | (() => string) | (() => string) | (() => Object) | ((v: PropertyKey) => boolean) | ((v: Object) => boolean) | ((v: PropertyKey) => boolean) | ... 5 more ... | (() => boolean)' is not assignable to type 'string'.   Type 'Function' is not assignable to type 'string'.**

javascript reactjs typescript frontend
Источник: Stack Overflow на русском

Ответы

▲ 2

Выражением "key" as keyof Object вы сказали, что "key" - это какое-то из свойств Object. Поскольку компилятор не знает, какое именно ( поскольку keyof Object - не литерал, а совокупность литералов ), то он будет проверять типы среди всех свойств Object: constructor, hasOwnProperty, toString и т.д. Среди них нет ни одной, которая имела бы тип строки, на что и ругается тайпскрипт. Короче, это выражение - полный бред. Второе работало только потому, что вы скастовали тип, однако это будет только компилироваться, а не стабильно работать.

Теперь попробуем написать рабочее решение:

Для начала отмечу, что ReactNode - это объединение разных типов, и не все из них содержат "key".

Соответственно, для начала было бы неплохо проверить, что image содержит свойство "key" ( и сделать ещё проверку на то, что image - это объект, иначе компилятор взбеситься ):

if(node && typeof node === "object" && "key" in node) {
    const key = node.key;
    // key: string | number | null
}

Теперь компилятор знает, что image.key существует, однако image.key может ещё оказаться и null, это тоже надо проверить.

В итоге получаеться такой вот код:

const tokenCheckboxes: ReactNode[] = images.map((image: ReactNode) => {
    if(image && typeof image === "object" && "key" in image) {
        const key = image.key;

        if(key !== null) {
            console.log(key);
        }
    }
    
    return image;
})

Всё становиться проще, если images - это массив изначально ReactElement. В таком случае никаких проверок на существование ключа "key" делать не надо ( и лучше попробуйте этот вариант сначала, если не уверены, какой именно тип у images ):

const tokenCheckboxes = images.map((image) => {
    if(image.key !== null) {
        const key: number | string = image.key;

        console.log(key);
    }
    
    return image;
})