Почему Typescript ругается на пропсы?

Question

[TheSnegok]

Код файла из которого прокидываются пропсы:

import React, { ReactNode } from 'react'
import s from './Fishes.module.css'
import clownfish from '../../image/clownfish.svg';
import fish from '../../image/fish.svg';
import fish1 from '../../image/fish1.svg';
import fish2 from '../../image/fish2.svg';
import fish3 from '../../image/fish3.svg';
import fish4 from '../../image/fish4.svg';
import Fish from './Fish/Fish';

const Fishes: React.FC = () => {
    let array: { name: ReactNode, random: number }[] = [
        {
            name: clownfish,
            random: Math.random() * (80 - 20) + 20
        },
        {
            name: fish,
            random: Math.random() * (80 - 20) + 20
        },
        {
            name: fish1,
            random: Math.random() * (80 - 20) + 20
        },
        {
            name: fish2,
            random: Math.random() * (80 - 20) + 20
        },
        {
            name: fish3,
            random: Math.random() * (80 - 20) + 20
        },
        {
            name: fish4,
            random: Math.random() * (80 - 20) + 20
        },
    ];

    console.log(array);

    return (
        <div className={s.area}>
            {array.map(el => <Fish imgName={el.name} random={el.random} />)}
        </div>
    )
}

export default Fishes;

Код в который приходят пропсы:

import React from 'react'
import s from './Fish.module.css'

const Fish: React.FC = (props: any) => {
    return (
        <div className={s.area}>
            <img src={props.imgName} className={s.imgName} alt={props.imgName} />
        </div>
    )
}

export default Fish;

Сообщение ошибки:
Type '{ imgName: ReactNode; random: number; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
Property 'imgName' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.
Что должен делать код:
В массив объектов кидаю name: svg картинки, random: цифра от 20 до 80, после этого перебираю массив и пытаюсь прокинуть каждый элемент, в следующей компоненте пропсы попадают в src и alt тега img.

Comments

[WbICHA]

☑ Поставить тайпскрипт.
☑ Игнорировать типизацию.
☑ Не понимать, почем тайпскрипт ругается на типы.

Стартер-пак новичка тайпскриптера прям.)

[TheSnegok]

WbICHA, ☑ Зайти на вопрос.
☑ Написать бесполезный ответ.
☑ Ничем не помочь.

Типикал человек всезнайка, но ничем никогда не помогает)

[WbICHA]

TheSnegok,

☑ Написать бесполезный ответ.

Не то, чтобы я врач, но вам я бы порекомендовал обратиться к окулисту. Это секция комментариев к вопросу.

Типикал человек всезнайка, но ничем никогда не помогает)

Вообще никому и никогда (смотрю на свои 240 ответов).

Answer 1

[Alexandroppolus]

Надо нормально протипизировать Fish, тогда всё будет по красоте.

interface FishProps {
  imgName: string;
  random: number;
}

const Fish: React.FC<FishProps> = (props) => {
...

Внутри Fishes передавать в Fish ещё проп key={el.name}

И вообще, я удивлен, что на этом сайте есть подсветка синтаксиса для никому нахрен не нужного CoffeScript, но нет TS. Это охренительно.

Comments

[TheSnegok]

Точно, спасибо, key забыл, добавил как вы написали, всё работает, а почему svg как строка, любая картинка получается при импорте будет как строка?
P.S. я посмотрел, получается это строка потому что в ней лежит путь к изображению?)

[Alexandroppolus]

TheSnegok, картинка при импорте обычно строка, потому что так обычно настроен вебпак по умолчанию в create-react-app. Это удобно - можно сразу в src или в стиль background-image. Для svg можно использовать плагин svgr, тогда свг-шки будут загружаться как реактовские компоненты, чтобы их втыкать прямо в верстку.

[TheSnegok]

Alexandroppolus,Спасибо)

[WbICHA]

И вообще, я удивлен, что на этом сайте есть подсветка синтаксиса для никому нахрен не нужного CoffeScript, но нет TS. Это охренительно.

Я как-то в обратную связь писал... В общем, хорошо, что хотя бы какая-то подсветка есть. На сайт всем плевать.