{"id":2377,"date":"2015-11-19T14:01:06","date_gmt":"2015-11-19T14:01:06","guid":{"rendered":"https:\/\/www.cmarix.com\/blog\/?p=2028"},"modified":"2024-06-24T06:56:39","modified_gmt":"2024-06-24T06:56:39","slug":"configuration-of-typescript-in-visual-studio","status":"publish","type":"post","link":"https:\/\/www.cmarix.com\/blog\/configuration-of-typescript-in-visual-studio\/","title":{"rendered":"Configuration of TypeScript in Visual studio"},"content":{"rendered":"<p><a href=\"https:\/\/www.cmarix.com\/web-development.html\">Web development<\/a> is inevitable without JavaScript. The developer with Object-Oriented background who works on JavaScript will always find the issue in parsing data because of the dynamic type variable &amp; the variable or function name because JavaScript is strongly typed language. JavaScript does not have a good IntelliSense and it is normally not that easy to find errors at compile time.<\/p>\n<p>If you have experience with <a href=\"https:\/\/www.cmarix.com\/javascript-development.html\">JavaScript development<\/a>, you know that it is neither strongly typed nor object-oriented. Rather JavaScript is a dynamic language that is functional in nature. For the Developer, there can be significant challenges with JavaScript such as defining interfaces and classes, declaring integers, strings and enforcing that integrity. In JavaScript, you can declare a function that does not take arguments and call that function with arguments. Keep in mind Typescript is not a substitution of JavaScript.<\/p>\n<p>Typescript is a free and open-source programming language offering by Microsoft that seeks to change the way you write JavaScript. It is not only used on the Microsoft platform but it can be used anywhere in any environment where there is a need to write JavaScript. With the Typescript, developers can increase their productivity by writing JavaScript code.<\/p>\n<p>Typescript provides features like type safety, type checking at the compilation time and gives the error if any. It gives you type checking, explicit interfaces, and easier module exports. Typescript is the Open Source and under the Apache 2.0 license.<\/p>\n<p>For Visual Studio 2013 update 2+: included by default (also you can download from the website http:\/\/www.typescriptlang.org\/ download section.)<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-7493 size-full\" src=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2015\/11\/typescript_1.png\" alt=\"Visual Studio 2013 update 2+\" width=\"693\" height=\"107\" srcset=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2015\/11\/typescript_1.png 693w, https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2015\/11\/typescript_1-300x46.png 300w\" sizes=\"(max-width: 693px) 100vw, 693px\" \/><\/p>\n<p>You can easily install tools with<\/p>\n<ul>\n<li>npm install typescript -g<\/li>\n<li>git clone https:\/\/github.com\/Microsoft\/TypeScript.git (Github)<\/li>\n<\/ul>\n<p>For Visual Studio 2012: download the tools &#8220;TypeScript for Visual Studio 2012&#8221;. Other editors like WebStrom, Atom, Sublime Text and Eclipse also provide support for Typescript.<\/p>\n<p>Microsoft does provide great support in Visual Studio for TypeScript, let start with the example project.<\/p>\n<ul>\n<li>After the Typescript is installed in visual studio, create the sample project let say &#8220;StartWithTypescript&#8221;. You can find the project template into the Templates &gt; Other Language &gt; Typescript. Select &#8220;Html application for typescript&#8221;.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone wp-image-7494 size-full\" src=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2015\/11\/typescript_2.png\" alt=\"Html application for typescript\" width=\"619\" height=\"375\" srcset=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2015\/11\/typescript_2.png 619w, https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2015\/11\/typescript_2-300x182.png 300w\" sizes=\"(max-width: 619px) 100vw, 619px\" \/><\/p>\n<ul>\n<li>Project is created with default files index.html, app.css, app.ts. Here &#8220;.ts&#8221; is the extension for the typescript file. The Build Action for this file must be &#8220;TypeScriptCompile&#8221;, it is mandatory otherwise the compiled JS file will not be generated.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone wp-image-7495 size-full\" src=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2015\/11\/typescript_3.png\" alt=\"TypeScriptCompile\" width=\"626\" height=\"233\" srcset=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2015\/11\/typescript_3.png 626w, https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2015\/11\/typescript_3-300x112.png 300w\" sizes=\"(max-width: 626px) 100vw, 626px\" \/><\/p>\n<p>In visual studio, with <em>build action,<\/em> all the typescript file in the project will compile and appropriate js and js.map file generated with the same name. Now build the project the app.js file is created from the app.ts. If you can change anything into the .ts file and save it, automatically it will reflect into js file.<\/p>\n<ul>\n<li>In case you see that automatically compiling Typescript does not create or update JavaScript, Open the Tools &gt; Option dialog. In that go into the Text Editor &gt; Typescript &gt; Project &gt; General section and check the automatically compile Typescript files option is checked or not.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone wp-image-7496 size-full\" src=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2015\/11\/typescript_4.png\" alt=\"Compile Typescript files\" width=\"613\" height=\"353\" srcset=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2015\/11\/typescript_4.png 613w, https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2015\/11\/typescript_4-300x173.png 300w\" sizes=\"(max-width: 613px) 100vw, 613px\" \/><\/p>\n<ul>\n<li>Javascript file can be generated from the command line using &#8220;tsc.exe&#8221; command with the &#8220;filename&#8221;.ts as the parameter. There is a list of Compiler Options listed here.<\/li>\n<li>To add the new typescript file, Go in to Add Item and search about Typescript, Add the new typescript file and then build it will generate.js and js.map files<\/li>\n<\/ul>\n<p>It is recommended to use the latest technology like TypeScript along with ASP.Net MVC to make your DotNet application powerful, scalable and robust.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web development is inevitable without JavaScript. The developer with Object-Oriented background who [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":2380,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22],"tags":[],"class_list":["post-2377","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-technologies"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/posts\/2377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/comments?post=2377"}],"version-history":[{"count":5,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/posts\/2377\/revisions"}],"predecessor-version":[{"id":38223,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/posts\/2377\/revisions\/38223"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/media\/2380"}],"wp:attachment":[{"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/media?parent=2377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/categories?post=2377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/tags?post=2377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}