需要帮助在 React 中声明 TypeScript 接口答案

【问题标题】：Need help declaring TypeScript interface in React需要帮助在 React 中声明 TypeScript 接口
【发布时间】：2022-01-11 15:33:27
【问题描述】：

如何在下面的代码中正确声明 tagItems？

目前在 VSCode 中看到一条警告，如下所示：

(property) tagItems: [{
    id: number;
    label: String;
    name: String;
    state: Boolean;
}]
Type '[{ id: number; label: string; name: string; state: true; }, { id: number; label: string; name: string; state: false; }, { id: number; label: string; name: string; state: false; }, { id: number; label: string; name: string; state: false; }, { ...; }, { ...; }]' is not assignable to type '[{ id: number; label: String; name: String; state: Boolean; }]'.
  Source has 6 element(s) but target allows only 1.ts(2322)

代码：

 interface IProps {
      country: string;
      flag: string;
      casinoComments: [
        {
          id: number;
          content: string;
        }
      ];
    }
    interface IState {
      slug: String;
      selectedLanguage: String;
      visible: Boolean;
      showList: Boolean;
      highlightedHobby: Boolean;
      isMobile: Boolean;
      tagItems: [
        {
          id: number;
          label: String;
          name: String;
          state: Boolean;
        }
      ];
    }
    
    export default class Featured extends React.Component<
      IProps,
      IState,
      { country: String; flag: String }
    > {
      constructor(props: IProps) {
        super(props);
    
        this.state = {
          slug: "Visa",
          selectedLanguage: "Visa",
          visible: false,
          showList: true,
          highlightedHobby: false,
          isMobile: false,
          tagItems: [
            {
              id: 0,
              label: "Popular Casinos",
              name: "Popular",
              state: true,
            },
            {
              id: 1,
              label: "PayNPlay",
              name: "paynplay",
              state: false,
            },
            {
              id: 2,
              label: "Mobile",
              name: "mobile",
              state: false,
            },
            {
              id: 3,
              label: "Swish",
              name: "swish",
              state: false,
            },
            {
              id: 4,
              label: "Live",
              name: "live",
              state: false,
            },
            {
              id: 5,
              label: "Klarna",
              name: "klarna",
              state: false,
            },
          ],
        };

【问题讨论】：

标签： reactjs typescript next.js

【解决方案1】：

这是一个有效的解决方案：

interface IState {
  slug: String;
  selectedLanguage: String;
  visible: Boolean;
  showList: Boolean;
  highlightedHobby: Boolean;
  isMobile: Boolean;
  tagItems: Array<tagItems>;
}

interface tagItems {
  id: number;
  label: String;
  name: String;
  state: Boolean;
}

    export default class Featured extends React.Component<
      IProps,
      IState,
      { country: String; flag: String }
    > {
      constructor(props: IProps) {
        super(props);
    
        this.state = {
          slug: "Visa",
          selectedLanguage: "Visa",
          visible: false,
          showList: true,
          highlightedHobby: false,
          isMobile: false,
          tagItems: [
            {
              id: 0,
              label: "Popular Casinos",
              name: "Popular",
              state: true,
            },
            {
              id: 1,
              label: "PayNPlay",
              name: "paynplay",
              state: false,
            },
            {
              id: 2,
              ........
          ],
        };

【讨论】：