TypeScript无法检查React

xxhby3vn 于 2023-04-07 发布在 TypeScript

关注(0)|答案(2)|浏览(91)

例如，我得到了以下组件：

const Component = ({
  messages,
}: {
  messages: ({ text: string; } | undefined)[];
}) => {
  return (
    <>
      {messages.map((message) => (
        <div key={message.text}>
          {message.text}
        </div>
      ))}
    </>
  );
};

当我这样使用它时，它不会抛出错误：

// First example
<Component messages={[ someBoolean ? "text 1" : undefined, "text 2", ]} />

但是，当我这样使用它时，它会抛出错误：

// Second example
const messages = [ someBoolean ?  "text 1" : undefined, "text 2" ]
<Component messages={messages} />

// Third example
<Component messages={[ someBoolean ?  "text 1" : undefined, "text 2" ] as const} />

为什么第一个例子没有抛出错误？我应该在tsconfig中添加一些错误来捕获这个错误吗？

typescript

来源：https://stackoverflow.com/questions/75897431/typescript-fails-to-check-react

2条答案

按热度按时间

6mzjoqzu1#

在使用messages数组的每个地方都应该有一个错误。
原因是{ text: string; }[]与string[]类型的差异。
TypeScript有内部缓存。
对于VisualStudioCode IDE，按F1，键入TypeScript: Restart TS server并运行该命令。几秒钟后，您应该会看到错误。
对于其他IDE，只需尝试重新启动应用程序。

赞(0）回复(0）举报 2023-04-07

qmb5sa222#

当我将代码放入tsx文件中时，我得到两个错误，一个在Component的声明中，它说
消息未定义
以及所有message输入上的第二个，这些输入都沿着以下线路：
类型“string”不可分配给类型“{ text：string;}'. ts（2322）
下面是tsconfig：

{
    "include": [
        "./src/*"
    ],
    "compilerOptions": {
        "experimentalDecorators": true,
        "lib": [
            "dom",
            "es2015"
        ],
        "jsx": "react",
        "baseUrl": "./",
        "paths": {
            "rebass/styled-components": [
                "node_modules/@types/rebass"
            ]
        }
    }
}

这是编辑器中错误消息的外观：

赞(0）回复(0）举报 2023-04-07

我来回答

TypeScript无法检查React

2条答案

相关问题

热门标签

最新问答