打字稿錯誤：X型引數不可分配給Y型引數

Typescript 新手，并試圖了解如何修復以下錯誤。如果我洗掉ItemPropsas 道具，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 file 中定義的 Overriding interface property type以及其他一些答案，并嘗試了覆寫、擴展、省略等無濟于事。我可以在這里做些什么來停止錯誤，并使代碼正常作業？

uj5u.com熱心網友回復：

我想你快到了，你只需要為匯入的 JSON 分配正確的型別（或者你可以item在你的.map回呼中分配正確的型別。

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}

標籤：反应 打字稿 反应引导

上一篇：如何將json檔案輸入為tsconfig.json和package.json

下一篇：等待所有遞回api呼叫完成并處理結果