Show a warning when a variable used in the markup could potentially render `undefined` as a string

[ivanhofer]

Description

I recently refactored some properties of multiple interfaces in a larger code base from required to optional. Then I had to manually look into each markup section to see if those properties get rendered somewhere and wrap them into an {#if property} block, to make sure the UI doesn't render undefined as a string in the middle of a page.

Proposed solution

I would love to get a warning if a section of the markup could potentially contain an undefined value.

<script lang="ts">
  const name: string | undefined = undefined
</script>

<!-- I would like to get a warning if this could potentially render `undefined` -->
{name}

An addiition would be to get a warning when something could render [object Object]:

<script lang="ts">
  const obj: Record<string, string>= { }
</script>

<!-- renders `[object Object]` -->
{obj}

But I'm not sure if this is possible to detect in all cases, since someone could override the toString function of an object. Maybe just show a warning for native data types?

Alternatives

No response

Additional Information, eg. Screenshots

https://stackblitz.com/edit/vitejs-vite-vqeefj?file=src/App.svelte