So we had a look at lode Ash third party library that's filled with JavaScript for JavaScript.
You also find certain third party libraries that really embrace TypeScript and types features and give
you a brand new way of writing code that works because you are working with typescript.
One example is class transformer an even better example is class validator and we'll have a look at
both here and let's start with class transformer.
Let's say in our project here I actually have a model a data model let's name it product and I'll name
it product dot model dot t s but you can named as follows whatever you want.
My idea is that in this file I define a class for a product.
So I describe how our product should look like.
For example that it has a title which is a string and a price which is a number.
And then I have a constructor function where both can be initialized.
So string and price and that I said this title equal to T.
And this price equal to P and of course we could have used the shortcut initialization where we only
used to constructor.
Then let's say we also have a method get information where I return an array let's say where the first
element is the title and the second element actually is a string where I have a dollar sign and then
injected into this string this price so a very simple model here a very simple class.
And now we can of course use this class if you want to an apt.
Yes.
So there I will get rid of load ash and instead import product from thought slash product model.
Now for Dad you need to make sure that in product model you actually export this class otherwise you
can't imported.
And here we have to export product like this because I'm using unnamed export here by adding the export
keyword right in front of the class.
So now you of course we can create a new product book which costs twelve ninety nine.
And thereafter I can console log P1 get information and we should actually locked as a rate.
So if we now run NPM start here our webpage def store restarts up and we should see does nice array
with information about this book.
So if I reload here here it is.
Now that's not too fancy of course that works but that's nothing new.
Now a common scenario in bigger apps is that you might be downloading some data let's say from a server
you're fetching data from a back and server and that server then the end returns you some Jason data
which you pass and which then might be a list of products.
So here we might have products which we get from the server where we then have a title carpet and a
prize twenty nine or ninety nine and where we then also have this book.
So title book and the price of ten ninety nine let's say.
So that's a very simple array of data which mean the end got from the back end.
Now these are of course JavaScript objects but they're not instances of our product model.
And that is a typical scenario when you get data as Jason.
It has no attached data like to which constructor function in your front code it belongs your server
doesn't know that.
And Jason also is a format that just transmits basic data.
You don't have rich metadata to your objects attach there or at least you would have to do this manually.
So in other words the products we get here are objects which don't have a get information method.
Now traditionally if you now want to convert dat in two instances of your model you would have to do
that manually.
You could have you were loaded products which then let's say uses products calls the map method and
on every product into there Ray.
We then return new product for product title and port dot price.
And there after we would have an array full of real product constructor function instances.
And then we could actually loop through that loaded products and then India for example console log
project get information.
This is how we could manually transform an array or although a single no name vanilla javascript object
into an instance of a specific constructor function and hence you would get this output.
Now doing this manually is cumbersome.
It's a bunch of extra steps here.
And this is only a simple transformation of course.
That's where the class transformer package can help us.
It makes that very very simple there.
We also define a class in typescript in our case here.
Then we might be getting some data let's say from a server and then we actually can call a simple convenience
method and it will automatically convert our data into the right models now for that.
Let's first of all run npm install class transformer dash dash save like this.
And once it is finished let's run npm install reflect metadata dash dash safe a package.
This package in the end depends on.
So here let's import this too.
And then as it all instructs us here in the setup instructions here.
Import reflect metadata in your root entry files on my case here in Apt Yes I import this third party
library we just installed as a dependency of our library.
Now that actually word the notorious steps and therefore we can skip this one in the browser we still
have to install the same packages though and adding this import here is fine because we are using web
Peg and therefore now we actually are good to go.
And now we can import something from class transformer and that something is the plain two class method.
This package also has a couple of other methods you can learn more about them here in the official docs
but plain two clauses the main method you can use it here to set your loaded products for example instead
of doing this manually here as we did before we can set loaded products equal to plain to class and
now pass in to arguments here.
The first argument is the class we want to convert it to in my case your product and I don't instantiate
it or call it.
I just point at that class.
The second argument is the data we want to transform.
So in my case here that is products.
And now what this package will do is it will go over it is array and transform every plain vanilla javascript
object here in the end to an instance of this class.
So if we now save this and run NPM start again the webpage def server boots up again and it should build
this project without errors.
Now if I reload the page I get the same output as before but of course with less code from our side
because we are using this package and the amazing thing about this package is that it works that well
here because it builds up on TypeScript and in the end utilizes typescript it utilizes the fact that
we have a class here at which we can point but to also be honest this package works particularly well
with typescript but it doesn't use a typescript specific feature classes for example also exist in vanilla
javascript.
So whilst this is developed primarily for typescript it actually also works in vanilla javascript that
will not be true for the next package though.