{"id":3246,"date":"2019-11-23T14:42:00","date_gmt":"2019-11-23T14:42:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=3246"},"modified":"2019-11-27T14:50:58","modified_gmt":"2019-11-27T14:50:58","slug":"learn-typescript-in-30-minutes","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/technology\/learn-typescript-in-30-minutes\/","title":{"rendered":"Learn TypeScript in 30 Minutes"},"content":{"rendered":"\n<p><strong>TypeScript <\/strong>is a compile-to-JavaScript language designed for developers who build large and complex apps. It inherits many programming concepts from languages such as <strong>C#<\/strong> and <strong>Java <\/strong>that add more discipline and order to the otherwise very relaxed and free-typed <strong>JavaScript<\/strong>.<\/p>\n\n\n\n<p>This <strong>tutorial <\/strong>is meant for the people who know <strong>JavaScript <\/strong>well but are still <strong>beginners <\/strong>when it comes to <strong>TypeScript<\/strong>. We&#8217;ve covered most of the basics and key features while including lots of <strong>examples <\/strong>with commented code to help you see the language in action.<strong> So, Let&#8217;s begin!<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"3257\" data-permalink=\"https:\/\/azoora.com\/blog\/technology\/learn-typescript-in-30-minutes\/attachment\/typescript-benefits\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-benefits.jpg\" data-orig-size=\"785,240\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"typescript-benefits\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-benefits-300x92.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-benefits.jpg\" loading=\"lazy\" width=\"785\" height=\"240\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-benefits.jpg\" alt=\"\" class=\"wp-image-3257\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-benefits.jpg 785w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-benefits-300x92.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-benefits-768x235.jpg 768w\" sizes=\"(max-width: 785px) 100vw, 785px\" \/><\/figure>\n\n\n\n<h2>The Benefits of Using TypeScript<\/h2>\n\n\n\n<p>JavaScript is pretty good as it is and you may wonder <em>Do I really need to learn TypeScript?<\/em> Technically, you do not <em>need<\/em> to learn <strong>TypeScript <\/strong>to be a good developer, most people do just fine without it. However, working with TypeScript definitely has its benefits:<\/p>\n\n\n\n<ul><li>Due to the static typing, code written in TypeScript is more predictable, and is generally easier to debug.<\/li><li>Makes it easier to organize the code base for very large and complicated apps thanks to modules, namespaces and strong OOP support.<\/li><li>TypeScript has a compilation step to JavaScript that catches all kinds of errors before they reach runtime and break something.<\/li><li>The upcoming Angular 2 framework is written in TypeScript and it&#8217;s recommended that developers use the language in their projects as well.<\/li><\/ul>\n\n\n\n<p>The last point is actually the most important to many people and is the main reason to get them into TypeScript. <strong>Angular 2<\/strong> is one of the <strong>hottest frameworks <\/strong>right now and although developers can use regular JavaScript with it, a majority of the tutorials and examples are written in TS. As Angular 2 expands its community, it&#8217;s natural that more and more people will be picking up TypeScript.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.google.com\/trends\/explore#q=TypeScript\" target=\"_blank\" rel=\"noreferrer noopener\"><img data-attachment-id=\"3248\" data-permalink=\"https:\/\/azoora.com\/blog\/technology\/learn-typescript-in-30-minutes\/attachment\/typescript-trend\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-trend.jpg\" data-orig-size=\"1087,405\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"typescript-trend\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-trend-300x112.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-trend-1024x382.jpg\" loading=\"lazy\" width=\"1024\" height=\"382\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-trend-1024x382.jpg\" alt=\"\" class=\"wp-image-3248\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-trend-1024x382.jpg 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-trend-300x112.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-trend-768x286.jpg 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-trend.jpg 1087w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"3259\" data-permalink=\"https:\/\/azoora.com\/blog\/technology\/learn-typescript-in-30-minutes\/attachment\/typescript-installation\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-installation.jpg\" data-orig-size=\"785,240\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"typescript-installation\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-installation-300x92.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-installation.jpg\" loading=\"lazy\" width=\"785\" height=\"240\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-installation.jpg\" alt=\"\" class=\"wp-image-3259\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-installation.jpg 785w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-installation-300x92.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-installation-768x235.jpg 768w\" sizes=\"(max-width: 785px) 100vw, 785px\" \/><\/figure>\n\n\n\n<h2>Installing TypeScript<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>You will need <strong>Node.js<\/strong> and <strong>Npm <\/strong>for this <strong>tutorial<\/strong>. Go <a href=\"https:\/\/docs.npmjs.com\/getting-started\/installing-node\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a> if you don&#8217;t have them installed.<\/p><\/blockquote>\n\n\n\n<p>The easiest way to setup <strong>TypeScript <\/strong>is via <a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">npm<\/a>. Using the command below we can install the TypeScript package globally, making the TS compiler available in all of our projects:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install -g typescript<\/pre>\n\n\n\n<p>Try opening a terminal anywhere and running <code>tsc -v<\/code> to see if it has been properly installed.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">tsc -v\nVersion 1.8.10<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"3249\" data-permalink=\"https:\/\/azoora.com\/blog\/technology\/learn-typescript-in-30-minutes\/attachment\/typescript-text-editors\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-text-editors.jpg\" data-orig-size=\"785,240\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"typescript-text-editors\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-text-editors-300x92.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-text-editors.jpg\" loading=\"lazy\" width=\"785\" height=\"240\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-text-editors.jpg\" alt=\"\" class=\"wp-image-3249\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-text-editors.jpg 785w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-text-editors-300x92.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-text-editors-768x235.jpg 768w\" sizes=\"(max-width: 785px) 100vw, 785px\" \/><\/figure>\n\n\n\n<h2>Text Editors With TypeScript Support<\/h2>\n\n\n\n<p><strong>TypeScript <\/strong>is an <strong>open-source <\/strong>project but is developed and maintained by <strong>Microsoft <\/strong>and as such was originally supported only in Microsoft&#8217;s <a href=\"https:\/\/www.visualstudio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Visual Studio<\/a> platform. Nowadays, there are a lot more text editors and IDEs that either natively or through plugins offer support for the TypeScript syntax, auto-complete suggestions, error catching, and even built-in compilers.<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Visual Studio Code<\/a> &#8211; Microsoft&#8217;s other, lightweight open-source code editor. TypeScript support is built in.<\/li><li>Official <a href=\"https:\/\/github.com\/Microsoft\/TypeScript-Sublime-Plugin\" target=\"_blank\" rel=\"noreferrer noopener\">Free Plugin<\/a> for Sublime Text.<\/li><li>The latest version of <a href=\"https:\/\/www.jetbrains.com\/webstorm\/\" target=\"_blank\" rel=\"noreferrer noopener\">WebStorm<\/a> comes with built in support.<\/li><li><a href=\"https:\/\/github.com\/Microsoft\/TypeScript\/wiki\/TypeScript-Editor-Support\" target=\"_blank\" rel=\"noreferrer noopener\">More<\/a> including Vim, Atom, Emacs and others.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"3255\" data-permalink=\"https:\/\/azoora.com\/blog\/technology\/learn-typescript-in-30-minutes\/attachment\/typescript-compilation\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-compilation.jpg\" data-orig-size=\"785,240\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"typescript-compilation\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-compilation-300x92.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-compilation.jpg\" loading=\"lazy\" width=\"785\" height=\"240\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-compilation.jpg\" alt=\"\" class=\"wp-image-3255\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-compilation.jpg 785w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-compilation-300x92.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-compilation-768x235.jpg 768w\" sizes=\"(max-width: 785px) 100vw, 785px\" \/><\/figure>\n\n\n\n<h2>Compiling to JavaScript<\/h2>\n\n\n\n<p>TypeScript is written in <strong>.ts<\/strong> files (or .tsx for JSX), which can&#8217;t be used directly in the browser and need to be translated to vanilla .js first. This compilation process can be done in a number of different ways:<\/p>\n\n\n\n<ul><li>In the terminal using the previously mentioned command line tool <code>tsc<\/code>.<\/li><li>Directly in Visual Studio or some of the other IDEs and text editors.<\/li><li>Using automated task runners such as <a href=\"http:\/\/gulpjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">gulp<\/a>.<\/li><\/ul>\n\n\n\n<p>We found the first way to be easiest and most beginner friendly, so that&#8217;s what we&#8217;re going to use in our lesson.<\/p>\n\n\n\n<p>The following command takes a TypeScript file named <em>main.ts<\/em> and translates it into its JavaScript version <em>main.js<\/em>. If <em>main.js<\/em> already exists it will be overwritten.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">tsc main.ts<\/pre>\n\n\n\n<p>We can also compile multiple files at once by listing all of them or by applying wildcards:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"># Will result in separate .js files: main.js worker.js.\ntsc main.ts worker.ts    \n\n# Compiles all .ts files in the current folder. Does NOT work recursively.\ntsc *.ts<\/pre>\n\n\n\n<p>We can also use the <code>--watch<\/code> option to automatically compile a TypeScript file when changes are made:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"># Initializes a watcher process that will keep main.js up to date.\ntsc main.ts --watch<\/pre>\n\n\n\n<p>More advanced TypeScript users can also create a<em> tsconfig.json<\/em> file, consisting of various build settings. A configuration file is very handy when working on large projects with lots of .ts files since it somewhat automates the process. You can read more about <em>tsconfig.json<\/em> in the TypeScript docs <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/tsconfig-json.html\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"3250\" data-permalink=\"https:\/\/azoora.com\/blog\/technology\/learn-typescript-in-30-minutes\/attachment\/typescript-static-typing\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-static-typing.jpg\" data-orig-size=\"785,240\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"typescript-static-typing\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-static-typing-300x92.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-static-typing.jpg\" loading=\"lazy\" width=\"785\" height=\"240\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-static-typing.jpg\" alt=\"\" class=\"wp-image-3250\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-static-typing.jpg 785w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-static-typing-300x92.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-static-typing-768x235.jpg 768w\" sizes=\"(max-width: 785px) 100vw, 785px\" \/><\/figure>\n\n\n\n<h2>Static Typing<\/h2>\n\n\n\n<p>A very distinctive feature of TypeScript is the support of static typing. This means that you can declare the types of variables, and the compiler will make sure that they aren&#8217;t assigned the wrong types of values. If type declarations are omitted, they will be inferred automatically from your code.<\/p>\n\n\n\n<p>Here is an example. Any variable, function argument or return value can have its type defined on initialization:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var burger: string = 'hamburger',     \/\/ String \n    calories: number = 300,           \/\/ Numeric\n    tasty: boolean = true;            \/\/ Boolean\n\n\/\/ Alternatively, you can omit the type declaration:\n\/\/ var burger = 'hamburger';\n\n\/\/ The function expects a string and an integer.\n\/\/ It doesn't return anything so the type of the function itself is void.\n\nfunction speak(food: string, energy: number): void {\n  console.log(\"Our \" + food + \" has \" + energy + \" calories.\");\n}\n\nspeak(burger, calories);<\/pre>\n\n\n\n<p>Because TypeScript is compiled to JavaScript, and the latter has no idea what types are, they are completely removed:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ JavaScript code from the above TS example.\n\nvar burger = 'hamburger',\n    calories = 300, \n    tasty = true; \n\nfunction speak(food, energy) {\n    console.log(\"Our \" + food + \" has \" + energy + \" calories.\");\n}\n\nspeak(burger, calories);<\/pre>\n\n\n\n<p>However, if we try to do something illegal, on compilation <code>tsc<\/code> will warn us that there is an error in our code. For example:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ The given type is boolean, the provided value is a string.\nvar tasty: boolean = \"I haven't tried it yet\";<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">main.ts(1,5): error TS2322: Type 'string' is not assignable to type 'boolean'.<\/pre>\n\n\n\n<p>It will also warn us if we pass the wrong argument to a function:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function speak(food: string, energy: number): void{\n  console.log(\"Our \" + food + \" has \" + energy + \" calories.\");\n}\n\n\/\/ Arguments don't match the function parameters.\nspeak(\"tripple cheesburger\", \"a ton of\");<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">main.ts(5,30): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.<\/pre>\n\n\n\n<p>Here are some of the most commonly used data types:<\/p>\n\n\n\n<ul><li>Number &#8211; All numeric values are represented by the number type, there aren&#8217;t separate definitions for integers, floats or others.<\/li><li>String &#8211; The text type, just like in vanilla JS strings can be surrounded by &#8216;single quotes&#8217; or &#8220;double quotes&#8221;.<\/li><li>Boolean &#8211; <code>true<\/code> or <code>false<\/code>, using 0 and 1 will cause a compilation error.<\/li><li>Any &#8211; A variable with this type can have it&#8217;s value set to a string, number, or <strong><em>any<\/em><\/strong>thing else.<\/li><li>Arrays &#8211; Has two possible syntaxes: <code>my_arr: number[];<\/code> or <code>my_arr: Array&lt;number&gt;<\/code>.<\/li><li>Void &#8211; Used on function that don&#8217;t return anything.<\/li><\/ul>\n\n\n\n<p>To see a list of all of the available types, go to the official TypeScript docs &#8211; <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/basic-types.html\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"3252\" data-permalink=\"https:\/\/azoora.com\/blog\/technology\/learn-typescript-in-30-minutes\/attachment\/typescript-interfaces\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-interfaces.jpg\" data-orig-size=\"785,240\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"typescript-interfaces\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-interfaces-300x92.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-interfaces.jpg\" loading=\"lazy\" width=\"785\" height=\"240\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-interfaces.jpg\" alt=\"\" class=\"wp-image-3252\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-interfaces.jpg 785w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-interfaces-300x92.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-interfaces-768x235.jpg 768w\" sizes=\"(max-width: 785px) 100vw, 785px\" \/><\/figure>\n\n\n\n<h2>Interfaces<\/h2>\n\n\n\n<p>Interfaces are used to type-check whether an object fits a certain structure. By defining an interface we can name a specific combination of variables, making sure that they will always go together. When translated to JavaScript, interfaces disappear &#8211; their only purpose is to help in the development stage.<\/p>\n\n\n\n<p>In the below example we define a simple interface to type-check a function&#8217;s arguments:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Here we define our Food interface, its properties, and their types.\ninterface Food {\n    name: string;\n    calories: number;\n}\n\n\/\/ We tell our function to expect an object that fulfills the Food interface. \n\/\/ This way we know that the properties we need will always be available.\nfunction speak(food: Food): void{\n  console.log(\"Our \" + food.name + \" has \" + food.calories + \" calories.\");\n}\n\n\/\/ We define an object that has all of the properties the Food interface expects.\n\/\/ Notice that types will be inferred automatically.\nvar ice_cream = {\n  name: \"ice cream\", \n  calories: 200\n}\n\nspeak(ice_cream);<\/pre>\n\n\n\n<p>The order of the properties does NOT matter. We just need the required properties to be <strong>present<\/strong> and to be <strong>the right type<\/strong>. If something is missing, has the wrong type, or is named differently, the compiler will warn us.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">interface Food {\n    name: string;\n    calories: number;\n}\n\nfunction speak(food: Food): void{\n  console.log(\"Our \" + food.name + \" has \" + food.calories + \" grams.\");\n}\n\n\/\/ We've made a deliberate mistake and name is misspelled as nmae.\nvar ice_cream = {\n  nmae: \"ice cream\", \n  calories: 200\n}\n\nspeak(ice_cream);<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">main.ts(16,7): error TS2345: Argument of type '{ nmae: string; calories: number; } \nis not assignable to parameter of type 'Food'. \nProperty 'name' is missing in type '{ nmae: string; calories: number; }'.<\/pre>\n\n\n\n<p>This is a beginners guide so we won&#8217;t be going into more detail about interfaces. However, there is a lot more to them than what we&#8217;ve mentioned here so we recommend you check out the TypeScript docs &#8211; <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/interfaces.html\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"3256\" data-permalink=\"https:\/\/azoora.com\/blog\/technology\/learn-typescript-in-30-minutes\/attachment\/typescript-classes\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-classes.jpg\" data-orig-size=\"785,240\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"typescript-classes\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-classes-300x92.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-classes.jpg\" loading=\"lazy\" width=\"785\" height=\"240\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-classes.jpg\" alt=\"\" class=\"wp-image-3256\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-classes.jpg 785w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-classes-300x92.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-classes-768x235.jpg 768w\" sizes=\"(max-width: 785px) 100vw, 785px\" \/><\/figure>\n\n\n\n<h2>Classes<\/h2>\n\n\n\n<p>When building large scale apps, the object oriented style of programming is preferred by many developers, most notably in languages such as Java or C#. TypeScript offers a class system that is very similar to the one in these languages, including inheritance, abstract classes, interface implementations, setters\/getters, and more.<\/p>\n\n\n\n<p>It&#8217;s also fair to mention that since the most recent JavaScript update (ECMAScript 2015), classes are native to vanilla JS and can be used without TypeScript. The two implementation are very similar but have their differences, TypeScript being a bit more strict.<\/p>\n\n\n\n<p>Continuing with the food theme, here is a simple TypeScript class:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">class Menu {\n  \/\/ Our properties:\n  \/\/ By default they are public, but can also be private or protected.\n  items: Array&lt;string&gt;;  \/\/ The items in the menu, an array of strings.\n  pages: number;         \/\/ How many pages will the menu be, a number.\n\n  \/\/ A straightforward constructor. \n  constructor(item_list: Array&lt;string&gt;, total_pages: number) {\n    \/\/ The this keyword is mandatory.\n    this.items = item_list;    \n    this.pages = total_pages;\n  }\n\n  \/\/ Methods\n  list(): void {\n    console.log(\"Our menu for today:\");\n    for(var i=0; i&lt;this.items.length; i++) {\n      console.log(this.items[i]);\n    }\n  }\n\n} \n\n\/\/ Create a new instance of the Menu class.\nvar sundayMenu = new Menu([\"pancakes\",\"waffles\",\"orange juice\"], 1);\n\n\/\/ Call the list method.\nsundayMenu.list();<\/pre>\n\n\n\n<p>Anyone who has written at least a bit of Java or C# should find this syntax comfortably familiar. The same goes for inheritance:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">class HappyMeal extends Menu {\n  \/\/ Properties are inherited\n\n  \/\/ A new constructor has to be defined.\n  constructor(item_list: Array&lt;string&gt;, total_pages: number) {\n    \/\/ In this case we want the exact same constructor as the parent class (Menu), \n    \/\/ To automatically copy it we can call super() - a reference to the parent's constructor.\n    super(item_list, total_pages);\n  }\n\n  \/\/ Just like the properties, methods are inherited from the parent.\n  \/\/ However, we want to override the list() function so we redefine it.\n  list(): void{\n    console.log(\"Our special menu for children:\");\n    for(var i=0; i&lt;this.items.length; i++) {\n      console.log(this.items[i]);\n    }\n\n  }\n}\n\n\/\/ Create a new instance of the HappyMeal class.\nvar menu_for_children = new HappyMeal([\"candy\",\"drink\",\"toy\"], 1);\n\n\/\/ This time the log message will begin with the special introduction.\nmenu_for_children.list();<\/pre>\n\n\n\n<p>For a more in-depth look at classes in TS you can read the documentation &#8211; <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/classes.html\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"3253\" data-permalink=\"https:\/\/azoora.com\/blog\/technology\/learn-typescript-in-30-minutes\/attachment\/typescript-generics\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-generics.jpg\" data-orig-size=\"785,240\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"typescript-generics\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-generics-300x92.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-generics.jpg\" loading=\"lazy\" width=\"785\" height=\"240\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-generics.jpg\" alt=\"\" class=\"wp-image-3253\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-generics.jpg 785w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-generics-300x92.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-generics-768x235.jpg 768w\" sizes=\"(max-width: 785px) 100vw, 785px\" \/><\/figure>\n\n\n\n<h2>Generics<\/h2>\n\n\n\n<p>Generics are templates that allow the same function to accept arguments of various different types. Creating reusable components using generics is better than using the <code>any<\/code> data type, as generics preserve the types of the variables that go in and out of them.<\/p>\n\n\n\n<p>A quick example would be a script that receives an argument and returns an array containing that same argument.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ The &lt;T&gt; after the function name symbolizes that it's a generic function.\n\/\/ When we call the function, every instance of T will be replaced with the actual provided type.\n\n\/\/ Receives one argument of type T,\n\/\/ Returns an array of type T.\n\nfunction genericFunc&lt;T&gt;(argument: T): T[] {    \n  var arrayOfT: T[] = [];    \/\/ Create empty array of type T.\n  arrayOfT.push(argument);   \/\/ Push, now arrayOfT = [argument].\n  return arrayOfT;\n}\n\nvar arrayFromString = genericFunc&lt;string&gt;(\"beep\");\nconsole.log(arrayFromString[0]);         \/\/ \"beep\"\nconsole.log(typeof arrayFromString[0])   \/\/ String\n\nvar arrayFromNumber = genericFunc(42);\nconsole.log(arrayFromNumber[0]);         \/\/ 42\nconsole.log(typeof arrayFromNumber[0])   \/\/ number<\/pre>\n\n\n\n<p>The first time we called the function we manually set the type to string. This isn&#8217;t required as the compiler can see what argument has been passed and automatically decide what type suits it best, like in the second call. Although it&#8217;s not mandatory, providing the type every time is considered good practice as the compiler might fail to guess the right type in more complex scenarios.<\/p>\n\n\n\n<p>The TypeScript docs include a couple of advanced examples including generics classes, combining them with interfaces, and more. You can find them <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/generics.html\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"3251\" data-permalink=\"https:\/\/azoora.com\/blog\/technology\/learn-typescript-in-30-minutes\/attachment\/typescript-modules\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-modules.jpg\" data-orig-size=\"785,240\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"typescript-modules\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-modules-300x92.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-modules.jpg\" loading=\"lazy\" width=\"785\" height=\"240\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-modules.jpg\" alt=\"\" class=\"wp-image-3251\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-modules.jpg 785w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-modules-300x92.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-modules-768x235.jpg 768w\" sizes=\"(max-width: 785px) 100vw, 785px\" \/><\/figure>\n\n\n\n<h2>Modules<\/h2>\n\n\n\n<p>Another important concept when working on large apps is modularity. Having your code split into many small reusable components helps your project stay organized and understandable, compared to having a single 10000-line file for everything.<\/p>\n\n\n\n<p>TypeScript introduces a syntax for exporting and importing modules, but cannot handle the actual wiring between files. To enable external modules TS relies on third-party libraries: <a href=\"http:\/\/requirejs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">require.js<\/a> for browser apps and <a href=\"https:\/\/en.wikipedia.org\/wiki\/CommonJS\" target=\"_blank\" rel=\"noreferrer noopener\">CommonJS<\/a> for Node.js. Let&#8217;s take a look at a simple example of TypeScript modules with require.js:<\/p>\n\n\n\n<p>We will have two files. One exports a function, the other imports and calls it.<\/p>\n\n\n\n<h3>exporter.ts<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">var sayHi = function(): void {\n    console.log(\"Hello!\");\n}\n\nexport = sayHi;<\/pre>\n\n\n\n<h3>importer.ts<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">import sayHi = require('.\/exporter');\nsayHi();<\/pre>\n\n\n\n<p>Now we need to download require.js and include it in a script tag &#8211; see how <a href=\"http:\/\/requirejs.org\/docs\/start.html\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>. The last step is to compile our two .ts files. An extra parameter needs to be added to tell TypeScript that we are building modules for require.js (also referred to as AMD), as opposed to CommonJS ones.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">tsc --module amd *.ts<\/pre>\n\n\n\n<p>Modules are quite complex and are out of the scope of this tutorial. If you want to continue reading about them head out to the TS docs &#8211; <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/modules.html\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"3254\" data-permalink=\"https:\/\/azoora.com\/blog\/technology\/learn-typescript-in-30-minutes\/attachment\/typescript-declaration-files\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-declaration-files.jpg\" data-orig-size=\"785,240\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"typescript-declaration-files\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-declaration-files-300x92.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-declaration-files.jpg\" loading=\"lazy\" width=\"785\" height=\"240\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-declaration-files.jpg\" alt=\"\" class=\"wp-image-3254\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-declaration-files.jpg 785w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-declaration-files-300x92.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-declaration-files-768x235.jpg 768w\" sizes=\"(max-width: 785px) 100vw, 785px\" \/><\/figure>\n\n\n\n<h2>Third-party Declaration Files<\/h2>\n\n\n\n<p>When using a library that was originally designed for regular JavaScript, we need to apply a declaration file to make that library compatible with TypeScript. A declaration file has the extension <strong>.d.ts<\/strong> and contains various information about the library and its API.<\/p>\n\n\n\n<p>TypeScript declaration files are usually written by hand, but there&#8217;s a high chance that the library you need already has a .d.ts. file created by somebody else. <a href=\"http:\/\/definitelytyped.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">DefinitelyTyped<\/a> is the biggest public repository, containing files for over a thousand libraries. There is also a popular Node.js module for managing TypeScript definitions called <a href=\"https:\/\/github.com\/typings\/typings\" target=\"_blank\" rel=\"noreferrer noopener\">Typings<\/a>.<\/p>\n\n\n\n<p>If you still need to write a declaration file yourself, this <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/writing-declaration-files.html\" target=\"_blank\" rel=\"noreferrer noopener\">guide<\/a> will get you started.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"3247\" data-permalink=\"https:\/\/azoora.com\/blog\/technology\/learn-typescript-in-30-minutes\/attachment\/typescript-typescript-2-0\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-typescript-2.0.jpg\" data-orig-size=\"785,240\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"typescript-typescript-2.0\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-typescript-2.0-300x92.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-typescript-2.0.jpg\" loading=\"lazy\" width=\"785\" height=\"240\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-typescript-2.0.jpg\" alt=\"\" class=\"wp-image-3247\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-typescript-2.0.jpg 785w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-typescript-2.0-300x92.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/typescript-typescript-2.0-768x235.jpg 768w\" sizes=\"(max-width: 785px) 100vw, 785px\" \/><\/figure>\n\n\n\n<h2>Upcoming Features in TypeScript 2.0<\/h2>\n\n\n\n<p>TypeScript is still under active development and is evlolving constantly. At the time of the writing of this tutorial the LTS version is 1.8.10, but Microsoft have already released a Beta for TypeScript 2.0. It&#8217;s available for public testing and you can try it out now:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install -g typescript@beta<\/pre>\n\n\n\n<p>It introduces some handy new concepts such as:<\/p>\n\n\n\n<ul><li>Non-nullable types flag which prevents some variables from having their value set to <code>null<\/code> or <code>undefined<\/code>.<\/li><li>New improved system for getting declaration files directly with an <code>npm install<\/code>.<\/li><li>Control flow type analysis that catches errors previously missed by the compiler.<\/li><li>Some innovations in the module export\/import syntax.<\/li><\/ul>\n\n\n\n<p>Another long-awaited feature is the ability to control the flow of asynchronous functions in an <code>async\/await<\/code> block. This should be available in a future 2.1 update.<\/p>\n\n\n\n<h2>Further Reading<\/h2>\n\n\n\n<p>The amount of information in the official docs can be a bit overwhelming at first, but the benefits of going through it will be huge. Our <strong>tutorial <\/strong>is to be used as an introduction, so we haven&#8217;t covered all of the chapters from the <strong>TypeScript documentation<\/strong>. Here are some of the more useful concepts that we&#8217;ve skipped:<\/p>\n\n\n\n<ul><li>Namespaces &#8211; <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/namespaces.html\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/li><li>Enums &#8211; <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/enums.html\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/li><li>Advanced Types and Type Guards &#8211; <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/advanced-types.html\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/li><li>Writing JSX in TypeScript &#8211; <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/jsx.html\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/li><\/ul>\n\n\n\n<h2>Conclusion<\/h2>\n\n\n\n<p>We hope that you have liked this tutorial.<\/p>\n\n\n\n<p>If you still have any questions about TypeScript please feel free to leave a comment below!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>TypeScript is a compile-to-JavaScript language designed for developers who build large and complex apps. It inherits many programming concepts from languages such as C# and Java that add more discipline and order to the otherwise very relaxed and free-typed JavaScript. This tutorial is meant for the people who know JavaScript well but are still beginners [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":3262,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[14,62],"tags":[137,110],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/learn-typescript-in-30-minutes.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-Qm","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3246"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=3246"}],"version-history":[{"count":2,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3246\/revisions"}],"predecessor-version":[{"id":3261,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3246\/revisions\/3261"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/3262"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=3246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=3246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=3246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}