Svelte doesn't parse typescript in html

[Evertt]

When you're using a typescript interface that has lots of nested optional properties, it's nice that you can use question marks to write clean and safe code:

const avatarUrl = $session.user?.profile?.avatarUrl || ""

In fact, if I wouldn't include those question marks (or some other form of null-checking) then svelte-check would produce an error that I'm trying to access a property on an object that may be undefined.

Now I'm very happy with that. The bug that I want to report is that this doesn't work in the html. In fact, I'm being put in a double bind. If I write code like this:

<img src={$session.user.profile.avatarUrl} alt="avatar" />

Then svelte-check rightly throws an error letting me know that I'm trying to access a property on an object that may be undefined. But then if I write this code:

<img src={$session.user?.profile?.avatarUrl} alt="avatar" />

Then svelte-check is like 👍, but that code isn't transpiled to valid javascript. The question marks end up in the final bundle and cause a syntax error in the browser.

Expected behavior
For the code to be transpiled by typescript before ending up in the bundle.

Information about your Svelte project:

• Your operating system: macOS Big Sur
• Svelte version: 3.25
• Bundler: Rollup

Severity
It's annoying, but I can work around it.

Additional context
I'm actually working in a Sapper project with typescript included. Maybe that's relevant, I don't know.

[Conduitry]

This is unrelated to TypeScript. That syntax is valid JS (optional chaining), just a recent iteration of it. Preprocessors not running on the template is a known limitation - #4701. You'll need to transpile after Svelte compiles if you're using JS syntax that isn't supported by browsers you need to support.