Declaring Props

[00:00:00]
>> Alright, so so far, we've dealt exclusively with state that is internal to the component, which is to say that the values in the component are only accessible within that dot Svelte file. But, when you're building things out of multiple components, you will need to pass data between them.

[00:00:16]
So, to do that, we use what are called properties or props. In Svelte, we do that using the export keyword. Let's go over to the nested.svelte component. You see that we have a let answer value here, which is currently undefined. We can say that we wanna expose this value to the outside world and allow other components to pass data into this component by using the export keyword.

[00:00:44]
Now, if you've used import and export before in JavaScript, then just like with the dollar sign, you may be a little bit, hang on, I don't know what's going on here. This is not how JavaScript normally works and that is totally fine. It's not how JavaScript works, but it's syntax that we can use to express the intent of this component.

[00:01:05]
The idea is that everything inside the script tag is valid JavaScript syntax, which makes it easy for you to use things like linters and code formatters and all the rest of it. So, if you have some hesitations, it's fine just roll with it and it'll soon become very natural, and we can specify default values for props that we declare, again inside nested.svelte.

[00:01:34]
Let's give the answer a fallback value of a mystery. And now inside app.svelte, if we add a second nested component, You'll see that in the first case, we're passing this answer prop down and it's being faithfully rendered. In the second case, we're leaving that undefined and the component is using its own fall back value.

[00:02:04]
There's a bug in this exercise, we've forgotten to include the version prop. So, this reads the svelte package is blazing fast download version undefined. Well, that's obviously not good, now we could fix this by fixing the use of this package info component here. We could add version equals package.version.

[00:02:28]
And you'll see that it now says version three, that's great. That fixed it, but since the properties of this package object you can see up here. Since they correspond to the values that we're sending into the package info component, we can just send them all in one go as a package I guess, using this spread syntax, ...pkg.

[00:02:54]
It has the exact same effect. So, this is often the case when you're working with props that you will have an object that perfectly matches the props that you need to send to another component, and this is just a convenient shorthand that lets you do this. A little bit of an advanced feature, if you need to reference all of the props as an object inside the component then you can use this special dollar dollar props value which is made available to your components.

[00:03:21]
>> How do we handle something like export default or just export const in Svelte?
>> So, you cannot export default because the default export is the component. You can do an export const, but it doesn't have the meaning that you're probably expecting if you're translating directly from an export let.

[00:03:46]
What an export const means is that you can access the value of what's declared inside the component from outside the component if you have a reference to that component. That's something that we're gonna cover later on in the tutorial when we learn about bindings, you'll be able to get a reference to a component and start interacting with it programmatically.

[00:04:08]
But in general, you're not gonna be using export const inside your components, and you cannot use export default because the component is the default export.
>> When you create a component file, it's just automatically export defaulted so you can import it from any other Svelte file?
>> Exactly, yeah.

[00:04:25]
>> And, when you export a variable in the script tags, when you import the file, you're also importing that variable?
>> You're importing the component and then the export is just a markup that says that you can pass that value into the component that you just imported. Yeah, it's something that once you've eased it a couple of times, it'll start to feel a lot more natural and make sense.

[00:04:53]
>> Does this say, not support TypeScript?
>> It does support TypeScript, learn.svelte.dev does not currently support TypeScript, that is something that we would like to add. Unfortunately, TypeScript is kind of a big and complicated package, and in order to use it in here, we would need to load like I think about a megabyte of code.

[00:05:14]
And we would also need to teach the code editor how to interpret that, it's a whole thing. And we plan to do that one day, but for now we're not gonna be using TypeScript. Later on, when we get out of this website and start building something on our own machines, that's the point at which we'll start using TypeScript, we'll get there.