如何为 props 中传递的对象定义 TypeScript 接口？

Question

我能否就IconArr.primary属性的接口定义获得一些帮助。

我正在尝试将它传递给PrimarySkills组件 --> 我必须在其中定义接口但到目前为止没有任何运气。

我不想同时传递带有主图标和辅助图标的整个对象，因此我可以有两个单独的组件，但稍后可以使用不同的输入数据。

const iconsArr = {
    primary: [
        {
            id: '0',
            imgPath: 'images/techIcons/reactjs.svg',
            name: 'React',
        },
        {
            id: '1',
            imgPath: 'images/techIcons/nextjs.svg',
            name: 'NextJS',
        },
    ],
    secondary: [
        {
            id: '0',
            imgPath: 'images/techIcons/csharp.svg',
            name: 'C#',
        },
        {
            id: '1',
            imgPath: 'images/techIcons/java.svg',
            name: 'Java',
        },
    ],
};

const Skills = (props: Props) => {
    return (
        <div>
            <StyledCaption contentString='SKILLS'>PRIMARY</StyledCaption>
            <PrimarySkills iconsArr={iconsArr.primary} />
        </div>
    );
};

在PrimarySkills组件中

interface Props {
    iconsArr: {
        primary: {
            id: string;
            imgPath: string;
            name: string;
        }[];
    };
}

const PrimarySkills = (props: Props) => {
    return (
        <div>
            {props.iconsArr.primary.map((icon) => (
                <img src={icon.imgPath} alt={icon.name} key={icon.id} height='30' />
            ))}
        </div>
    );
};

Answer 1

您可以为数组中包含的每个项目创建一个接口（比如Icon ），然后使用它正确地将iconsArr键入为该类型的数组（ Icon[] ）。

interface Icon {
    id: string;
    imgPath: string;
    name: string;
}

interface Props {
    iconsArr: Icon[]
}

const PrimarySkills = (props: Props) => {
    return (
        <div>
            {props.iconsArr.map((icon) => (
                <img src={icon.imgPath} alt={icon.name} key={icon.id} height='30' />
            ))}
        </div>
    );
};

请注意，因为您将iconsArr.primary传递给iconsArr ， iconsArr将是一个数组（它不会具有primary属性）。 您应该使用props.iconsArr.map(...)来映射它。