[{"data":1,"prerenderedAt":2450},["ShallowReactive",2],{"technical-blog-page-content":3,"technical-blog-post-javascript-to-typescript":30,"technical-blog-author-javascript-to-typescript":6},{"id":4,"title":5,"author":6,"blogTags":6,"body":7,"customExcerpt":6,"date":6,"description":11,"excerpt":6,"extension":14,"h1":15,"image":6,"meta":16,"navigation":17,"path":18,"readingStats":19,"seo":24,"stem":28,"__hash__":29},"technicalBlogPage\u002Ftechnical-blog-page.md","Technical Blog Page",null,{"type":8,"value":9,"toc":10},"minimark",[],{"title":11,"searchDepth":12,"depth":12,"links":13},"",2,[],"md","Technical insights, stories and opinions from our team of consultants, analysts, developers and testers.",{},true,"\u002Ftechnical-blog-page",{"text":20,"minutes":21,"time":22,"words":23},"1 min read",0.29,17400,58,{"title":25,"description":26,"keywords":27},"Technology Insights | Audacia Digital Transformation","Technical insights, stories and opinions from leading software development company Audacia's teams of consultants, analysts, developers and testers.","Digital transformation technology, Technology blog, Technology insights, software development blog, software engineering blog","technical-blog-page","XD1gWfEur9Mu64WptQ5pF-e7Ej60LGiq7sRC58wOAeQ",{"id":31,"title":32,"author":33,"blogTags":34,"body":37,"customExcerpt":2433,"date":2434,"description":11,"excerpt":2435,"extension":14,"h1":6,"image":2436,"meta":2437,"navigation":17,"path":2438,"readingStats":2439,"seo":2444,"stem":2448,"__hash__":2449},"technicalBlog\u002Ftechnical-blog\u002Fjavascript-to-typescript.md","Software Development Languages: JavaScript to TypeScript","Liam Ward",[35,36],"JavaScript","TypeScript",{"type":8,"value":38,"toc":2424},[39,44,48,51,54,58,61,75,248,262,271,274,285,290,293,298,301,417,420,463,467,470,514,518,553,637,641,644,696,699,773,776,865,869,878,881,899,909,970,998,1001,1007,1156,1175,1179,1182,1190,1193,1325,1328,1449,1452,1464,1601,1605,1616,1812,1815,2119,2123,2126,2188,2205,2258,2282,2302,2349,2352,2356,2359,2390,2394,2399,2413,2420],[40,41,43],"h2",{"id":42},"what-is-typescript-in-software-development","What is Typescript in software development?",[45,46,47],"p",{},"TypeScript is a language written by Microsoft. The latest version of TypeScript (2.3) was released on 27\u002F04\u002F2017.",[45,49,50],{},"TypeScript is to JavaScript what which SASS and LESS are to CSS - a super-set of the language with additional functionality to improve the coding experience. ",[45,52,53],{},"TypeScript is cross-compiled into JavaScript so that it can be used in web browsers. A map file is created to signify the relationship between the generated JavaScript, and the original TypeScript, so that it can be debugged in with browser development tools.",[40,55,57],{"id":56},"how-does-typescript-work-in-software-development-projects","How does Typescript work in software development projects?",[45,59,60],{},"TypeScript is usually configured using a json configuration file called tsconfig.json.",[45,62,63,64,68,72,74],{},"When a",[65,66,67],"span",{}," ",[69,70,71],"em",{},"tsconfig.json",[65,73,67],{},"file is present in a directory it indicates the root of a TypeScript project. An example is given below:",[76,77,81],"pre",{"className":78,"code":79,"language":80,"meta":11,"style":11},"language-typescript shiki shiki-themes github-light","{\n  \"compilerOptions\": {\n      \"module\": \"system\",\n      \"noImplicitAny\": true,\n      \"removeComments\": true,\n      \"preserveConstEnums\": true,\n      \"outFile\": \"..\u002F..\u002Fbuilt\u002Flocal\u002Ftsc.js\",\n      \"sourceMap\": true\n  },\n  \"include\": [\n      \"src\u002F**\u002F*\"\n  ],\n  \"exclude\": [\n      \"node_modules\",\n      \"**\u002F*.spec.ts\"\n  ],\n  \"compileOnSave\": true\n}\n","typescript",[82,83,84,92,101,116,130,142,154,167,178,184,193,199,205,213,221,227,232,242],"code",{"__ignoreMap":11},[65,85,88],{"class":86,"line":87},"line",1,[65,89,91],{"class":90},"sgsFI","{\n",[65,93,94,98],{"class":86,"line":12},[65,95,97],{"class":96},"sYBdl","  \"compilerOptions\"",[65,99,100],{"class":90},": {\n",[65,102,104,107,110,113],{"class":86,"line":103},3,[65,105,106],{"class":96},"      \"module\"",[65,108,109],{"class":90},": ",[65,111,112],{"class":96},"\"system\"",[65,114,115],{"class":90},",\n",[65,117,119,122,124,128],{"class":86,"line":118},4,[65,120,121],{"class":96},"      \"noImplicitAny\"",[65,123,109],{"class":90},[65,125,127],{"class":126},"sYu0t","true",[65,129,115],{"class":90},[65,131,133,136,138,140],{"class":86,"line":132},5,[65,134,135],{"class":96},"      \"removeComments\"",[65,137,109],{"class":90},[65,139,127],{"class":126},[65,141,115],{"class":90},[65,143,145,148,150,152],{"class":86,"line":144},6,[65,146,147],{"class":96},"      \"preserveConstEnums\"",[65,149,109],{"class":90},[65,151,127],{"class":126},[65,153,115],{"class":90},[65,155,157,160,162,165],{"class":86,"line":156},7,[65,158,159],{"class":96},"      \"outFile\"",[65,161,109],{"class":90},[65,163,164],{"class":96},"\"..\u002F..\u002Fbuilt\u002Flocal\u002Ftsc.js\"",[65,166,115],{"class":90},[65,168,170,173,175],{"class":86,"line":169},8,[65,171,172],{"class":96},"      \"sourceMap\"",[65,174,109],{"class":90},[65,176,177],{"class":126},"true\n",[65,179,181],{"class":86,"line":180},9,[65,182,183],{"class":90},"  },\n",[65,185,187,190],{"class":86,"line":186},10,[65,188,189],{"class":96},"  \"include\"",[65,191,192],{"class":90},": [\n",[65,194,196],{"class":86,"line":195},11,[65,197,198],{"class":96},"      \"src\u002F**\u002F*\"\n",[65,200,202],{"class":86,"line":201},12,[65,203,204],{"class":90},"  ],\n",[65,206,208,211],{"class":86,"line":207},13,[65,209,210],{"class":96},"  \"exclude\"",[65,212,192],{"class":90},[65,214,216,219],{"class":86,"line":215},14,[65,217,218],{"class":96},"      \"node_modules\"",[65,220,115],{"class":90},[65,222,224],{"class":86,"line":223},15,[65,225,226],{"class":96},"      \"**\u002F*.spec.ts\"\n",[65,228,230],{"class":86,"line":229},16,[65,231,204],{"class":90},[65,233,235,238,240],{"class":86,"line":234},17,[65,236,237],{"class":96},"  \"compileOnSave\"",[65,239,109],{"class":90},[65,241,177],{"class":126},[65,243,245],{"class":86,"line":244},18,[65,246,247],{"class":90},"}\n",[45,249,250,251,253,261],{},"The config file can be used to configure a number of parameters, including files that should be ignored when compiling from TypeScript to JavaScript (for example, it is common to exclude node_modules, such that third party libraries are not re-compiled). It also allows the configuration of compilation options, such as whether to include comments when compiling. Full details can be found",[65,252,67],{},[254,255,260],"a",{"rel":256,"href":258,"target":259},[257],"noopener","https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002Ftsconfig-json.html","_blank","here",".",[45,263,264,265,267,270],{},"One option that I find particularly useful is",[65,266,67],{},[69,268,269],{},"compileOnSave",". This option and its advantages should be fairly self explanatory; when changes are made it will re-compile the TypeScript to JavaScript automatically, meaning you can just reload a web page and it will have the new version, as normal with JavaScript.",[45,272,273],{},"After TypeScript has compiled you can reference the resultant JavaScript files from HTML, or use them in a node.js solution, just as you would with native JavaScript.",[45,275,276,277,279,282,284],{},"As an alternative to compilation based on",[65,278,67],{},[69,280,281],{},"tsconfig",[65,283,67],{},"files, Webpack or Gulp can be used to bundle and minify files. and allow for further configuration options. This is particularly useful when building large single page applications using one of the leading JavaScript frameworks (e.g. Angular, Ember, React etc.).",[286,287,289],"h3",{"id":288},"constructs","Constructs",[45,291,292],{},"These constructs will help to illustrate one of the major advantages of using TypeScript over JavaScript; type safety.",[294,295,297],"h4",{"id":296},"variables","Variables",[45,299,300],{},"In TypeScript you are able to define a specific type for your variables, this promotes type-safety as you will not be able to change its value to a different type without explicit casting.",[76,302,304],{"className":78,"code":303,"language":80,"meta":11,"style":11},"var @string: string = 'New string';\n         \n\u002F\u002FThis will result in a compilation error\n@string = 1;\n \n\u002F\u002FIf you are going to define a value when initialising \n\u002F\u002Fyou will not need to define the type as this will be \n\u002F\u002Finferred\n \n\u002F\u002FThis will be a variable wtih the type of number\nvar @number = 1;\n \n\u002F\u002FThis will fail\n@number = 'String';\n",[82,305,306,330,335,341,354,359,364,369,374,378,383,396,400,405],{"__ignoreMap":11},[65,307,308,312,315,318,321,324,327],{"class":86,"line":87},[65,309,311],{"class":310},"sD7c4","var",[65,313,314],{"class":90}," @string",[65,316,317],{"class":310},":",[65,319,320],{"class":126}," string",[65,322,323],{"class":310}," =",[65,325,326],{"class":96}," 'New string'",[65,328,329],{"class":90},";\n",[65,331,332],{"class":86,"line":12},[65,333,334],{"class":90},"         \n",[65,336,337],{"class":86,"line":103},[65,338,340],{"class":339},"sAwPA","\u002F\u002FThis will result in a compilation error\n",[65,342,343,346,349,352],{"class":86,"line":118},[65,344,345],{"class":90},"@string ",[65,347,348],{"class":310},"=",[65,350,351],{"class":126}," 1",[65,353,329],{"class":90},[65,355,356],{"class":86,"line":132},[65,357,358],{"class":90}," \n",[65,360,361],{"class":86,"line":144},[65,362,363],{"class":339},"\u002F\u002FIf you are going to define a value when initialising \n",[65,365,366],{"class":86,"line":156},[65,367,368],{"class":339},"\u002F\u002Fyou will not need to define the type as this will be \n",[65,370,371],{"class":86,"line":169},[65,372,373],{"class":339},"\u002F\u002Finferred\n",[65,375,376],{"class":86,"line":180},[65,377,358],{"class":90},[65,379,380],{"class":86,"line":186},[65,381,382],{"class":339},"\u002F\u002FThis will be a variable wtih the type of number\n",[65,384,385,387,390,392,394],{"class":86,"line":195},[65,386,311],{"class":310},[65,388,389],{"class":90}," @number ",[65,391,348],{"class":310},[65,393,351],{"class":126},[65,395,329],{"class":90},[65,397,398],{"class":86,"line":201},[65,399,358],{"class":90},[65,401,402],{"class":86,"line":207},[65,403,404],{"class":339},"\u002F\u002FThis will fail\n",[65,406,407,410,412,415],{"class":86,"line":215},[65,408,409],{"class":90},"@number ",[65,411,348],{"class":310},[65,413,414],{"class":96}," 'String'",[65,416,329],{"class":90},[45,418,419],{},"It is important to note that there is an \"any\" type that can be used to allow similar duck-typing functionality to plain JavaScript.",[76,421,423],{"className":78,"code":422,"language":80,"meta":11,"style":11},"var @variable: any = 'New string';\n         \n\u002F\u002FThis will no longer result in compilation error\n@variable = 1;\n",[82,424,425,443,447,452],{"__ignoreMap":11},[65,426,427,429,432,434,437,439,441],{"class":86,"line":87},[65,428,311],{"class":310},[65,430,431],{"class":90}," @variable",[65,433,317],{"class":310},[65,435,436],{"class":126}," any",[65,438,323],{"class":310},[65,440,326],{"class":96},[65,442,329],{"class":90},[65,444,445],{"class":86,"line":12},[65,446,334],{"class":90},[65,448,449],{"class":86,"line":103},[65,450,451],{"class":339},"\u002F\u002FThis will no longer result in compilation error\n",[65,453,454,457,459,461],{"class":86,"line":118},[65,455,456],{"class":90},"@variable ",[65,458,348],{"class":310},[65,460,351],{"class":126},[65,462,329],{"class":90},[294,464,466],{"id":465},"constants","Constants",[45,468,469],{},"Constants are equivalent to the newly introduced ECMAScript 2015 (JavaScript 2015) constants. It creates a read-only variable. The syntax for this is simple.",[76,471,473],{"className":78,"code":472,"language":80,"meta":11,"style":11},"const @constant = 'Constant';\n         \n\u002F\u002FThis will cause a compiler error\n@constant = 'Changed Constant';\n",[82,474,475,493,497,502],{"__ignoreMap":11},[65,476,477,480,483,486,488,491],{"class":86,"line":87},[65,478,479],{"class":310},"const",[65,481,482],{"class":90}," @",[65,484,485],{"class":126},"constant",[65,487,323],{"class":310},[65,489,490],{"class":96}," 'Constant'",[65,492,329],{"class":90},[65,494,495],{"class":86,"line":12},[65,496,334],{"class":90},[65,498,499],{"class":86,"line":103},[65,500,501],{"class":339},"\u002F\u002FThis will cause a compiler error\n",[65,503,504,507,509,512],{"class":86,"line":118},[65,505,506],{"class":90},"@constant ",[65,508,348],{"class":310},[65,510,511],{"class":96}," 'Changed Constant'",[65,513,329],{"class":90},[294,515,517],{"id":516},"let","Let",[45,519,520,521,523,525,526,528,261,530,532,534,536,537,539,541,542,544,546,547,549,261],{},"This is another concept that has an ECMAScript 6 counterpart. The syntax for this is very similar to that of",[65,522,67],{},[69,524,479],{}," and",[65,527,67],{},[69,529,311],{},[65,531,67],{},[69,533,516],{},[65,535,67],{},"differs from",[65,538,67],{},[69,540,311],{},", in that the variable will be scoped to the current code block, overcoming an often derided feature of JavaScript, wherein",[65,543,67],{},[69,545,311],{}," has a global reference. Further information can be found",[65,548,67],{},[254,550,260],{"rel":551,"href":552,"target":259},[257],"https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002Fvariable-declarations.html",[76,554,556],{"className":78,"code":555,"language":80,"meta":11,"style":11},"let a = 100;\n     \nif (input) {\n    \u002F\u002F Still okay to reference `a'\n    let b = a + 1;\n    return b;\n}\n \n\u002F\u002F Error: `b' doesn't exist here\nreturn b;\n",[82,557,558,572,577,585,590,609,617,621,625,630],{"__ignoreMap":11},[65,559,560,562,565,567,570],{"class":86,"line":87},[65,561,516],{"class":310},[65,563,564],{"class":90}," a ",[65,566,348],{"class":310},[65,568,569],{"class":126}," 100",[65,571,329],{"class":90},[65,573,574],{"class":86,"line":12},[65,575,576],{"class":90},"     \n",[65,578,579,582],{"class":86,"line":103},[65,580,581],{"class":310},"if",[65,583,584],{"class":90}," (input) {\n",[65,586,587],{"class":86,"line":118},[65,588,589],{"class":339},"    \u002F\u002F Still okay to reference `a'\n",[65,591,592,595,598,600,602,605,607],{"class":86,"line":132},[65,593,594],{"class":310},"    let",[65,596,597],{"class":90}," b ",[65,599,348],{"class":310},[65,601,564],{"class":90},[65,603,604],{"class":310},"+",[65,606,351],{"class":126},[65,608,329],{"class":90},[65,610,611,614],{"class":86,"line":144},[65,612,613],{"class":310},"    return",[65,615,616],{"class":90}," b;\n",[65,618,619],{"class":86,"line":156},[65,620,247],{"class":90},[65,622,623],{"class":86,"line":169},[65,624,358],{"class":90},[65,626,627],{"class":86,"line":180},[65,628,629],{"class":339},"\u002F\u002F Error: `b' doesn't exist here\n",[65,631,632,635],{"class":86,"line":186},[65,633,634],{"class":310},"return",[65,636,616],{"class":90},[294,638,640],{"id":639},"methods","Methods",[45,642,643],{},"In TypeScript you are able to define methods in multiple ways.",[76,645,647],{"className":78,"code":646,"language":80,"meta":11,"style":11},"let method1 = function() {\n};\n \nlet method2 = () => {\n};\n",[82,648,649,665,670,674,692],{"__ignoreMap":11},[65,650,651,653,657,659,662],{"class":86,"line":87},[65,652,516],{"class":310},[65,654,656],{"class":655},"s7eDp"," method1",[65,658,323],{"class":310},[65,660,661],{"class":310}," function",[65,663,664],{"class":90},"() {\n",[65,666,667],{"class":86,"line":12},[65,668,669],{"class":90},"};\n",[65,671,672],{"class":86,"line":103},[65,673,358],{"class":90},[65,675,676,678,681,683,686,689],{"class":86,"line":118},[65,677,516],{"class":310},[65,679,680],{"class":655}," method2",[65,682,323],{"class":310},[65,684,685],{"class":90}," () ",[65,687,688],{"class":310},"=>",[65,690,691],{"class":90}," {\n",[65,693,694],{"class":86,"line":132},[65,695,669],{"class":90},[45,697,698],{},"The second of these examples will be a familiar syntax for C# developers (being the C# Lambda syntax). Both of these methods allow you to define parameters for the constructor, along with the type that they should be, as well as a type that the method itself will return.",[76,700,702],{"className":78,"code":701,"language":80,"meta":11,"style":11},"method1($par1: string, $par2: number): string {\n     \n}\n \nmethod2 = ($par1: number, $par2: string) : number => {\n \n}\n",[82,703,704,712,716,720,724,765,769],{"__ignoreMap":11},[65,705,706,709],{"class":86,"line":87},[65,707,708],{"class":655},"method1",[65,710,711],{"class":90},"($par1: string, $par2: number): string {\n",[65,713,714],{"class":86,"line":12},[65,715,576],{"class":90},[65,717,718],{"class":86,"line":103},[65,719,247],{"class":90},[65,721,722],{"class":86,"line":118},[65,723,358],{"class":90},[65,725,726,729,731,734,738,740,743,746,749,751,753,756,758,760,763],{"class":86,"line":132},[65,727,728],{"class":655},"method2",[65,730,323],{"class":310},[65,732,733],{"class":90}," (",[65,735,737],{"class":736},"sqxcx","$par1",[65,739,317],{"class":310},[65,741,742],{"class":126}," number",[65,744,745],{"class":90},", ",[65,747,748],{"class":736},"$par2",[65,750,317],{"class":310},[65,752,320],{"class":126},[65,754,755],{"class":90},") ",[65,757,317],{"class":310},[65,759,742],{"class":126},[65,761,762],{"class":310}," =>",[65,764,691],{"class":90},[65,766,767],{"class":86,"line":144},[65,768,358],{"class":90},[65,770,771],{"class":86,"line":156},[65,772,247],{"class":90},[45,774,775],{},"Another advantage of TypeScript over previous JavaScript versions is the addition of default values for parameters, it also provides a friendly syntax for optional parameters (in JavaScript all parameters are optional by design, which has led to many a bug).",[76,777,779],{"className":78,"code":778,"language":80,"meta":11,"style":11},"method1($par1: string, $par2: number = 1) : string {\n     \n}\n \n\u002F\u002FThis would result in a compilation error, as in C#\nmethod2($par1: string = 'String', $par2: number) : string {\n \n}\n \n\u002F\u002FIn this instance $par2 is optional\nmethod3($par1: string, $par2?: number) :string{\n \n}\n",[82,780,781,795,799,803,807,812,826,830,834,838,843,857,861],{"__ignoreMap":11},[65,782,783,785,788,790,792],{"class":86,"line":87},[65,784,708],{"class":655},[65,786,787],{"class":90},"($par1: string, $par2: number ",[65,789,348],{"class":310},[65,791,351],{"class":126},[65,793,794],{"class":90},") : string {\n",[65,796,797],{"class":86,"line":12},[65,798,576],{"class":90},[65,800,801],{"class":86,"line":103},[65,802,247],{"class":90},[65,804,805],{"class":86,"line":118},[65,806,358],{"class":90},[65,808,809],{"class":86,"line":132},[65,810,811],{"class":339},"\u002F\u002FThis would result in a compilation error, as in C#\n",[65,813,814,816,819,821,823],{"class":86,"line":144},[65,815,728],{"class":655},[65,817,818],{"class":90},"($par1: string ",[65,820,348],{"class":310},[65,822,414],{"class":96},[65,824,825],{"class":90},", $par2: number) : string {\n",[65,827,828],{"class":86,"line":156},[65,829,358],{"class":90},[65,831,832],{"class":86,"line":169},[65,833,247],{"class":90},[65,835,836],{"class":86,"line":180},[65,837,358],{"class":90},[65,839,840],{"class":86,"line":186},[65,841,842],{"class":339},"\u002F\u002FIn this instance $par2 is optional\n",[65,844,845,848,851,854],{"class":86,"line":195},[65,846,847],{"class":655},"method3",[65,849,850],{"class":90},"($par1: string, $par2",[65,852,853],{"class":310},"?:",[65,855,856],{"class":90}," number) :string{\n",[65,858,859],{"class":86,"line":201},[65,860,358],{"class":90},[65,862,863],{"class":86,"line":207},[65,864,247],{"class":90},[294,866,868],{"id":867},"classes","Classes",[45,870,871,872,874,877],{},"Classes behave exactly as in any other language, they act as containers for properties and methods. No longer do you need to leverage functions, and the revealing module pattern, to implement",[65,873,67],{},[69,875,876],{},"class"," like functionality, and allow for the concept of private members.",[45,879,880],{},"A class is defined like so:",[76,882,884],{"className":78,"code":883,"language":80,"meta":11,"style":11},"class MyClass {\n}\n",[82,885,886,895],{"__ignoreMap":11},[65,887,888,890,893],{"class":86,"line":87},[65,889,876],{"class":310},[65,891,892],{"class":655}," MyClass",[65,894,691],{"class":90},[65,896,897],{"class":86,"line":12},[65,898,247],{"class":90},[45,900,901,902,904,906,908],{},"As with other languages that have a",[65,903,67],{},[69,905,876],{},[65,907,67],{},"concept, TypeScript makes use of constructors to initialise properties on initialisation.",[76,910,912],{"className":78,"code":911,"language":80,"meta":11,"style":11},"class Class {\n    property1: string;\n \n    constructor(){\n        this.property1 = 'Hello World';\n    }\n}\n",[82,913,914,923,934,938,946,961,966],{"__ignoreMap":11},[65,915,916,918,921],{"class":86,"line":87},[65,917,876],{"class":310},[65,919,920],{"class":655}," Class",[65,922,691],{"class":90},[65,924,925,928,930,932],{"class":86,"line":12},[65,926,927],{"class":736},"    property1",[65,929,317],{"class":310},[65,931,320],{"class":126},[65,933,329],{"class":90},[65,935,936],{"class":86,"line":103},[65,937,358],{"class":90},[65,939,940,943],{"class":86,"line":118},[65,941,942],{"class":310},"    constructor",[65,944,945],{"class":90},"(){\n",[65,947,948,951,954,956,959],{"class":86,"line":132},[65,949,950],{"class":126},"        this",[65,952,953],{"class":90},".property1 ",[65,955,348],{"class":310},[65,957,958],{"class":96}," 'Hello World'",[65,960,329],{"class":90},[65,962,963],{"class":86,"line":144},[65,964,965],{"class":90},"    }\n",[65,967,968],{"class":86,"line":156},[65,969,247],{"class":90},[971,972,973,982,990],"ul",{},[974,975,976,979,981],"li",{},[69,977,978],{},"Public",[65,980,67],{},"- The property\u002Fmethod can be used outside of the class",[974,983,984,987,989],{},[69,985,986],{},"Private",[65,988,67],{},"- The property\u002Fmethod can only be accessed by other members in the containing class",[974,991,992,995,997],{},[69,993,994],{},"Protected",[65,996,67],{},"- The property\u002Fmethod can be accessed by members of it's own class, and any derived classes",[45,999,1000],{},"If a member does not have an access modifier specified it will default to public.",[45,1002,1003,1004,1006],{},"In addition to explicit properties of a ",[69,1005,876],{},", implicit properties can be created, by adding access modifiers to constructor arguments.",[76,1008,1010],{"className":78,"code":1009,"language":80,"meta":11,"style":11},"class Human1 {\n    firstName: string;\n    lastName: string;\n     \n    constructor($firstName: string, $lastName: string) {\n        this.firstName = $firstName;\n        this.lastName = $lastName;\n    }\n}\n \nclass Human2 {\n    constructor(public firstName: string, public lastName: string) {\n    }\n}​\n",[82,1011,1012,1021,1032,1043,1047,1073,1085,1097,1101,1105,1109,1118,1147,1151],{"__ignoreMap":11},[65,1013,1014,1016,1019],{"class":86,"line":87},[65,1015,876],{"class":310},[65,1017,1018],{"class":655}," Human1",[65,1020,691],{"class":90},[65,1022,1023,1026,1028,1030],{"class":86,"line":12},[65,1024,1025],{"class":736},"    firstName",[65,1027,317],{"class":310},[65,1029,320],{"class":126},[65,1031,329],{"class":90},[65,1033,1034,1037,1039,1041],{"class":86,"line":103},[65,1035,1036],{"class":736},"    lastName",[65,1038,317],{"class":310},[65,1040,320],{"class":126},[65,1042,329],{"class":90},[65,1044,1045],{"class":86,"line":118},[65,1046,576],{"class":90},[65,1048,1049,1051,1054,1057,1059,1061,1063,1066,1068,1070],{"class":86,"line":132},[65,1050,942],{"class":310},[65,1052,1053],{"class":90},"(",[65,1055,1056],{"class":736},"$firstName",[65,1058,317],{"class":310},[65,1060,320],{"class":126},[65,1062,745],{"class":90},[65,1064,1065],{"class":736},"$lastName",[65,1067,317],{"class":310},[65,1069,320],{"class":126},[65,1071,1072],{"class":90},") {\n",[65,1074,1075,1077,1080,1082],{"class":86,"line":144},[65,1076,950],{"class":126},[65,1078,1079],{"class":90},".firstName ",[65,1081,348],{"class":310},[65,1083,1084],{"class":90}," $firstName;\n",[65,1086,1087,1089,1092,1094],{"class":86,"line":156},[65,1088,950],{"class":126},[65,1090,1091],{"class":90},".lastName ",[65,1093,348],{"class":310},[65,1095,1096],{"class":90}," $lastName;\n",[65,1098,1099],{"class":86,"line":169},[65,1100,965],{"class":90},[65,1102,1103],{"class":86,"line":180},[65,1104,247],{"class":90},[65,1106,1107],{"class":86,"line":186},[65,1108,358],{"class":90},[65,1110,1111,1113,1116],{"class":86,"line":195},[65,1112,876],{"class":310},[65,1114,1115],{"class":655}," Human2",[65,1117,691],{"class":90},[65,1119,1120,1122,1124,1127,1130,1132,1134,1136,1138,1141,1143,1145],{"class":86,"line":201},[65,1121,942],{"class":310},[65,1123,1053],{"class":90},[65,1125,1126],{"class":310},"public",[65,1128,1129],{"class":736}," firstName",[65,1131,317],{"class":310},[65,1133,320],{"class":126},[65,1135,745],{"class":90},[65,1137,1126],{"class":310},[65,1139,1140],{"class":736}," lastName",[65,1142,317],{"class":310},[65,1144,320],{"class":126},[65,1146,1072],{"class":90},[65,1148,1149],{"class":86,"line":207},[65,1150,965],{"class":90},[65,1152,1153],{"class":86,"line":215},[65,1154,1155],{"class":90},"}​\n",[45,1157,1158,1159,1161,1164,1166,1167,1169,1172,1174],{},"The above examples are equivalent, both create a class with public",[65,1160,67],{},[69,1162,1163],{},"firstName",[65,1165,67],{},"and",[65,1168,67],{},[69,1170,1171],{},"lastName",[65,1173,67],{},"properties.",[294,1176,1178],{"id":1177},"interfaces","Interfaces",[45,1180,1181],{},"These are similar to classes in that they act as definition of the properties and object will have. They are useful for:",[971,1183,1184,1187],{},[974,1185,1186],{},"Ensuring an object conforms to a particular structure on initialisation; and",[974,1188,1189],{},"Ensuring a class implements a specific set of properties or methods.",[45,1191,1192],{},"For example, in the first instance",[76,1194,1196],{"className":78,"code":1195,"language":80,"meta":11,"style":11},"interface IHuman {\n    firstName: string;\n    lastName: string;\n}\n \n\u002F\u002FThis will result in an error\nvar @object1 = \u003CIHuman>{\n    firstName: 'Human',\n    surname: 'Person'\n};\n \n\u002F\u002FThis will not result in an error\nvar @object2 = \u003CIHuman>{\n    firstName: 'Human',\n    lastName: 'Interface'\n}\n",[82,1197,1198,1208,1218,1228,1232,1236,1241,1259,1269,1277,1281,1285,1290,1305,1313,1321],{"__ignoreMap":11},[65,1199,1200,1203,1206],{"class":86,"line":87},[65,1201,1202],{"class":310},"interface",[65,1204,1205],{"class":655}," IHuman",[65,1207,691],{"class":90},[65,1209,1210,1212,1214,1216],{"class":86,"line":12},[65,1211,1025],{"class":736},[65,1213,317],{"class":310},[65,1215,320],{"class":126},[65,1217,329],{"class":90},[65,1219,1220,1222,1224,1226],{"class":86,"line":103},[65,1221,1036],{"class":736},[65,1223,317],{"class":310},[65,1225,320],{"class":126},[65,1227,329],{"class":90},[65,1229,1230],{"class":86,"line":118},[65,1231,247],{"class":90},[65,1233,1234],{"class":86,"line":132},[65,1235,358],{"class":90},[65,1237,1238],{"class":86,"line":144},[65,1239,1240],{"class":339},"\u002F\u002FThis will result in an error\n",[65,1242,1243,1245,1248,1250,1253,1256],{"class":86,"line":156},[65,1244,311],{"class":310},[65,1246,1247],{"class":90}," @object1 ",[65,1249,348],{"class":310},[65,1251,1252],{"class":90}," \u003C",[65,1254,1255],{"class":655},"IHuman",[65,1257,1258],{"class":90},">{\n",[65,1260,1261,1264,1267],{"class":86,"line":169},[65,1262,1263],{"class":90},"    firstName: ",[65,1265,1266],{"class":96},"'Human'",[65,1268,115],{"class":90},[65,1270,1271,1274],{"class":86,"line":180},[65,1272,1273],{"class":90},"    surname: ",[65,1275,1276],{"class":96},"'Person'\n",[65,1278,1279],{"class":86,"line":186},[65,1280,669],{"class":90},[65,1282,1283],{"class":86,"line":195},[65,1284,358],{"class":90},[65,1286,1287],{"class":86,"line":201},[65,1288,1289],{"class":339},"\u002F\u002FThis will not result in an error\n",[65,1291,1292,1294,1297,1299,1301,1303],{"class":86,"line":207},[65,1293,311],{"class":310},[65,1295,1296],{"class":90}," @object2 ",[65,1298,348],{"class":310},[65,1300,1252],{"class":90},[65,1302,1255],{"class":655},[65,1304,1258],{"class":90},[65,1306,1307,1309,1311],{"class":86,"line":215},[65,1308,1263],{"class":90},[65,1310,1266],{"class":96},[65,1312,115],{"class":90},[65,1314,1315,1318],{"class":86,"line":223},[65,1316,1317],{"class":90},"    lastName: ",[65,1319,1320],{"class":96},"'Interface'\n",[65,1322,1323],{"class":86,"line":229},[65,1324,247],{"class":90},[45,1326,1327],{},"The second use:",[76,1329,1331],{"className":78,"code":1330,"language":80,"meta":11,"style":11},"interface IHuman {\n    firstName: string;\n    lastName: string;\n}\n \n\u002F\u002FThis will result in a compilation error if the properties are not present\nclass IncorrectHuman implements IHuman {\n    firstName: string;\n}\n \n\u002F\u002FThis will not result in a compilation error\nclass Human implements IHuman {\n    firstName: string;\n    lastName: string;       \n}\n",[82,1332,1333,1341,1351,1361,1365,1369,1374,1388,1398,1402,1406,1411,1424,1434,1445],{"__ignoreMap":11},[65,1334,1335,1337,1339],{"class":86,"line":87},[65,1336,1202],{"class":310},[65,1338,1205],{"class":655},[65,1340,691],{"class":90},[65,1342,1343,1345,1347,1349],{"class":86,"line":12},[65,1344,1025],{"class":736},[65,1346,317],{"class":310},[65,1348,320],{"class":126},[65,1350,329],{"class":90},[65,1352,1353,1355,1357,1359],{"class":86,"line":103},[65,1354,1036],{"class":736},[65,1356,317],{"class":310},[65,1358,320],{"class":126},[65,1360,329],{"class":90},[65,1362,1363],{"class":86,"line":118},[65,1364,247],{"class":90},[65,1366,1367],{"class":86,"line":132},[65,1368,358],{"class":90},[65,1370,1371],{"class":86,"line":144},[65,1372,1373],{"class":339},"\u002F\u002FThis will result in a compilation error if the properties are not present\n",[65,1375,1376,1378,1381,1384,1386],{"class":86,"line":156},[65,1377,876],{"class":310},[65,1379,1380],{"class":655}," IncorrectHuman",[65,1382,1383],{"class":310}," implements",[65,1385,1205],{"class":655},[65,1387,691],{"class":90},[65,1389,1390,1392,1394,1396],{"class":86,"line":169},[65,1391,1025],{"class":736},[65,1393,317],{"class":310},[65,1395,320],{"class":126},[65,1397,329],{"class":90},[65,1399,1400],{"class":86,"line":180},[65,1401,247],{"class":90},[65,1403,1404],{"class":86,"line":186},[65,1405,358],{"class":90},[65,1407,1408],{"class":86,"line":195},[65,1409,1410],{"class":339},"\u002F\u002FThis will not result in a compilation error\n",[65,1412,1413,1415,1418,1420,1422],{"class":86,"line":201},[65,1414,876],{"class":310},[65,1416,1417],{"class":655}," Human",[65,1419,1383],{"class":310},[65,1421,1205],{"class":655},[65,1423,691],{"class":90},[65,1425,1426,1428,1430,1432],{"class":86,"line":207},[65,1427,1025],{"class":736},[65,1429,317],{"class":310},[65,1431,320],{"class":126},[65,1433,329],{"class":90},[65,1435,1436,1438,1440,1442],{"class":86,"line":215},[65,1437,1036],{"class":736},[65,1439,317],{"class":310},[65,1441,320],{"class":126},[65,1443,1444],{"class":90},";       \n",[65,1446,1447],{"class":86,"line":223},[65,1448,247],{"class":90},[294,1450,1178],{"id":1451},"interfaces-1",[45,1453,1454,1455,1457,1463],{},"A further advantage to using TypeScript over JavaScript is that it allows the use of generics (again, a familiar concept for C# developers [C#'s influence can be found throughout TypeScript, largely because they share some of the same design",[65,1456,67],{},[254,1458,1462],{"rel":1459,"href":1460,"target":259,"title":1461},[257],"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FAnders_Hejlsberg","Anders Hejlsberg","team","]).",[76,1465,1467],{"className":78,"code":1466,"language":80,"meta":11,"style":11},"interface IBase\u003CT> {\n    convertToJs(): T;\n}\n \nclass Human\u003CIHuman> {\n    convertToJs(): IHuman {\n        return \u003CIHuman>{};\n    }\n}\n \nclass Adult\u003CIAdult> {\n    convertToJs(): IAdult {\n        return \u003CIAdult>{};\n    }\n}\n",[82,1468,1469,1485,1500,1504,1508,1520,1532,1544,1548,1552,1556,1570,1583,1593,1597],{"__ignoreMap":11},[65,1470,1471,1473,1476,1479,1482],{"class":86,"line":87},[65,1472,1202],{"class":310},[65,1474,1475],{"class":655}," IBase",[65,1477,1478],{"class":90},"\u003C",[65,1480,1481],{"class":655},"T",[65,1483,1484],{"class":90},"> {\n",[65,1486,1487,1490,1493,1495,1498],{"class":86,"line":12},[65,1488,1489],{"class":655},"    convertToJs",[65,1491,1492],{"class":90},"()",[65,1494,317],{"class":310},[65,1496,1497],{"class":655}," T",[65,1499,329],{"class":90},[65,1501,1502],{"class":86,"line":103},[65,1503,247],{"class":90},[65,1505,1506],{"class":86,"line":118},[65,1507,358],{"class":90},[65,1509,1510,1512,1514,1516,1518],{"class":86,"line":132},[65,1511,876],{"class":310},[65,1513,1417],{"class":655},[65,1515,1478],{"class":90},[65,1517,1255],{"class":655},[65,1519,1484],{"class":90},[65,1521,1522,1524,1526,1528,1530],{"class":86,"line":144},[65,1523,1489],{"class":655},[65,1525,1492],{"class":90},[65,1527,317],{"class":310},[65,1529,1205],{"class":655},[65,1531,691],{"class":90},[65,1533,1534,1537,1539,1541],{"class":86,"line":156},[65,1535,1536],{"class":310},"        return",[65,1538,1252],{"class":90},[65,1540,1255],{"class":655},[65,1542,1543],{"class":90},">{};\n",[65,1545,1546],{"class":86,"line":169},[65,1547,965],{"class":90},[65,1549,1550],{"class":86,"line":180},[65,1551,247],{"class":90},[65,1553,1554],{"class":86,"line":186},[65,1555,358],{"class":90},[65,1557,1558,1560,1563,1565,1568],{"class":86,"line":195},[65,1559,876],{"class":310},[65,1561,1562],{"class":655}," Adult",[65,1564,1478],{"class":90},[65,1566,1567],{"class":655},"IAdult",[65,1569,1484],{"class":90},[65,1571,1572,1574,1576,1578,1581],{"class":86,"line":201},[65,1573,1489],{"class":655},[65,1575,1492],{"class":90},[65,1577,317],{"class":310},[65,1579,1580],{"class":655}," IAdult",[65,1582,691],{"class":90},[65,1584,1585,1587,1589,1591],{"class":86,"line":207},[65,1586,1536],{"class":310},[65,1588,1252],{"class":90},[65,1590,1567],{"class":655},[65,1592,1543],{"class":90},[65,1594,1595],{"class":86,"line":215},[65,1596,965],{"class":90},[65,1598,1599],{"class":86,"line":223},[65,1600,247],{"class":90},[294,1602,1604],{"id":1603},"inheritance","Inheritance",[45,1606,1607,1608,1610,1613,1615],{},"Thanks to TypeScript's use of classes, it allows for a simpler implementation of inheritance. TypeScript (like JavaScript) references parent classes through the use of the",[65,1609,67],{},[69,1611,1612],{},"super",[65,1614,67],{},"keyword:",[76,1617,1619],{"className":78,"code":1618,"language":80,"meta":11,"style":11},"class Human {\n    firstName: string;\n    lastName: string;\n     \n    constructor($firstName: string, $lastName: string) {\n        this.firstName = $firstName;\n        this.lastName = $lastName;\n    }\n}\n \nclass Adult extends Human {\n    job: string;\n     \n    constructor($firstName: string, $lastName: string, $job: string) {\n        super($firstName, $lastName);\n        \u002F\u002FTo call the base constructor, you need to use the above it is\n        \u002F\u002Fimportant to note that this needs to go first, ie before any further assignments\n        \u002F\u002FIt is also important to note here that this call to the super construtor is required\n        this.job = $job;\n    }\n}\n",[82,1620,1621,1629,1639,1649,1653,1675,1685,1695,1699,1703,1707,1720,1731,1735,1766,1774,1779,1784,1789,1802,1807],{"__ignoreMap":11},[65,1622,1623,1625,1627],{"class":86,"line":87},[65,1624,876],{"class":310},[65,1626,1417],{"class":655},[65,1628,691],{"class":90},[65,1630,1631,1633,1635,1637],{"class":86,"line":12},[65,1632,1025],{"class":736},[65,1634,317],{"class":310},[65,1636,320],{"class":126},[65,1638,329],{"class":90},[65,1640,1641,1643,1645,1647],{"class":86,"line":103},[65,1642,1036],{"class":736},[65,1644,317],{"class":310},[65,1646,320],{"class":126},[65,1648,329],{"class":90},[65,1650,1651],{"class":86,"line":118},[65,1652,576],{"class":90},[65,1654,1655,1657,1659,1661,1663,1665,1667,1669,1671,1673],{"class":86,"line":132},[65,1656,942],{"class":310},[65,1658,1053],{"class":90},[65,1660,1056],{"class":736},[65,1662,317],{"class":310},[65,1664,320],{"class":126},[65,1666,745],{"class":90},[65,1668,1065],{"class":736},[65,1670,317],{"class":310},[65,1672,320],{"class":126},[65,1674,1072],{"class":90},[65,1676,1677,1679,1681,1683],{"class":86,"line":144},[65,1678,950],{"class":126},[65,1680,1079],{"class":90},[65,1682,348],{"class":310},[65,1684,1084],{"class":90},[65,1686,1687,1689,1691,1693],{"class":86,"line":156},[65,1688,950],{"class":126},[65,1690,1091],{"class":90},[65,1692,348],{"class":310},[65,1694,1096],{"class":90},[65,1696,1697],{"class":86,"line":169},[65,1698,965],{"class":90},[65,1700,1701],{"class":86,"line":180},[65,1702,247],{"class":90},[65,1704,1705],{"class":86,"line":186},[65,1706,358],{"class":90},[65,1708,1709,1711,1713,1716,1718],{"class":86,"line":195},[65,1710,876],{"class":310},[65,1712,1562],{"class":655},[65,1714,1715],{"class":310}," extends",[65,1717,1417],{"class":655},[65,1719,691],{"class":90},[65,1721,1722,1725,1727,1729],{"class":86,"line":201},[65,1723,1724],{"class":736},"    job",[65,1726,317],{"class":310},[65,1728,320],{"class":126},[65,1730,329],{"class":90},[65,1732,1733],{"class":86,"line":207},[65,1734,576],{"class":90},[65,1736,1737,1739,1741,1743,1745,1747,1749,1751,1753,1755,1757,1760,1762,1764],{"class":86,"line":215},[65,1738,942],{"class":310},[65,1740,1053],{"class":90},[65,1742,1056],{"class":736},[65,1744,317],{"class":310},[65,1746,320],{"class":126},[65,1748,745],{"class":90},[65,1750,1065],{"class":736},[65,1752,317],{"class":310},[65,1754,320],{"class":126},[65,1756,745],{"class":90},[65,1758,1759],{"class":736},"$job",[65,1761,317],{"class":310},[65,1763,320],{"class":126},[65,1765,1072],{"class":90},[65,1767,1768,1771],{"class":86,"line":223},[65,1769,1770],{"class":126},"        super",[65,1772,1773],{"class":90},"($firstName, $lastName);\n",[65,1775,1776],{"class":86,"line":229},[65,1777,1778],{"class":339},"        \u002F\u002FTo call the base constructor, you need to use the above it is\n",[65,1780,1781],{"class":86,"line":234},[65,1782,1783],{"class":339},"        \u002F\u002Fimportant to note that this needs to go first, ie before any further assignments\n",[65,1785,1786],{"class":86,"line":244},[65,1787,1788],{"class":339},"        \u002F\u002FIt is also important to note here that this call to the super construtor is required\n",[65,1790,1792,1794,1797,1799],{"class":86,"line":1791},19,[65,1793,950],{"class":126},[65,1795,1796],{"class":90},".job ",[65,1798,348],{"class":310},[65,1800,1801],{"class":90}," $job;\n",[65,1803,1805],{"class":86,"line":1804},20,[65,1806,965],{"class":90},[65,1808,1810],{"class":86,"line":1809},21,[65,1811,247],{"class":90},[45,1813,1814],{},"In addition to providing the properties of a child class, you can also override the methods of the base class.",[76,1816,1818],{"className":78,"code":1817,"language":80,"meta":11,"style":11},"class Human {\n    firstName: string;\n    lastName: string;\n \n    constructor($firstName: string, $lastName: string) {\n        this.firstName = $firstName;\n        this.lastName = $lastName;\n    }\n \n    convertToJs(): IHuman {\n        return \u003CIHuman>{\n            fistName: this.firstName,\n            lastName: this.lastName\n        };\n    }\n}\n \nclass Adult extends Human {\n    job: string;\n \n    constructor($firstName: string, $lastName: string, $job: string) {\n        super($firstName, $lastName);\n        this.job = $job;\n    }\n \n    convertToJs(): IAdult {\n        var js = \u003CIAdult>super.convertToJs();\n        js.job = this.job;\n        return js;\n    }\n}\n",[82,1819,1820,1828,1838,1848,1852,1874,1884,1894,1898,1902,1914,1924,1935,1945,1950,1954,1958,1962,1974,1984,1988,2018,2025,2036,2041,2046,2059,2087,2101,2109,2114],{"__ignoreMap":11},[65,1821,1822,1824,1826],{"class":86,"line":87},[65,1823,876],{"class":310},[65,1825,1417],{"class":655},[65,1827,691],{"class":90},[65,1829,1830,1832,1834,1836],{"class":86,"line":12},[65,1831,1025],{"class":736},[65,1833,317],{"class":310},[65,1835,320],{"class":126},[65,1837,329],{"class":90},[65,1839,1840,1842,1844,1846],{"class":86,"line":103},[65,1841,1036],{"class":736},[65,1843,317],{"class":310},[65,1845,320],{"class":126},[65,1847,329],{"class":90},[65,1849,1850],{"class":86,"line":118},[65,1851,358],{"class":90},[65,1853,1854,1856,1858,1860,1862,1864,1866,1868,1870,1872],{"class":86,"line":132},[65,1855,942],{"class":310},[65,1857,1053],{"class":90},[65,1859,1056],{"class":736},[65,1861,317],{"class":310},[65,1863,320],{"class":126},[65,1865,745],{"class":90},[65,1867,1065],{"class":736},[65,1869,317],{"class":310},[65,1871,320],{"class":126},[65,1873,1072],{"class":90},[65,1875,1876,1878,1880,1882],{"class":86,"line":144},[65,1877,950],{"class":126},[65,1879,1079],{"class":90},[65,1881,348],{"class":310},[65,1883,1084],{"class":90},[65,1885,1886,1888,1890,1892],{"class":86,"line":156},[65,1887,950],{"class":126},[65,1889,1091],{"class":90},[65,1891,348],{"class":310},[65,1893,1096],{"class":90},[65,1895,1896],{"class":86,"line":169},[65,1897,965],{"class":90},[65,1899,1900],{"class":86,"line":180},[65,1901,358],{"class":90},[65,1903,1904,1906,1908,1910,1912],{"class":86,"line":186},[65,1905,1489],{"class":655},[65,1907,1492],{"class":90},[65,1909,317],{"class":310},[65,1911,1205],{"class":655},[65,1913,691],{"class":90},[65,1915,1916,1918,1920,1922],{"class":86,"line":195},[65,1917,1536],{"class":310},[65,1919,1252],{"class":90},[65,1921,1255],{"class":655},[65,1923,1258],{"class":90},[65,1925,1926,1929,1932],{"class":86,"line":201},[65,1927,1928],{"class":90},"            fistName: ",[65,1930,1931],{"class":126},"this",[65,1933,1934],{"class":90},".firstName,\n",[65,1936,1937,1940,1942],{"class":86,"line":207},[65,1938,1939],{"class":90},"            lastName: ",[65,1941,1931],{"class":126},[65,1943,1944],{"class":90},".lastName\n",[65,1946,1947],{"class":86,"line":215},[65,1948,1949],{"class":90},"        };\n",[65,1951,1952],{"class":86,"line":223},[65,1953,965],{"class":90},[65,1955,1956],{"class":86,"line":229},[65,1957,247],{"class":90},[65,1959,1960],{"class":86,"line":234},[65,1961,358],{"class":90},[65,1963,1964,1966,1968,1970,1972],{"class":86,"line":244},[65,1965,876],{"class":310},[65,1967,1562],{"class":655},[65,1969,1715],{"class":310},[65,1971,1417],{"class":655},[65,1973,691],{"class":90},[65,1975,1976,1978,1980,1982],{"class":86,"line":1791},[65,1977,1724],{"class":736},[65,1979,317],{"class":310},[65,1981,320],{"class":126},[65,1983,329],{"class":90},[65,1985,1986],{"class":86,"line":1804},[65,1987,358],{"class":90},[65,1989,1990,1992,1994,1996,1998,2000,2002,2004,2006,2008,2010,2012,2014,2016],{"class":86,"line":1809},[65,1991,942],{"class":310},[65,1993,1053],{"class":90},[65,1995,1056],{"class":736},[65,1997,317],{"class":310},[65,1999,320],{"class":126},[65,2001,745],{"class":90},[65,2003,1065],{"class":736},[65,2005,317],{"class":310},[65,2007,320],{"class":126},[65,2009,745],{"class":90},[65,2011,1759],{"class":736},[65,2013,317],{"class":310},[65,2015,320],{"class":126},[65,2017,1072],{"class":90},[65,2019,2021,2023],{"class":86,"line":2020},22,[65,2022,1770],{"class":126},[65,2024,1773],{"class":90},[65,2026,2028,2030,2032,2034],{"class":86,"line":2027},23,[65,2029,950],{"class":126},[65,2031,1796],{"class":90},[65,2033,348],{"class":310},[65,2035,1801],{"class":90},[65,2037,2039],{"class":86,"line":2038},24,[65,2040,965],{"class":90},[65,2042,2044],{"class":86,"line":2043},25,[65,2045,358],{"class":90},[65,2047,2049,2051,2053,2055,2057],{"class":86,"line":2048},26,[65,2050,1489],{"class":655},[65,2052,1492],{"class":90},[65,2054,317],{"class":310},[65,2056,1580],{"class":655},[65,2058,691],{"class":90},[65,2060,2062,2065,2068,2070,2072,2074,2077,2079,2081,2084],{"class":86,"line":2061},27,[65,2063,2064],{"class":310},"        var",[65,2066,2067],{"class":90}," js ",[65,2069,348],{"class":310},[65,2071,1252],{"class":90},[65,2073,1567],{"class":655},[65,2075,2076],{"class":90},">",[65,2078,1612],{"class":126},[65,2080,261],{"class":90},[65,2082,2083],{"class":655},"convertToJs",[65,2085,2086],{"class":90},"();\n",[65,2088,2090,2093,2095,2098],{"class":86,"line":2089},28,[65,2091,2092],{"class":90},"        js.job ",[65,2094,348],{"class":310},[65,2096,2097],{"class":126}," this",[65,2099,2100],{"class":90},".job;\n",[65,2102,2104,2106],{"class":86,"line":2103},29,[65,2105,1536],{"class":310},[65,2107,2108],{"class":90}," js;\n",[65,2110,2112],{"class":86,"line":2111},30,[65,2113,965],{"class":90},[65,2115,2117],{"class":86,"line":2116},31,[65,2118,247],{"class":90},[286,2120,2122],{"id":2121},"structure","Structure",[45,2124,2125],{},"One of the other main advantages that TypeScript affords, besides type safety, is simpler referencing; using modules and exports.",[76,2127,2129],{"className":78,"code":2128,"language":80,"meta":11,"style":11},"module MyModule{\n    export class TestClass {\n         \n    }\n     \n    class TestClass2 {\n         \n    }\n}\n",[82,2130,2131,2141,2154,2158,2162,2166,2176,2180,2184],{"__ignoreMap":11},[65,2132,2133,2136,2139],{"class":86,"line":87},[65,2134,2135],{"class":310},"module",[65,2137,2138],{"class":655}," MyModule",[65,2140,91],{"class":90},[65,2142,2143,2146,2149,2152],{"class":86,"line":12},[65,2144,2145],{"class":310},"    export",[65,2147,2148],{"class":310}," class",[65,2150,2151],{"class":655}," TestClass",[65,2153,691],{"class":90},[65,2155,2156],{"class":86,"line":103},[65,2157,334],{"class":90},[65,2159,2160],{"class":86,"line":118},[65,2161,965],{"class":90},[65,2163,2164],{"class":86,"line":132},[65,2165,576],{"class":90},[65,2167,2168,2171,2174],{"class":86,"line":144},[65,2169,2170],{"class":310},"    class",[65,2172,2173],{"class":655}," TestClass2",[65,2175,691],{"class":90},[65,2177,2178],{"class":86,"line":156},[65,2179,334],{"class":90},[65,2181,2182],{"class":86,"line":169},[65,2183,965],{"class":90},[65,2185,2186],{"class":86,"line":180},[65,2187,247],{"class":90},[45,2189,2190,2191,2193,2196,2197,2199,2202,2204],{},"From this module, you can reference the class",[65,2192,67],{},[69,2194,2195],{},"TestClass"," as it has been exported, but you cannot reference",[65,2198,67],{},[69,2200,2201],{},"TestClass2",[65,2203,67],{},"(which is private to the module). Modules are similar to namespaces within C based languages, providing logical regions to scope and structure code.",[76,2206,2208],{"className":78,"code":2207,"language":80,"meta":11,"style":11},"class TestClass3 {\n    property1: TestModule.TestClass;\n    \u002F\u002FThis will fail\n    property2: TestModule.TestClass2;\n}\n",[82,2209,2210,2219,2234,2239,2254],{"__ignoreMap":11},[65,2211,2212,2214,2217],{"class":86,"line":87},[65,2213,876],{"class":310},[65,2215,2216],{"class":655}," TestClass3",[65,2218,691],{"class":90},[65,2220,2221,2223,2225,2228,2230,2232],{"class":86,"line":12},[65,2222,927],{"class":736},[65,2224,317],{"class":310},[65,2226,2227],{"class":655}," TestModule",[65,2229,261],{"class":90},[65,2231,2195],{"class":655},[65,2233,329],{"class":90},[65,2235,2236],{"class":86,"line":103},[65,2237,2238],{"class":339},"    \u002F\u002FThis will fail\n",[65,2240,2241,2244,2246,2248,2250,2252],{"class":86,"line":118},[65,2242,2243],{"class":736},"    property2",[65,2245,317],{"class":310},[65,2247,2227],{"class":655},[65,2249,261],{"class":90},[65,2251,2201],{"class":655},[65,2253,329],{"class":90},[65,2255,2256],{"class":86,"line":132},[65,2257,247],{"class":90},[45,2259,2260,2261,2263,2266,2267,2269,525,2271,2273,2275,2276,2278,2281],{},"When using",[65,2262,67],{},[69,2264,2265],{},"TestClass3,"," you also need to reference the file which contains",[65,2268,67],{},[69,2270,2195],{},[65,2272,67],{},[69,2274,2201],{},". This is where bundling and minification can prove very useful (see",[65,2277,67],{},[69,2279,2280],{},"How Does It Work",", above).",[45,2283,2284,2285,2287,2290,2291,2293,2296,2297,2299,2301],{},"In addition to fully referencing a class, you can use an",[65,2286,67],{},[69,2288,2289],{},"import"," or",[65,2292,67],{},[69,2294,2295],{},"require"," statements to import classes from external files. It is important to note that you cannot ",[69,2298,2289],{},[65,2300,67],{},"a class unless it is exported in the dependant file.",[76,2303,2305],{"className":78,"code":2304,"language":80,"meta":11,"style":11},"import { TestClass2 } from '.\u002Frelative_path';\n \nclass TestClass3 {\n    property: TestClass2;\n}\n",[82,2306,2307,2322,2326,2334,2345],{"__ignoreMap":11},[65,2308,2309,2311,2314,2317,2320],{"class":86,"line":87},[65,2310,2289],{"class":310},[65,2312,2313],{"class":90}," { TestClass2 } ",[65,2315,2316],{"class":310},"from",[65,2318,2319],{"class":96}," '.\u002Frelative_path'",[65,2321,329],{"class":90},[65,2323,2324],{"class":86,"line":12},[65,2325,358],{"class":90},[65,2327,2328,2330,2332],{"class":86,"line":103},[65,2329,876],{"class":310},[65,2331,2216],{"class":655},[65,2333,691],{"class":90},[65,2335,2336,2339,2341,2343],{"class":86,"line":118},[65,2337,2338],{"class":736},"    property",[65,2340,317],{"class":310},[65,2342,2173],{"class":655},[65,2344,329],{"class":90},[65,2346,2347],{"class":86,"line":132},[65,2348,247],{"class":90},[45,2350,2351],{},"I will be exploring importing and referencing in more detail in my next blog post, on Angular 2+.",[286,2353,2355],{"id":2354},"further-reading","Further Reading",[45,2357,2358],{},"Below are some useful resources that may be of interest:",[971,2360,2361,2368,2375,2383],{},[974,2362,2363],{},[254,2364,2367],{"rel":2365,"href":2366,"target":259,"title":2367},[257],"https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Ftutorial.html","TypeScript Introduction",[974,2369,2370],{},[254,2371,2374],{"rel":2372,"href":2373,"target":259},[257],"https:\u002F\u002Fwww.typescriptlang.org\u002F","The official TypeScript site",[974,2376,2377],{},[254,2378,2382],{"rel":2379,"href":2380,"target":259,"dataAnchor":2381},[257],"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=Nj9_p4qvm5U\\&feature=youtu.be\\&t=8m41s","?v=Nj9_p4qvm5U\\&feature=youtu.be\\&t=8m41s","TypeScript approved as an official internal development language at Google",[974,2384,2385],{},[254,2386,2389],{"rel":2387,"href":2388,"target":259},[257],"https:\u002F\u002Fvsavkin.com\u002Fwriting-angular-2-in-typescript-1fa77c78d8e8","Angular: Why TypeScript",[40,2391,2393],{"id":2392},"why-do-i-need-typescript-to-develop-software","Why do I need TypeScript to develop software?",[45,2395,2396],{},[65,2397,2398],{},"TypeScript isn't a necessity, and you're free to program in vanilla JavaScript (the end result will be the same). TypeScript, however, has a lot of features which enforce better coding structure, less verbose code, and easier debugging.",[45,2400,2401,2403],{},[65,2402],{},[65,2404,2405,2406,2412],{},"It is for these reasons that TypeScript has had such a wide uptake, even from Microsoft's competitors (",[254,2407,2411],{"rel":2408,"href":2409,"target":259,"title":2410},[257],"\u002Ftechnical-blog\u002Fangular-speed-comparison","Angular speed comparison","Angular"," 2+ is built in TypeScript).",[45,2414,2415,2417],{},[65,2416],{},[65,2418,2419],{},"In my next blog post I will be building on top of the concepts in this article with a discussion of Angular 2+.",[2421,2422,2423],"style",{},"html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}html pre.shiki code .sYu0t, html code.shiki .sYu0t{--shiki-default:#005CC5}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sD7c4, html code.shiki .sD7c4{--shiki-default:#D73A49}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .sqxcx, html code.shiki .sqxcx{--shiki-default:#E36209}",{"title":11,"searchDepth":12,"depth":12,"links":2425},[2426,2427,2432],{"id":42,"depth":12,"text":43},{"id":56,"depth":12,"text":57,"children":2428},[2429,2430,2431],{"id":288,"depth":103,"text":289},{"id":2121,"depth":103,"text":2122},{"id":2354,"depth":103,"text":2355},{"id":2392,"depth":12,"text":2393},"TypeScript is to JavaScript what which SASS and LESS are to CSS - a super-set of the language with additional functionality to improve the coding experience.  Find out more about TypeScript in our latest insight.","2017-05-09T23:00:00.000Z","[object Object]","\u002Fimg\u002Ftechnical-blog\u002Ftypescript.jpg",{},"\u002Ftechnical-blog\u002Fjavascript-to-typescript",{"text":2440,"minutes":2441,"time":2442,"words":2443},"10 min read",9.195,551700,1839,{"title":2445,"description":2446,"keywords":2447},"Software Development Languages: JavaScript to TypeScript | Audacia","Software development company Audacia discusses the transition from JavaScript to TypeScript in developing software applications in this latest blog post.","Software development, Software development technologies, JavaScript development, TypeScript development, JavaScript to TypeScript","technical-blog\u002Fjavascript-to-typescript","J33FGncYYxrz60c2fJWbkgjSusuF_A-Qu2HYy3CP5No",1778146006258]