[MUSIC]
For this, we're going to use Create React App.
Create React App is an application generator that Facebook have
produced as a way to quickly get
started in bootstrapping and React application.
If you haven't checked it out, it's at create/react/app.dev.
This is just a note package that we can install.
What's really right about this is that we can use
it with TypeScript very easily,
and they have Docs that will show us how to do that.
The way that we do this is we can use npm or
yarn depending on what your preference if package manager is.
I prefer npm, so we're going to be using npm for this,
and we use that with the npx.
This is just going to execute that generator application.
We'll give it a name and now we can specify a template,
and that template being TypeScript.
The reason that we have this templates flag,
is that if you wanted to use something like Flow,
which is another approach to doing type safe JavaScript.
Flow was developed by Facebook,
for their internal stuff,
but a lot more projects seem to be going down
the direction of TypeScript than they are with the Flow,
so that's why I'm definitely more of a fan of it.
But we're going to generate an application using this.
Right on private to [inaudible] again,
and we go npx create React app.
We'll do it in the current directory,
and we'll do the template as TypeScript.
This is going to spin up just like a really basic application,
but it's also going to just stand up a bunch of what React's,
or at least the React community has agreed upon in terms defaults.
Things like linting tools and
linting rules are what are we going to be using to ensure code,
style, and formatting, and things like that.
We're got to install the package
so I haven't got all my machine at the moment.
I just while we were having chat there,
I went over and checked and the template has now downloaded.
This is the Create React app,
that's been scaffold up using TypeScript template.
We see in the sidebar on the right,
we have a bunch of files.
We have our app.tsx,
we have a index.tsx,
which is where the application entry point is.
We even have some tests,
but they're also written in TypeScript,
so that we can get type safe information,
inside of our tests.
This is using a testing library with its reacts support,
and we can see what is it doing,
and we get IntelliSense support through that.
But, we won't worry about test too much,
we'll just look at the application itself.
This is how, our basic application is being scaffolded up,
and if I was to pop the terminal I would
do npm start, run that up.
We got [inaudible] it should pop.
Yeah, there we are, it's popped into the browser.
There we go, our React application is working,
it's ready to shift to production
because that's is complex as the application is.
But, let's go with the canonical example,
and build a counter component.
Create a component, and
I'm going to do this as a function component.
We'll call that counter,
and then this is just going to return.
I would do a div,
and inside of that will go
a p-tag and the count is going to be count.
>> For anybody who's not familiar,
you'll notice here that he's literally able to just put
that HTML right in with his JavaScripts.
The peanut butter and chocolate coming together.
>> As I was saying before,
I dropped off, we're building a counter application.
For those of you that aren't familiar with React,
the TSX over JSX syntax,
allows us to use angled brackets with inside of our JavaScript.
We could put div tags and p tags
around customer components and so on and so forth.
We can put them in here,
and then React when it runs will generate those out to be
valid method calls against the React API,
to in turn make UI up here.
>> Okay.
>> Yes, we started building out a counter component,
that as we'll see,
as we are trying to use this,
we have a little red squiggly.
That's because it's going well,
you've said you want a thing called counter P here,
but you haven't told me what that is.
Well, that's because it's a prop that I want to pass in.
This will come in as the first argument called props,
I would call it props, or we're going to
just reconstruct that here.
We've now told the application where count is coming from,
but TypeScript is still like, well, hang on a sec.
It might be coming from there,
but I still don't know what it is.
If we have a look at the error message itself,
it's saying that this is implied to be in any type.
An any is just TypeScript way of going,
and throwing his hands up in the air and going,
I've got no idea what you are trying to do here.
It could be a number, it could be a string,
it could be an object, it could be a function,
it could be anything.
Maybe you want to help me out here and give
us some information about what this actually is going to be.
What is that argument looking like?
What's that shape of it,
and what are the types of the properties about within it.
The reason it does that is that, well,
we have this rule turned on that
says that we're not allowed to have implicit anys.
This is something that's turned on in our TypeScript config,
and is one of the rules that
TypeScript sets by default in the compiler.
Because you want to try and avoid using
any in your application because the more any's you have,
the less value TypeScript can give you
because you're basically telling TypeScript,
ignore this, ignore this,
ignore this, ignore this.
The more you do that, well,
then you start questioning what value is it going to be bringing.
We'll go ahead and define an object shape for that.
This will be called counts,
and that's going to be a number.
What I've done is, I've put a colon here,
which indicates the- so this is then how we
would do a type annotation,
of an object in TypeScript.
I'm annotating it with a type,
which is just an inline anonymous type here,
and that count is going to be a number.
Now if I hover over count,
it knows that it's a number,
and then here, count is a number, excellent.
Let's go and add this component to our application.
>> You also could have created an interface out of that,
if you had wanted to be able to level that
up and maybe share that out with something else.
If that was what you wanted to do.
>> Yeah.
>> Yeah, look at that.
>> Envious code, you'll see I've got this little light bulb,
that's just popped over here.
When I highlight that, that anonymous type,
and then if I do a controlled dot which activates that code tip,
it says, do I want to extract that as
a type A list or as an interface, so I could do that.
Then I would say,
let's call this counterprops, there we go.
We can extract that out. If you
were sharing these across multiple files,
then maybe we would extract that out and
then you can have that interface,
as something you could use elsewhere.
>> Love it.
>> I'm just going to delete out some of the,
I'll just delete out the boilerplate code that's here,
and we got to put out, counter in place.
Listen, I've put it in place,
but hang on a second, now we've got another red error.
It's telling us that the property count is
missing because we're not passing
any props through that component.
This is again where if we're doing
a shared components design in React,
which is the most common way that
you would build React components.
Maybe I didn't realize that I needed to pass up
a default value for count here.
Maybe I thought that count was always going
to be managed by the counter itself.
It's like, well no hang on a second, you
need to pass a value in here.
Count will be let's go hello,
and lo and behold,
we get an error message because,
first off counter is not what I call it.
It's going to tell us that well,
the property that I've given and counted,
doesn't match anything that's expected.
At the count, will now get an error saying,
well, you've given us a string but I expect a number here.
Again, TypeScript is just making sure that I could have zero,
it's coming from an AGI colon that it's a string.
I've just [inaudible] it's going, well, hang on second,
now you've given me a string but I really just wanted a number.
Finally we put zero there, save that.
We'll come back to the browser and we get our value as we expect.
Let's go ahead and have a look at how we can make that value
change using React hooks and
see what we can do with TypeScript and react hooks.
I need to import the React hooks,
we'll put in use state.
React hooks, again we talked about
this last time we did a React session.
But it's a way of managing a state with
inside of a function component,
because a function component doesn't have a state of its own,
but we can use the React hooks APIs, to set that up.
We're going to do, we'll create sub states,
will have the count,
and set count, and then use state.
If we have a look over here in
the type signature that's
just popping a little bit behind my head.
Actually, if I do that,
now is not behind my head.
We'll see that use state,
can take a generic argument.
Expand out a bit further.
It can take a generic argument, which is going to be S,
that's just the label that I've given it in the type definition.
Then that can be the initial state
or a function that will return initial state.
Then that generic argument is going to return as
the first value of the deconstructed array,
and then we will have a function that will modify that.
If I just do nothing,
we will see that count is,
well, it's undefined, it doesn't have a value associated with it.
If I was to use the generic argument,
I could say, click here, we go number.
We know that count will be a number,
or it could be undefined because we've
not given it a default value.
I'll give it a default value of zero.
Count is now only ever going to be
a number because we've initialized it,
and I can remove my generic argument.
Count is now, it knows that it's a number,
because it's inferred from zero being a numerical value,
it's inferred so that's the type.
Set count will be an updated function that takes
a number to update the count value.
Now instead of passing this here,
I can part in accounts,
that cascades through all correctly and how
I still respect for what we're expecting,
and works the way that we want it to work.
We could then add,
say a button and then have that being a plus symbol,
and then we'll create another button which is
a minus symbol for increment and decrement.
We'll add an on click,
which the sum will give it zero arguments because,
we could ignore that first argument.
I don't need the event argument that's happened from that click.
Instead we're going to reset count, count plus one.
Then, we'll just copy this line of code
down here and instead
of plus one will make it minus one, save that.
Now it goes up, and that goes down.
This is all done in a type safe manner.
We know that set counter requires a number pass to it.
We know that count is going to be a number.
We have our external component that just so happens to
be a few lines above but it could be coming from another file.
It has a prop that it expects,
which is a number, and we're passing it in a number as well.
Inside of that, it's getting a number and its outputting it.
It's committing it to a string so it
can output it inside of that p-tag.
If we were to change that and just
do number here as the generic argument,
now we would see a bunch of errors because, well,
it could be a number or maybe it hasn't been defined,
because it was never initialized.
We call it policy to
our external component because it's a number or undefined,
but I only want a number.
This is where I think TypeScript,
makes things so much more powerful.