Now we'll start with a very popular utility library low Dash.
Now what you learn here basically acts as an example of any javascript library you want to use.
No matter if that's load dash Jake worry or anything else.
Now a little side note at this point if you're interested in how to work with react and typescript or
let's say note J.S. and express and typescript I have dedicated modules on that later down in the course
because there you will learn a bit more than just adding them with typescript but for is simpler libraries
like load ash like J.
Query ends on here is an approach that will work.
So we want to use load ash in our project load Ash of course is a javascript library.
We don't need typescript to use it.
We can use it in any javascript project and we can install it as you basically learn here all load dash
official docs.
If you're using NPM which we are you can run NPM I or pip install.
That's just a short form dash dash save load ash.
So here in this example Project which uses Westpac without a production workflow though just a development
workflow there we can add does library by just running npm install dash dash save load ash.
This will now install it into this project and thanks to our webpage setup we can just imported into
our code files and utilize it dear.
Dad would be the same in any webpage powered javascript project.
If you're not using web pack then of course you could also simply use to CDMA and so on.
However what I will show you in the next steps a little bit later in this module will only work in a
webpage setup.
So here we have a webpage setup we now installed load ash.
And now if you want to use it we can simply import it here we can import let's say underscore from load
Ash.
Dad is a syntax which should be available with load dish installed.
However this now already gives us an error.
Could not find a declaration file for module load ash and we'll have another problem if we want to use
load Ash for example to shuffle in an array.
Well we could console log underscore shuffle and then pass let's say a simple array to just shuffle
method to shuffle method is a method load Ash supports we can learn this in your official documentation
of load ash there if you search for shuffle you'll learn that you can shuffle an array with this method
so it kind of should work but it really doesn't work this way as you can tell.
If I now start my webpage server here we will see that doesn't yet gives us an error and again it tells
us that it can't find a declaration file for module load ash.
So this is not really working in the way it should.
Now the problem with data is that load Ash is a simple javascript library it's built with vanilla javascript
and it's built for vanilla javascript.
We can verify this if we go to node modules where we have a lot of dependencies because we have a lot
of dependencies of where Peg and its dependencies there.
But here if we search for a load ash here it is and we expand as we see there are a bunch of JavaScript
files in there right.
And that's and all of load Ash.
Source Code bunch of javascript code but certainly no typescript code.
Now what's the problem with that.
The problem is typescript doesn't understand what's in this package it doesn't understand which methods
load Ash exports.
Now you will see that it actually works if we go to the T S config Jason File and we make sure that
we do emit an output upon an error.
So if we switch no emit on error to false so that we do emit new output if something errors out.
For now start to say again it in the end will give us that same error so we'll still see that.
But if I reload this page here you actually will get an output here.
You can ignore the error at the bottom here you will see an output which is the shuffled array.
You see it looks different every time I reload.
And that's very interesting.
It proves that load Ash works.
It proves that this code is correct but unfortunately typescript does not understand it and it can't
because load as uses javascript not typescript.
Now the problem is there is no hives of where's Nova followed ash.
So we have to live with that.
And that's a scenario you will encounter quite a bit.
You want to use a certain third party library and it's only built for JavaScript and hence you get errors
like that.
This is annoying because in theory we can of course use it typescript builds up on javascript we can
use any javascript library in a type of project.
We just have to translate it to typescript and dad thankfully is possible.
So let me turn on this setting here.
No limit on error.
True.
Let me show you how we can tell typescript about load ash and about what it offers you can install the
so-called types of a third party library if you search for a load and types.
You will find a NPM package which here is called at types slash load ash.
There you also see a install command which will run in a second but if you go down to details you also
find a link to get up repository.
It links to definitely typed which is a huge repository with tons of translations for all kinds of third
party libraries.
Here we are in a load Ash folder and there you find so called Dot D.T. s files.
So not just dot yes but dot d t s.
These are so-called declaration files which means they don't contain any actual logic but if we have
a look at the shuffle details file they contain instructions to typescript they basically tell typescript
how something works and what's included in this package and you can explore different files here also
in different sub folders to learn more about that.
So in the end these files simply provide a translation from plain javascript to typescript they don't
contain any logic that runs but they did find the types.
Does library works with data find the types you use the types you get back when you call a method and
so on.
You can also write such details files on your own and do your official title.
Docs provide a guide on that if that's what you're interested in but for your own type of project you
don't have to do that because of your writing type food code only types would of course understands
that.
But if you're working with a third party library written in Javascript without any type good code or
without built in dot details files which some third party libraries ship by the way even if they are
written in Javascript loaded dash doesn't show.
So if you're working with a library that does not contain built in translation files and that is not
natively written in typescript then using such a types package is the solution.
So here we then run npm install dash dash save at times slash low dash you can actually also run save
death because dad is a dependency that's really only required during development because then the code
is compiled to JavaScript anyways.
And this now installs this translation for types to understand it and you'll see as soon as this is
installed this error is gone.
And if I now restart NPM start you will see the error won't come back here either.
So you see now this works without any errors both in the compilation as well as in the browser.
Technically you'd work before as well but now with the translation we also can utilize typescript for
example.
Now we also get all completion here in the idea.
If I type a dot here I see the load edge methods I can use.
This therefore is a very important piece of knowledge.
Something you definitely have to be aware of which allows you to use regular normal vanilla javascript
libraries in a type of project and still get great support great auto completion and avoid errors with
the help of these translation types packages.
You could say and these packages which are always named at types and then the package name.
These basically exist for any popular third party library you can find out there.
You can always search for library name and then types for example Jake types and you should find such
an entry so that is how you can work with types and vanilla javascript libraries.