Converting existing .JS into .TS file

Hi Friends,

Recently, I came across a project which is actually written in silverlight which means basically its a desktop app. However, there is web version of that as well there where in it works with Kendo+Jquery combination. Since, its JQuery, hence every developer has got their own way of implementation which is a pain in maintaining and scaling the project.  I discussed with my team and thought of writing the same in such a way that still the existing stack will be working and side by side; I will be pushing the same on Angular 4. Kind of monumental task as this is not greenfield project where I have the choice to choose tools of my choice.

7th

However, very first thing which I did is copy the JavaScript file; created another Typescript folder and renamed the file as .ts. I then got ton of errors like shown below.

8th

1st

2nd

As shown above here TS compiler is expecting some kind type definition for the variable. Hence, in order to resolve these kinds of scenarios, I have created one global repository for my types only like shown below.

3rd

With that being said, that red squiggly automatically disappears like shown below.

4th

Here, you can see that its inheriting any as type. Similarly, when you have function which is defined in one file any used in another file then, in that case it will throw “Function is not defined” error while running the app. In that case, you need to exclusively export the function in order to utilize the same in a different TS file like shown below.

5th

Then, the same function should be imported in the consumer file before it gets utilized like shown below.

6th

Here, I have imported couple of functions from different places whichever were required. However, this is just the initial phase for making your JavaScript code compatible with TypeScript code. Once done with all these kind of changes, its highly recommended to make it more modular by using class and interfaces as this way we can define design boundaries for developers. There are other tons of benefits of this like you can use powerful features of ES6 and extend your app easily. I hope you would have liked today’s discussion. Will delve further in coming posts.

Also, this Saturday 22nd-July-2017 @ 7 PM IST, I will be talking on ASP.NET Core.  There, I’ll be doing live coding as well. If you guys are interested in that talk do join me. Limited seats available!

dotnetcore

Link:- http://bit.ly/Deep-Dive-Core

Thanks,
Rahul Sahay
Happy Coding

383 total views, 2 views today