Getting Started with TypeScript – Part 2

Hi Friends,

This is the continuation from the last segment. In this case, we will first gets started with Visual Studio Tooling support for Typescript. In order to download the same, you need to download from http://www.typescriptlang.org/#Download. Once you open the page, you will see the download options as shown below.

29th

 Then, I will switch to Visual Studio and create new web application as shown below.

30th

Then, I will select empty template as shown below

31th

Here, I have added one Scripts folder as shown below in the solution explorer.

32nd

Now, when I rt-click the Scripts folder, it will show TypeScript options as shown below.

33rd

34th

After, clicking OK, it will prompt the following message.

35th

I will say yes and proceed, then it will open the blank TS file. Also, if you look at the solution explorer, it will show you the newly added file.

36th

However, one point to note here, after saving the same corresponding JS file is not getting generated. Reason for the same is, default tooling option to compile on save in not checked as shown below in the screenshot.

37th

Upon enabling the same,

39th

It will produce the auto-generated JS file as shown below. By default, It won’t be part of project. So, you need to do showall files  in explorer, then it will show all the files.

40th

Now, if open the JS file, it would have produced the following snippet.

Now, let us go ahead and add one HTML file just reference the JS file in the same.

With the above change in place, it will show the following output.

43rd

I hope you would have liked this discussion. Thanks for Joining me. In coming section, we’ll delve more. Till then, stay tuned and Happy Coding.

Code Download Link:- https://github.com/rahulsahay19/TypeScript-Demo

Thanks,
Rahul Sahay
Happy Coding

2,201 total views, 1 views today