As a next step I want to work on these types here.
The any type I'm using here for my assigned projects for the listeners here and also for the projects
in the project state.
Of course here I don't really want to work with any aid would make more sense to have a dedicated project
class or project type which we can use and indeed I will create a class for that project type simply
by using class project so that we have a way of building project objects which always have the same
structure.
Right now I'm doing it down there with the literal notation.
The downside of that of course is dead.
We have to remember that it's description and not desk that we need an I.D. which is a string and so
on.
So that's where custom type can help us and I'll create a class and not an interface or a custom type
with the type keyword because I want to be able to instantiate it.
So how should such a class look like or has such a project looked like to be precise.
Well I'll add a constructor and then use it is a shortcut of assigning arguments or parameters to the
constructor which then automatically become properties as well by adding the successor at the beginning
public in this case and then the name of the argument and property and then the type.
And here every project should have an idea.
Every project should have a title which also is a string just like DADT.
It should have a description which is a string.
It should have a people property which is a number that's the number of people assigned to a project
and one thing I also want to add which we didn't have thus far is actually a project status because
right now when we add a project here it appears in both lists.
Now I want to add a status to a project which of course can be changed so that we actually can filter
for active projects in the first box and finish projects in the second box.
So did we only show the right projects at every box.
So for that I'll add another public property here.
Status and not a question of course is which type should this status have.
Now we could use a union type with two literal types active and finished what we used early already.
But here I also want to introduce or reintroduce another type.
You learn about and that's the enum the E name is perfect here because we have exactly two options.
And here in the context of this project object we also don't need a text which makes sense to humans
which we store as a value but we really just need some identifier.
So here I'll add a new enum project status and I want to have two values steer active and finished and
then here is state as will be of type project status.
Just like that this is now my project.
Class with that here we can say that this is an array of projects using that project class and of course
when we create a project here we do that by using new project.
Project not project state.
And here to project we forward an idea in this case as mentioned before a random number which we convert
to a string.
Then the title then the description then the number of people here and then also of course Dad's status.
Right.
And one thing I want to have here in this application in this demo project is that every new project
by default is active.
So when we create a new project here we assign project status dot act of here as a value for the status.
With that we have the project which we add.
And now there's one other place where we need to project class and that is here and the project list
class.
There we have the signed projects property and of course that should all be an array of projects.
Now with that we're using better typing.
And one advantage is that here in render projects we now also get auto completion here for example.
And we would also get an error a compilation error if we tried to save that because now typescript understands
with which types we're working here.
So that's the project class and how we can use that project.
Class isn't the only class.
However we also have the listener here.
And for that I'll add a new custom type listener the name is of course up to you.
And I just use a type here because I want to basically encode a function type with one word.
So what do I mean with that.
Well of course a listener here in our application is just a function.
Right.
What we stored in the listeners array is just a bunch of functions.
Add listener pushes and you function and when something changes we execute that function.
So here a listener is really just a function but it is a function that receives our items certain items.
In our case an array of projects and that then does something with it.
Now to be precise here of course to define a function type we don't have curly braces here but instead
as you learned the return type and that will be white which means we don't care about any value that
listener function might return in the place where we work with listeners.
We don't need any return type.
We just want to ensure that whoever passes us such a listener expects to get some items when the listener
fires.
With that here we can say that listeners is an array of listener well functions in the end.
And here when I push listener function I need to make clear that it's not just any function but that
it's of type listener then everything works.
Now in the place where we use add listener which is down there we now all of course can enhance our
typing and make it clearer that here we will actually get a bunch of projects.
So now with that we set up our listener we had at the project type and that changes nothing here.
If we now add something that works and if I add a second item that still gets added besides the first
item being added again as well and we're not doing any filtering in any of the lists at all.
So before we continue working on other parts let's make sure we're not having this duplication here
inside of a single list and also not the publication across both boxes here but that instead only active
projects are showing up here and only finished projects and therefore initially no projects show up
here in finished projects.
So let's fix that.