如何修复 VSCode 中的“预期表达式。ts(1109)”?
Posted
技术标签:
【中文标题】如何修复 VSCode 中的“预期表达式。ts(1109)”?【英文标题】:How do I fix "Expression expected. ts(1109)" in VSCode? 【发布时间】: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>
【参考方案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>;
【讨论】:
以上是关于如何修复 VSCode 中的“预期表达式。ts(1109)”?的主要内容,如果未能解决你的问题,请参考以下文章
如何修复 Typescript linting 在 VSCode 中不起作用?
我如何修复关于 vscode 中颤动的“警告:映射新 ns”