Typescript error with default value for prop

[karchung0930]

I have set a default value for the prop but typescript still gives me error: "Object is possibly 'undefined'."

I understand that the at method might return string | undefined but it doesn't make sense after we have a defined a default value?
If this is the behavior which cannot be changed, what is the best and efficient way of solving this?

I know the easiest way is to just add a question mark before the dot like:
let text = request.at(0)?.toUpperCase() + request.slice(1);

But this is just not logical to me since we already provided the default value, as a user to read the code, I will wonder why still the object is undefined which causes confusion.

Many thanks in advance!

[7nik]

That's correct: "" won't be replaced by the default value, and "".at(0) is undefined. And furthermore, TS doesn't care about the text length in the first place.

[karchung0930]

May I know what would you do if it were you?
Personally I have write the below code:

let { request }: Props = $props();
let text = () => {
    if (!request) {
         return 'Get';
    }

    return request.at(0).toUpperCase() + request.slice(1);
 };

It's longer but the readibility is better and anyone can understand easily.

Or just simply use the optional chaining with a default value although it could cause confusion?
Or do you have better solution?

[7nik]

It depends on how you want to treat the empty text. And optional chaining will result into "undefined" which is definitely not the desired result.

[karchung0930]

Thank you so much for explaining, I found this in your doc and it solves the problem:

import type { ClassValue } from 'svelte/elements';

interface Props {
    request?: ClassValue;
}