 Okay, I hope you can hear me now So as I was saying Declaration just defines the properties and methods That's why when we access an object in TypeScript and we are using a library written in JavaScript We have all the methods and properties of that library. It's because of the declaration files developer experience One reason to use TypeScript is because of the developer experience So types prevent bugs first of all If we for some reason we misspelled writing method or we are passing a wrong type to a function If we compile this code we always we automatically get the Some errors by the compiler. So we don't have this kind of errors in runtime Which is nice and it can save us a lot of time refactoring code It's much easier using TypeScript to refactor code. Basically, we are refactored. We are renaming a property in an interface So it will find all reference to that type and it will change in all places where we are using that property pretty nice IntelliSense, so as I said before When you access an object we get all properties and methods of that object Using the declarations so it's pretty useful and it increases the developer productivity Okay, now let's talk about migration So now that we know the basics of JavaScript and the advantages. Let's migrate From JavaScript to TypeScript So our migration goal Basically, we have a really simple API written in JavaScript. It's using epi as a web framework and Our goal is to migrate to TypeScript Here is a project if you can check later So what is our migration plan? So first we start by installing TypeScript We install as a dev dependency Then we install declarations in this case we install the node declarations and the epi So since we are using the we are in the node environment we need to use to install the declarations for node and Also declarations for epi that is a web framework written in JavaScript Then we set up our tsconfig.json. So instead of passing all compiler options via argument we can Initialize this tsconfig.json and we can specify all the compiler options much easier Then we enable This option allow.js that basically says to the TypeScript compiler Well, you compile TypeScript and now you will also compile JavaScript code And then optionally we can enable this prop this option check.js So instead of just copying the JavaScript code It will also analyze a JavaScript and report some errors how using js docs and declaration files. I Will show you then we just start renaming our js files to TypeScript fix errors and then Go back to step four until we migrate the all application now let's Do a simple demo Well, so can you see my screen? So here is the package.json and as you can see We just have epi as a dependency and as dev dependencies. I have epi node declarations and TypeScript Then I just created a few scripts to help me building the code. So let's migrate our first file Let's migrate our server So we just go here We just renamed the file to TypeScript and that's it Let's compile this Okay, it's running the tsc command the TypeScript compiler and as you can see it generates to our output directory the JavaScript code, but as you can see it's missing the other JavaScript files So this is the on the the TypeScript file that was compiled So let's also Instead of export as a lot JavaScript. We are using Export a lot a lot TypeScript So to enable compile compiling the JavaScript code we need to enable this option So there is like a bunch of compiler options and we are enabling this one Allow gs. So when we enable this option now the compiler It looks at the TypeScript files and also to the JavaScript so Here we have our JavaScript code also. So we have our TypeScript that was compiled and our JavaScript and it basically just copy the file into some kind of indentation so Nothing special So let's try to run this NPM start So our server is running Then let's call our server and it's returning some stuff. So it's working. So and as you can see we have Well some TypeScript code and some JavaScript But let's make things more interesting. So now I'm Now that we are using the TypeScript compiler I want to take the full advantages and I'm going to enable this option Check gs. So instead of just Compiler JavaScript, it will also analyze the JavaScript code and report some errors Let's just clear these and if I compile Okay, yeah, we have errors. So if you can see it, but basically it's saying that Type number is not assignable to Boolean in a JavaScript file So if we go here It's complaining that it's expecting a Boolean and we are passing a number and how TypeScript knows this Because of the GS docs if we go to the GS docs here It says that insert is expecting a task and the task The done property is a Boolean and we are passing a number. So we can define types in GS doc Using this notation And it's pretty useful So let's fix this So now we pass a Boolean so and it was reporting another error here in this file Saying that We are passing a string and we expect a number and This code at first it looks that is correct. Well, we just receive a request. We Get the the program ID and then we access the database The thing is if we go to the get method in the GS docs It says that we are expecting a number and you are pass passing a string and how it knows that Params is a string because of the declarations. So the TypeScript uses the declaration the happy declarations and it knows that Params is a dictionary of strings. That's why ID is a string And here you we can see the all definitions of the request object in epigest So let's just convert our variable to a number and if we try to compile this Well, no errors cool. We just fixed two errors in our JavaScript Using TypeScript, which is great so let's just Migrate another file Well, now we are receiving an error. So as you can see we don't have intelligence here. So But if we had types We are saying that we are receiving an error now we have all properties of error method error object, so Let's just print the message and let's make things even more interesting. So Let's enable More options in our compiler. So there is a bunch of type checking options here We are going to enable all of them So if we enable this now we are saying to the compiler so if we have like Unusered local variables or unused parameters, please report errors and this is true for our JavaScript code and also for our TypeScript code So let's try to compile this again. Okay found some errors So here it's saying that object is possibly undefined. Whoa, this one is It's hard. So why because Task can be of type task or undefined. Why because here in the get method in the GS docs it says that it can return a task or an undefined and since we enabled This option here strict null checks It says that well task can be null so we can have a problem here. Let's protect against this problem So we need to just check if Task is null. Well cool. We catch another problem and And we can just slowly like migrate the whole application from JavaScript to TypeScript And so we can have people in our team implementing new feature in TypeScript and still fixing some problems in JavaScript We don't need to migrate like at once. We can just like smoothly migrate our applications Let's back to the slides. So Let's just recap So convert JavaScript files to TypeScript and enable allow GS to also compile the JavaScript code Optionally we can enable this option check GS. It's very useful And take advantages of the GS doc and declarations to also report errors in our JavaScript code So and these allow us to use TypeScript, but not write TypeScript We can just have a whole application written in JavaScript and having type checking if we enable this option and if we install the declarations So we can write JavaScript with types Then if we want to catch even more errors in our code we can enable the strict type checking options To detect even more problems So and That's it Thank you. I don't know if we have time for questions They are not enabled by default Well, it's like a TypeScript decision when we generate the TS config file It basically you have like all options and all of them are basically commented. So you just need to uncomment all options There are some rules that we can catch with linters But if we have if we just use TypeScript, it's much easier