{"id":426,"date":"2023-07-23T02:38:00","date_gmt":"2023-07-23T02:38:00","guid":{"rendered":"https:\/\/nikspace.co.in\/?p=426"},"modified":"2023-07-23T02:38:46","modified_gmt":"2023-07-23T02:38:46","slug":"introduction-to-typescript","status":"publish","type":"post","link":"https:\/\/nikspace.co.in\/?p=426","title":{"rendered":"Introduction to TypeScript"},"content":{"rendered":"\n<p>My background in programming languages has been strongly typed languages like Java and C thus when I first saw JavaScript I was little taken aback by the fact that you don\u2019t have to declare the type of your variable before using it. I see the advantages, it does lend itself to easily start programming and I believe if you are doing some sort of algorithm coding problem it will save you a ton of declaration code and syntaxes you need to remember. JavaScript also makes complex code difficult to debug especially if its poorly documented.<br>In my search for a solution I stumbled upon TypeScript and this is an article about a beginner\u2019s review of TypeScript and I have formatted it in a question answer way in order of how I was thinking about TypeScript.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>What is TypeScript<\/strong>?<\/li><\/ul>\n\n\n\n<p>TypeScript is a strongly typed programming language that builds on JavaScript , giving you better tooling at any scale. (https:\/\/www.TypeScriptlang.org)<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>How to install TypeScript<\/strong>?<\/li><\/ul>\n\n\n\n<p>There are various resources on the internet to install TypeScript , I use the Atom IDE so these are the steps I followed:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>1 Select Atom -> Preferences -> Install<\/li><li>2. Search for \u201cTypeScript\u201d, and the package atom-TypeScript is shown which has the highest number of installs (1.9 M when I was looking)<\/li><li>3. Search for atom-ide-ui and install it<\/li><li>4. You are all set<\/li><\/ul>\n\n\n\n<p>Other ways to install TypeScript can be found at &#8211; <a href=\"https:\/\/www.TypeScriptlang.org\/download\" target=\"_blank\" rel=\"noopener\">https:\/\/www.TypeScriptlang.org\/download<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>How to start writing some TypeScript code?<\/strong><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Create a file in Atom with the .ts extension<\/li><li>Paste below lines of code :<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const obj = { width: 10, height: 15 };\nconst area = obj.width * obj.height;\nconsole.log(area)<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>In Atom click on packages and click build, this will create a .js file from the TypeScript file and you can run this file if you have the script package installed in Atom<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>How is this better than Javascript?<\/strong><\/li><\/ul>\n\n\n\n<p>Now lets see the power of TypeScript, in the above code replace the second line of code as below :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const area = obj.width * obj.heigth;<\/code><\/pre>\n\n\n\n<p>In regular JavaScript this will not show any error until you run the script when it will return result as NaN since it will consider obj.heigth as a new property of obj that has not been set<br>In TypeScript you will see a swiggly red line under the obj.heigth which will inform you that height is not a property that exists thus saving you a lot of pain when trying to debug complex programs<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Why would I not use TypeScript?<\/strong><ul><li>It can be a little inconvenient to keep compiling your code to create JavaScript file<\/li><li>Reuse of JavaScript libraries is additional work (check :\u00a0<a href=\"https:\/\/www.techiediaries.com\/use-external-javascript-libraries-typescript-projects\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.techiediaries.com\/use-external-javascript-libraries-typescript-projects\/<\/a>)<\/li><li>Can be an overkill for small projects<\/li><\/ul><\/li><\/ul>\n\n\n\n<p>Overall I read that TypeScript is the way to go when you are dealing with large projects with multiple developers, and I see the benefits of this having experienced the difficulties in debugging python code, so I will be starting to use TypeScript as and when it\u2019s appropriate to write JavaScript code.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">References:<\/h6>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.TypeScriptlang.org\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.TypeScriptlang.org<\/a><\/li><li><a href=\"https:\/\/atom.io\/packages\/atom-TypeScript\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/atom.io\/packages\/atom-TypeScript<\/a><\/li><li><a href=\"https:\/\/www.quora.com\/If-TypeScript-is-a-superset-of-JavaScript-why-do-people-still-use-JavaScript\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.quora.com\/If-TypeScript-is-a-superset-of-JavaScript-why-do-people-still-use-JavaScript<\/a><\/li><\/ul>\n\n\n\n<p>Blog created by Ragesh<\/p>\n","protected":false},"excerpt":{"rendered":"<p>My background in programming languages has been strongly typed languages like Java and C thus when I first saw JavaScript I was little taken aback by the fact that you don\u2019t have to declare the type of your variable before using it. I see the advantages, it does lend itself to easily start programming and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[20],"tags":[],"class_list":["post-426","post","type-post","status-publish","format-standard","hentry","category-software"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nikspace.co.in\/index.php?rest_route=\/wp\/v2\/posts\/426","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikspace.co.in\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikspace.co.in\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikspace.co.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikspace.co.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=426"}],"version-history":[{"count":2,"href":"https:\/\/nikspace.co.in\/index.php?rest_route=\/wp\/v2\/posts\/426\/revisions"}],"predecessor-version":[{"id":428,"href":"https:\/\/nikspace.co.in\/index.php?rest_route=\/wp\/v2\/posts\/426\/revisions\/428"}],"wp:attachment":[{"href":"https:\/\/nikspace.co.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=426"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikspace.co.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=426"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikspace.co.in\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}