Why $props is any By Default

[rchavezj]

Describe the problem

Lack of Type Information: $props doesn't inherently know what types the props should have unless explicitly specified.

Dynamic Nature of Props: Svelte allows any type of data to be passed as props, so without explicit definitions, TypeScript defaults to any.

Loose Typing in $props: $props is a generic utility, and its type must be explicitly constrained with a type parameter ($props<Type>()).

By following one of the options above, you can enforce strict typing and eliminate the any types in your $props.

Describe the proposed solution

Hovering over the variables would not have :any but the explicit type we passed into the prop.

Importance

nice to have

[brunnerh]

You are supposed to type props like this (or extract the type first):

let { a, b, c }: { a: string, /* ... */ } = $props()

$props used to be generic, but that caused problems with inference which is why it is any now.
Defaults would e.g. cause unions of incompatible types without error:

let { a = '' } = $props<{ a: number }>();

a is string | number here.

[rchavezj]

@brunnerh

Another question. How do we handle type $props when getting data from +page.sever.ts

let {data} = $props<{ 
    SermonData: Sermon_SEO_Type, 
    custom_sermon_meta_data: Sermon_Meta_Data_Type 
}>();
const SermonData: Sermon_SEO_Type | undefined = data.SermonData;
const custom_sermon_meta_data: Sermon_Meta_Data_Type | undefined = data.custom_sermon_meta_data;

Is it possible if I can convert it to

let {
 SermonData, 
 custom_sermon_meta_data
}{
  SermonData: Sermon_SEO_Type, 
  custom_sermon_meta_data: Sermon_Meta_Data_Type 
} = $props>();

I get undefined when I try to convert to the shorter version.

[brunnerh]

The SvelteKit data property should be typed automatically, so type annotations can be omitted.
Nested destructuring would address this, right now you would probably want a separate $derived statement.

let { data } = $props();
const { SermonData, custom_sermon_meta_data } = $derived(data);

If the types are not applied for some reason: The generated types can also be imported manually:

import type { PageData } from './$types';
let { data }: { data: PageData } = $props();

(The types are updated continuously while the dev server is running.)

[rchavezj]

@brunnerh
Any chance I can infer the types something close to this

const { SermonData, custom_sermon_meta_data } : {
    Sermon_SEO_Type | undefined,
    Sermon_Meta_Data_Type | undefined
} = $derived(data);

I looked at the documentation you shared

[brunnerh]

If the types are assignable that should not be a problem, you need the property names, though.

const { SermonData, custom_sermon_meta_data } : {
    SermonData: Sermon_SEO_Type | undefined,
    custom_sermon_meta_data: Sermon_Meta_Data_Type | undefined
} = $derived(data);

The source type ultimately comes from the data property, adding an additional type annotation on the $derived should not serve any purpose except "watering down" the exact type. And since a $derived cannot be assigned, that should be pretty pointless.

[rchavezj]

I tried that but I get the following error

Type 'PageData' is not assignable to type '{ SermonData: Sermon_SEO_Type | undefined; custom_sermon_meta_data: Sermon_Meta_Data_Type | undefined; }'.
  Type '{ pathname: string; status: number; error: Error; SermonData?: undefined; custom_sermon_meta_data?: undefined; }' is not assignable to type '{ SermonData: Sermon_SEO_Type | undefined; custom_sermon_meta_data: Sermon_Meta_Data_Type | undefined; }'.
    Property 'SermonData' is optional in type '{ pathname: string; status: number; error: Error; SermonData?: undefined; custom_sermon_meta_data?: undefined; }' but required in type '{ SermonData: Sermon_SEO_Type | undefined; custom_sermon_meta_data: Sermon_Meta_Data_Type | undefined; }'.ts(2322)

Code works when I have two different derived infers but I prefer shorter approaches

  const SermonData: Sermon_SEO_Type | undefined = (
        $derived<Sermon_SEO_Type | undefined>(data.SermonData)
  );
  const custom_sermon_meta_data: Sermon_Meta_Data_Type | undefined = (
        $derived<Sermon_Meta_Data_Type | undefined>(data.custom_sermon_meta_data)
  );

[brunnerh]

In strict typing, there is a difference between property?: type and property: type | undefined, in the latter case the property is required to exist. The data returned from the load function is inferred to have the property as optional (?), so either use the same type or change the load function so it returns the property as always existing.

Also, please ask questions about how to use TS/Svelte on platforms like StackOverflow which are made for that.
_{(Or if that is not possible for some reason on inferior platforms like the discussions section.)}

[rchavezj]

If it helps, I got this result working

const { pathname, SermonData, custom_sermon_meta_data, status, error } : PageData = $derived(data);

I do not qualify to post on stackoverflow yet and chatGPT is not the best with svelte 5 generating.

[rchavezj]

@brunnerh

Very soon I plan on applying this approach.

const { pathname, SermonData } : { PageData: {
     Sermon_SEO_Type | undefined,
     Sermon_Meta_Data_Type | undefined
} } = $derived(data);

[rchavezj]

I ended up doing

<script lang="ts">
	let { data } : { data: PageData } = $props();
	const SermonData: Sermon_SEO_Type | undefined = $derived(data.SermonData);
	const custom_sermon_meta_data: Sermon_Meta_Data_Type | undefined = $derived(data.custom_sermon_meta_data);
</script>