如何修复 VSCode 中的“预期表达式。ts(1109)”？答案

【问题标题】：How do I fix "Expression expected. ts(1109)" in VSCode?如何修复 VSCode 中的“预期表达式。ts(1109)”？
【发布时间】：2019-10-15 16:23:30
【问题描述】：

我在打开其中一个 reactjs 文件时遇到 VSCode 错误“预期表达式。ts(1009)”。 do 和 if 以红色突出显示。但是我可以在本地开发环境中运行代码，编译也没有问题。我猜这是由于 VSCode 编辑器错误造成的。

Atom 或 Sublime Text 等其他编辑器也可以。我在 React 中使用了三元运算来解决它，但是如果else if 太多，事情就会变得非常复杂。

<div className='form'>
    // Form stuffs
</div>
{
    do{
      if (hasBreakfast) {
        <span>Breakfast Included</span>
      } else if {
        <span>Breakfast Not Included</span>
        }
    }
}

有没有办法解决VSCode中的警告？

【问题讨论】：

您需要将该代码放入函数中。然后在 render 方法中调用它
你的代码没有任何意义
这不是有效的 JSX 语法。我不知道你为什么在它的开头有do，而且你不能在其中嵌入 if/else 语句。试试这个：<div>{hasBreakfast && <span>Breakfast Included</span>}</div>
这是别人的代码。当我打开它时，VSCode 会抛出错误。 @Jayce444 有好处。三元运算符可用于解决此警告。但是如果有很多else if，就会变得复杂。事情会嵌套在三元中
好吧，如果你有复杂的逻辑，那么不要将它嵌入到你的组件中，因为你是对的，它会变得混乱且难以阅读。相反，将逻辑提取到一个函数中，然后在 JSX 中调用该函数，例如：<div>{includedMeals()}</div>

标签： reactjs visual-studio-code jsx

【解决方案1】：

return (
  <Fragment>
  // JSX to render goes here...
  </Fragment>
);

我在最后一行收到了同样的错误。我添加了片段元素来强制 return() 接收一个父元素。您还可以通过将返回代码包装为“div”元素来完成此操作。然而，那里的问题是你会有随机的空 'div' 。

文档解释得比我好。 https://reactjs.org/docs/fragments.html

【讨论】：

【解决方案2】：

do 在原始问题中使用的表达式实际上是“有效的”JSX/JS 语法 if you're using the babel syntax/plugin that supports the do expression proposal。 VS Code 不高兴的原因是因为TypeScript itself does not support the syntax。如果它仍然在您的开发环境中工作，again that's probably Babel。

【讨论】：

【解决方案3】：

Import Cost VSCode Extension我遇到了这个错误，刚刚卸载解决了我的问题。

【讨论】：

【解决方案4】：

在我的情况下，我使用三元条件得到了这个 Expression expected.ts(1109) 错误。

【讨论】：

【解决方案5】：

if 语句需要一个表达式来断言是否应该使用该代码块。

例如：

if (a = true) {
  // do something
} else if (b = true) {
  // do something else
}

如果你只想渲染Breakfast Not Included，你可以只使用else而不使用if。或者让它更简单，你可以创建一个ternary：

{
  hasBreakfast ? <span>Breakfast Included</span> : <span>Breakfast Not Included</span>;
}

【讨论】：