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

Question

I encountered VSCode error "Expression expected. ts(1009)" while opening one of the reactjs file. do and if were highlighted red. But I can run the code in my local development environment and also no problem compiling. I guess this is due to VSCode Editor bug.

Other editor like Atom or Sublime Text are fine. I used ternary operation in React to solve it but things get really complicated if there are too many else if .

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

Is there any methods to solve the warning in VSCode?

Answer 1

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

I received the same error on the last line. I added the fragment element to force the return () to receive one parent element. You can also accomplish this by wrapping your return code is a 'div' element. The issue there however, is you will have random empty 'div' s.

The docs explain it better than I can. https://reactjs.org/docs/fragments.html

Answer 2

do expressions, as used in the original question, are actually "valid" JSX/JS syntaxif you're using the babel syntax/plugin that supports the do expression proposal . The reason VS Code is displeased is because TypeScript itself does not support the syntax . If it's working in your development environment anyway,again that's probably Babel .

Answer 3

导入成本 VSCode 扩展对我来说遇到了这个错误，刚刚卸载修复了我的问题。

Answer 4

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

Answer 5

The if statement needs an expression to assert if that block of code should be used.

ex:

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

If you just want to render the Breakfast Not Included you can just use else without the if . Or do make it simpler you could make a ternary :

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