Typescript 错误：X 类型的参数不能分配给 Y 类型的参数

Question

Typescript 的新手，并试图了解如何修复以下错误。 如果我删除ItemProps作为道具， lg和md会突出显示，并显示以下错误：

Type 'string' is not assignable to type 'ColSpec | undefined'.ts(2322)

所以然后我尝试扩展 ColProps，然后我得到

Argument of type '(item: Item) => JSX.Element' is not assignable to parameter of type '(value: { title: string; content: string; social: { title: string; link: string; }[]; lg: string; links?: undefined; md?: undefined; contentBottomMargin?: undefined; form?: undefined; } | { title: string; links: { ...; }[]; ... 5 more ...; form?: undefined; } | { ...; }, index: number, array: ({ ...; } | ... 1 more ...'.
  Types of parameters 'item' and 'value' are incompatible.
    Type '{ title: string; content: string; social: { title: string; link: string; }[]; lg: string; links?: undefined; md?: undefined; contentBottomMargin?: undefined; form?: undefined; } | { title: string; links: { ...; }[]; ... 5 more ...; form?: undefined; } | { ...; }' is not assignable to type 'Item'.
      Type '{ title: string; content: string; social: { title: string; link: string; }[]; lg: string; links?: undefined; md?: undefined; contentBottomMargin?: undefined; form?: undefined; }' is not assignable to type 'Item'.
        Property 'md' is optional in type '{ title: string; content: string; social: { title: string; link: string; }[]; lg: string; links?: undefined; md?: undefined; contentBottomMargin?: undefined; form?: undefined; }' but required in type 'Item'.`

请参见下面的代码：

Footer.tsx文件

import {
  Container,
  Row,
  Col,
  ColProps
} from "react-bootstrap";

import footerContent from "./footer.json";

interface Item extends ColProps {
  lg: string | ColProps["lg"];
  md: string | ColProps["md"];
}

const Footer = () => {
  return (
    <Container>
      <Row>
        {footerContent.map((item) => (
          <Col
            key={item.title}
            lg={item.lg && item.lg}
            md={item.md && item.md}
            className="mb-5 mb-lg-0"
          >
            <div className="fw-bold text-uppercase text-dark mb-3">
              {item.title}
            </div>
          </Col>
        ))}
      </Row>
    </Container>
  );
};

export default Footer;

然后footer.json文件

[
  {
    "title": "App",
    "lg": "4"
  },
  {
    "title": "Stuff",
    "lg": "2",
    "md": "6"
  }
]

我查看了 Typescript d.ts 文件中定义的覆盖接口属性类型以及其他一些答案，并尝试了覆盖、扩展、省略等无济于事。 我可以在这里做什么来停止错误并使代码正常工作？

Answer 1

我想你快到了，你只需要为导入的 JSON 分配正确的类型（或者你可以在.map回调中为item分配正确的类型。

import React from 'react';
import {
  Container,
  Row,
  Col,
  ColProps
} from "react-bootstrap";

// if you are importing JSON, cast it
// import _footerContent from "./footer.json"; 
// const footerContent = _footerContent as FooterContent[];

type FooterContent = {
  title: string;
  lg: ColProps['lg'];
  md?: ColProps['md'];
}
const footerContent: FooterContent[] = [
  {
    "title": "App",
    "lg": "4"
  },
  {
    "title": "Stuff",
    "lg": "2",
    "md": "6"
  }
];

const Footer = () => {
  return (
    <Container>
      <Row>
        {footerContent.map((item) => (
          <Col
            key={item.title}
            lg={item.lg && item.lg}
            md={item.md && item.md}
            className="mb-5 mb-lg-0"
          >
            <div className="fw-bold text-uppercase text-dark mb-3">
              {item.title}
            </div>
          </Col>
        ))}
      </Row>
    </Container>
  );
};

export default Footer;

TS游乐场： https://tsplay.dev/wOzlzW

我也觉得，

            lg={item.lg && item.lg}
            md={item.md && item.md}

只是冗长而没有目的，与

            lg={item.lg}
            md={item.md}