Incorrect `expected expression, got '.'` error

[Supermarcel10]

🔎 Search Terms

Searched GH Issues with is:issue state:open expected expression, got '.' error

🕗 Version & Regression Information

Tested on Nightly (5.9.0-dev.20250706) and range from 5.8.3 to 3.3.3. The error is reproducible on all versions.

⏯ Playground Link

https://www.typescriptlang.org/play/?#code/PTAEBUE8AcFNQMqwC4FdoCgCWA7ZsAnAMwEMBjeAMQHtrQBvDUZ0AIxIIH4AuUAIQ4BtALoAaDAF8M2PIVIV+HBkxY4SAW1i8AzsgK4A5uKnSQoAGocsJVgBt4SNJjLUcu0AGEA8gDkE4AEEfcFAAXlAAIgRqTQsSW1RYCIBuDBc3ZFAiWl4aOnDGFjYOXkEVIuZCiuq1TV4I2AAPDWh7UAA3eMSI8oqpIuFJVNMwAAUCajtYdRJkLDJQbUg8EkaMM3T3MniyVFtZ2AATSwT4cOzqdbBmADp2LiuWG6JcQ4AKVjCAPjYb2tgbshqAAZagAd0IHhI2lgbwAlGFQuFvH5AsFASDwZDobC4XDhmlXFsdnsDscumcsrQVHcOCpOM9Xh9vr9-hjQRCCFCYfDEcjfP4guB2ViuTj4fjpIS3NR7DdbNQDG9trZdvt8OTTnzQKgcIdYC8cEd8UA

💻 Code

// Type Setup
interface Foo {
    bar?: Bar[],
}

interface Bar {
    name: string,
}


// Variable Setup
const CONSTANT = "Some Value";
const foo: Foo = {
    bar: [
        {
            name: "example value"
        }
    ]
};


// Problematic syntax
const calculatedValue = foo
  .bar?
  .find(b => b.name.toLowerCase() === CONSTANT.toLowerCase());


// Working syntax of same constructs
// const calculatedValue = foo
//   .bar
//   ?.find(b => b.name.toLowerCase() === CONSTANT.toLowerCase());


console.log(calculatedValue === undefined); // true

🙁 Actual behavior

Multiple syntax errors are shown in IDE. Runtime error expected expression, got '.' is thrown.

🙂 Expected behavior

Code compiles as expected and outputs true.

Additional information about the issue

TypeScript is considered a free-form syntax language. As such, whitespace, indentation and breaks SHOULD NOT make an effect on runtime. This is clearly not the case here, where a given (otherwise) identical syntax (outside of whitespace, indentation and breaks) determines the runtime output.

It may be possible that the parser incorrectly determines ? as a ternary operator, instead of an optional chaining operator. This example (without the types) can be replicated with JavaScript, so it is probable this is a generic JS/TS parser issue.

[fatcerberus]

The optional chaining operator ?. is one token, you can't break it up.

[Supermarcel10]

Is there any documentation I could look on this? @fatcerberus

[MartinJohns]

The JavaScript specification. This has nothing to do with TypeScript.

TypeScript is considered a free-form syntax language. As such, whitespace, indentation and breaks SHOULD NOT make an effect on runtime.

ASI is gonna blow your mind then. These two code snippets have different return values:

return
    5;

and

return 5;

[Supermarcel10]

Looking at mdn docs, they do explicitly mention ?. instead of ? as the optional chaining operator. This is for determinism between the ternary operator (?).

I also found the TC39, which concerns the distinction between a ternary, where the expression is a floating-point number (such as a?.3:0 in their example).

This means it's not a parser issue, as I originally assumed. However, I still see potential to improve something in this area. It was unclear for me originally, so I think an error that specifically captures this condition and explains better would be beneficial, preventing the user error in the future.

As @MartinJohns mentioned, this is rather an issue that should be reported to the JS specification, so I will be closing this issue.

[MartinJohns]

As @MartinJohns mentioned, this is rather an issue that should be reported to the JS specification, so I will be closing this issue.

I'm not saying it should be reported there, only that you can look into the requirements in the specification. It's perfectly valid and absolutely reasonable to only allowed specific string literals for operators, and now allowing arbitrary spaces in the middle of operators.

You have the same issue with any operator that is made of multiple characters, e.g. a + = 4 or a + + is not valid either.