sveltejs/svelte

$derived(( {children: nav?.items} )) Property 'items' does not exist on type 'never'.ts(2339)

Closed this issue · 1 comments

  • all package is up pnpm up --latest
  • error: Property 'items' does not exist on type 'never'.ts(2339)
  • let root1 and root2 is temp resolved.
Image
<script lang="ts">
  interface NavItem {
  	id: string;
  	label: string;
  	url: string;
  	children?: NavItem[];
  }
  
  export interface Nav {
  	id: string;
  	siteId: string;
  	items: NavItem[];
  }

  let nav: Nav | null = $state(null);
  let root: NavItem = $derived(( {
  	id: '_root_',
  	label: '',
  	url: '',
  	children: nav?.items,
  } ));
  let root1: NavItem = $derived({
  	id: '_root_',
  	label: '',
  	url: '',
  	children: (nav as Nav | null)?.items,
  });
  let root2: NavItem = $derived.by(() => ({
  	id: '_root_',
  	label: '',
  	url: '',
  	children: nav?.items,
  }));
</script>
7nik commented

This is a limitation we can do nothing with - for TS $derived is a regular function, and it sees that nav right now is null and concludes it is impossible that nav has .items.
The solution is to use $derived.by instead, as you do in root2, where due to nav being in a closure, it may be both Nav and null.