For days I get a little starting project for you.
You find it attached.
It's the same starting Project we used over and over again.
You start D development server with NPM start and then I start at the typescript compilation in watch
mode with TSC dash w in a separate terminal.
So you're in my built in terminal I got two taps one with the development server which you should keep
up and running so that it watches for changes and reloads the page and keeps the server up and running
and another tab where I have that running typescript compilation watcher.
Now with that we can work in the apt yes file which is empty right now and start writing some code there
and I want to start right away by defining a class which we can use.
We do this by using the class keyword just like that.
And then the name of the class and there let's say we're building an app a web application a user interface
for some web tool that allows us to manage our different departments.
We might have in our company maybe we're building some kind of company internal tool whatever it is
and we need to have multiple departments there.
Now we could use objects to manage the data for the different departments and we might then also add
methods there to each object so that we can render that department information onto the screen and to
simplify the creation of these different apartment objects which will all look the same is to create
a department class so we could name this class department.
The name is totally up to you.
The convention is that it starts with an opera case character to make it clear that this is a class.
Now if you've been around to JavaScript development for a longer time you might know the idea of constructor
functions by the way.
And classes in the end our syntactic sugar for dead you could say but we'll see that once we compile
our code.
So here we have our class department and now in there we might have a name property you can add it just
like this without any let or constant front of it just like this directly in the class.
And then of course you can also assign a type to this you do that by adding a colon here and then to
type for example string.
And that's important.
This might look like an object but it isn't an object in an object use key value pairs with a colon
to have a key name and then the value for the key here.
That's not the case.
This is a so-called field of a class.
You create a class with curly braces as well.
But here this is not a key value pair.
This just defines the name of a key.
You will have an object which you will create based on the class and you define the value type that
Key will hold in the end.
You can also set an initial value here with the equal sign default but you don't need to do that.
Instead another thing you commonly have in classes is a special function in there.
A so-called method functions and objects are simply called methods which is the constructor method.
We can't added like this and this is a reserved word constructor is a reserved keyword understood by
TypeScript and by modern JavaScript as well.
And this is essentially a function tied to this class and tied to any object you create based on the
class which is executed when the object is being created.
So this allows you to basically do some initialization work for the object you're building now in there
you could accept an argument let's name it and maybe which could also be of type String and then you
want to store dad in your name field here.
While you can do this by reaching out to name with the this keyword and storing N in it what this does
is it sets the value of the name field also called property.
So the name property to the value you're getting in on end when a department object is created.
Now how could we create such a department object.
Nothing easier than that outside of the class you created by using the new keyword which is also built
into TypeScript and JavaScript and then you repeat the name of the class.
Then you add parentheses and this would create a new department object but the constructor is called
at this point of time when you execute this class like this with the new keyword and the constructor
here takes an argument a string.
Now you pass constructor arguments to this department called here.
So between these parentheses.
So here we could named as accounting because maybe we're building the accounting department here.
Now this will now create a new javascript object based on this blueprint.
So now we can store does not concern for example and then console lock accounting here to see what we
get.
If we now safe debt and we didn't go back to our page here and have a look at the development console
here in the def tools we should see our department object here.
It's a regular javascript object just passed us department type attached to it.
You could say and in the end it's an object with one key value pair where the key is name because that's
what we defined up there and the value is accounting and we have does accounting value here because
we're passing this as an argument to the constructor.
There we are accepting such a string restoring the value in this field and fields are in the end just
translated to properties the object based on the class will have to offer.
So this is how we can create a simple class and what the general idea is.
Now let's see what we actually get in JavaScript.