将状态读取为字符串，而不是公然将其转换为任何 Typescript Antd？答案

【问题标题】：Read a state as a String instead of blatantly converting it to any Typescript Antd?将状态读取为字符串，而不是公然将其转换为任何 Typescript Antd？
【发布时间】：2020-09-22 23:41:48
【问题描述】：

当我尝试将 antd 提供的 Javascript Header 转换为 Typescript 时，<Menu mode={this.state.menuMode} ... 出现以下错误：

没有重载匹配这个调用。重载 1 of 2，“（道具：只读）：菜单”，给出了以下错误。类型 'String' 不可分配给类型 '"horizontal" | “内联” | “垂直” | "垂直左" | "垂直右" |未定义'。

类型 'String' 不可分配给类型 '"vertical-right"'.ts(2769) index.d.ts(25, 5)：预期类型来自属性“模式”，该属性在此处声明类型为“IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly'

当我将 IState 界面中 menuMode 的 dataType 更改为 any 时，此问题已得到修复。但是，我认为可能有更好的方法来声明它，因为 menuMode 应该是一个字符串变量，在 JSX 中进行了交叉检查。

是否有解决此问题以允许将{this.state.menuMode} 读取为字符串的方法？

import { Row, Col,  Menu, Button, Popover } from "antd";

interface IProps {}

interface IState {
    menuVisible: Boolean,
    menuMode: String;
}


class Header extends React.PureComponent<IProps, IState> {
  state: IState;

  constructor(props: IProps) {
    super(props);
    this.state = {
      menuVisible: false,
      menuMode: "horizontal",
    };
  }

  componentDidMount() {
    enquireScreen((b : Boolean) => {
        this.setState({
            menuMode: b ? "inline" : "horizontal"
        });
    });
    }

    render() {

        const menu = (
            <Menu mode={this.state.menuMode} id="nav" key="nav">
            </Menu>
        )

        return (
            <div></div>
        );
    }

}

【问题讨论】：

1.不要使用String 和Boolean 作为类型，而是使用string 和boolean。 2.从错误中可以看出menuMode的类型应该是"horizontal" | "inline" | "vertical" | "vertical-left" | "vertical-right" | undefined（不是String），很确定你也可以从你使用的库中获取它的别名

标签： reactjs typescript antd

【解决方案1】：

https://ant.design/components/menu/#Menu

bcuz 道具模式的类型是vertical | horizontal | inline。将 IState 中的 menuMode 类型从 String 替换为如下定义类型：

type MenuMode = 'vertical' | 'vertical-left' | 'vertical-right' | 'horizontal' | 'inline';

interface IState {
    menuVisible: Boolean,
    menuMode: MenuMode;
}

【讨论】：