{"id":15407,"date":"2016-12-09T19:12:10","date_gmt":"2016-12-09T17:12:10","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=15407"},"modified":"2017-05-03T10:09:50","modified_gmt":"2017-05-03T07:09:50","slug":"8-steps-migrating-javascript-typescript","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/","title":{"rendered":"8 Steps to Migrating from JavaScript to TypeScript"},"content":{"rendered":"<p><span style=\"font-size: 20px;\">Solve App Problems 10x Faster with AppDynamics &#8211; Monitor production apps at code-level depth with minimal overhead. <a href=\"https:\/\/www.appdynamics.com\/free-trial\/?utm_source=webcodegeeks&amp;utm_medium=sponsorship&amp;utm_campaign=sponsored-post&amp;utm_content=8-steps-migrating-javascript-typescript&amp;utm_term=wcg-sponsored-post&amp;utm_budget=digital\">Start a FREE Trial!<\/a><\/span><\/p>\n<p>Recently, we\u2019ve been moving our <a href=\"http:\/\/www.appdynamics.com\/product\/browser-real-user-monitoring\/\">Browser RUM agent<\/a> from JavaScript to TypeScript. Though it\u2019s been a challenge, we enjoyed seeing how the change will benefit us and it\u2019s been fun learning a new language in the process. Let me share a little of how we migrated to TypeScript, some of the difficulties that arose and how we tackled them.<\/p>\n<h3><b>Why TypeScript<\/b><\/h3>\n<p>Before moving to TypeScript, our Browser RUM agent had thousands lines of code, but was suppressed in to just two JavaScript files.<\/p>\n<p>We felt obligated to refactor it before doing any real work, to make our life easier when adding additional features. Having experienced the pain of developing a large scale app in JavaScript, we decided to take a shot at their sibling languages that have better support for large-scale development.<\/p>\n<p>After looking into languages such as TypeScript, CoffeeScript, and PureScript, we decided to go with TypeScript for a few reasons:<\/p>\n<ol>\n<li>Static Typing<\/li>\n<li>Module and Classes<\/li>\n<li>Superset of JavaScript, easier to learn for JavaScript developers<\/li>\n<li>Success story from our front-end team<\/li>\n<\/ol>\n<h3><b>8 Steps to Migrating to TypeScript<\/b><\/h3>\n<ol>\n<li>\n<h4><b>Prepare Yourself<\/b><\/h4>\n<\/li>\n<\/ol>\n<ul>\n<li><a href=\"http:\/\/www.typescriptlang.org\/\">TypeScript Official Web Site<\/a> is the best start<\/li>\n<li><a href=\"https:\/\/www.stevefenton.co.uk\/Content\/TypeScript-Succinctly\/\">TypeScript Succinctly<\/a> is a good book for free<\/li>\n<li>If you are already a JavaScript developer, it feels smooth to pick the knowledge up<\/li>\n<\/ul>\n<ol start=\"2\">\n<li>\n<h4><b>Rename Files<\/b><\/h4>\n<\/li>\n<\/ol>\n<p>We renamed all the js files to ts files and as TypeScript is just a superset of JavaScript, you can just start compiling your new ts files with the TypeScript compiler.<\/p>\n<ol start=\"3\">\n<li>\n<h4><b>Fix Compiling Errors<\/b><\/h4>\n<\/li>\n<\/ol>\n<p>There were quite a few compiling errors due to the static type checking by the compiler. For instance, the compiler will complains about js code below:<\/p>\n<p><strong>Example One<\/strong><\/p>\n<pre class=\"brush:js\">var xdr = window.XDomainRequest;<\/pre>\n<p>Solution<\/p>\n<pre class=\"brush:java\">\/\/ declare the specific property on our own\r\ninterface Window {\r\n    XDomainRequest?: any;\r\n}<\/pre>\n<p>Since \u201cXDomainRequest\u201d is an IE only property to send cross domain request, it\u2019s not declared in the \u201clib.d.ts\u201d file (it\u2019s a file declaring the types of all the common JavaScript objects and APIs in the browser and it\u2019s referenced by typescript compiler by default).<br \/>\nYou will get \u201cerror TS2339: Property \u2018XDomainRequest\u2019 does not exist on type \u2018Window\u2019.\u201d.<br \/>\nThe solution is to extend the Window interface in \u201clib.d.ts\u201d with an optional \u201cXDomainRequest\u201d property.<\/p>\n<p><strong>Example Two<\/strong><\/p>\n<pre class=\"brush:java\">function foo(a: number, b: number) {\r\n    return;\r\n}\r\n\r\nfoo(1);<\/pre>\n<p>Solution<\/p>\n<pre class=\"brush:java\">\/\/ question mark the optional arg explicitly\r\nfunction foo(a: number, b?: number) {\r\n    return;\r\n}<\/pre>\n<p>Optional function args need to be marked explicitly in typescript, or it gives \u201cerror TS2346: Supplied parameters do not match any signature of call target.\u201d.<br \/>\nThe solution is to explicitly use \u201c?\u201d to mark the parameter as optional.<\/p>\n<p><strong>Example Three<\/strong><\/p>\n<pre class=\"brush:js\">var myObj = {};\r\nmyObj.name = \"myObj\";<\/pre>\n<p>Solution<\/p>\n<pre class=\"brush:java\">\/\/ use bracket to creat the new property\r\nmyObj['name'] = 'myObj';\r\n\/\/ or define an interface for the myObj\r\ninterface MyObj {\r\n    name?: string\r\n}\r\n\r\nvar myObj: MyObj = {};\r\nmyObj.name = 'myObj';<\/pre>\n<p>When assign an empty object \u201c{}\u201d to a variable, typescript compiler infers the type of the variable to be empty object without any property.<br \/>\nSo accessing \u201cname\u201d property gives \u201cerror TS2339: Property \u2018name\u2019 does not exist on type \u2018{}&#8217;\u201d.<br \/>\nThe solution is to declare an interface with an optional \u201cname\u201d property for it.<\/p>\n<p>It\u2019s kind of fun to fix these errors and you learn about the language and how the compiler can help.<\/p>\n<ol start=\"4\">\n<li>\n<h4><strong>Fix Test Cases<\/strong><\/h4>\n<\/li>\n<\/ol>\n<p>After successfully getting a JavaScript file from those ts files, we ran the tests against the new JavaScript files and fixed all the failures.<\/p>\n<p>One example of the test failures caused by moving to TypeScript is the difference between these two ways of exporting a function:<\/p>\n<pre class=\"brush:java\">export function foo() {}\r\nexport var foo = function() {}<\/pre>\n<p>Assuming your original JavaScript code is:<\/p>\n<pre class=\"brush:js\">var A = {\r\n    foo: function() {},\r\n    bar: function() {foo();}\r\n}<\/pre>\n<p>The test case shows:<\/p>\n<pre class=\"brush:js\">var origFoo = A.foo;\r\nvar fooCalled = false;\r\nA.foo = function(){fooCalled = true;};\r\nA.bar();\r\nassertTrue(fooCalled);\r\nA.foo = origFoo;<\/pre>\n<p>If the TypeScript rewrite for the JavaScript is:<\/p>\n<pre class=\"brush:js\">module A {\r\n    export function foo() {}\r\n    export function bar() {foo();}\r\n}<\/pre>\n<p>The test case will fail. Can you tell why?<\/p>\n<p>If you look at the generated JavaScript code, you will be able to see why.<\/p>\n<pre class=\"brush:js\">\/\/ generated from export function foo() {}\r\nvar A;\r\n(function (A) {\r\n    function foo() { }\r\n    A.foo = foo;\r\n    function bar() { foo(); }\r\n    A.bar = bar;\r\n})(A || (A = {}));<\/pre>\n<p>In the test case, when the A.foo is replaced, you are just replacing the \u201cfoo\u201d property of A but not the foo function, the bar function still calls the same foo function.<\/p>\n<pre class=\"brush:js\">export var foo = function(){}<\/pre>\n<p>can help here.<\/p>\n<p>TypeScript<\/p>\n<pre class=\"brush:js\">module A {\r\n    export var foo = function () { };\r\n    export var bar = function () { foo(); };\r\n}<\/pre>\n<p>generates<\/p>\n<pre class=\"brush:js\">\/\/ generated from expot var foo = function() {}\r\nvar A;\r\n(function (A) {\r\n    A.foo = function () { };\r\n    A.bar = function () { A.foo(); };\r\n})(A || (A = {}));<\/pre>\n<p>Now we can replace the foo function called by A.bar.<\/p>\n<ol start=\"5\">\n<li>\n<h4><b>Refactor Code<\/b><\/h4>\n<\/li>\n<\/ol>\n<p>TypeScript Modules and Classes help organize the code in a modularized and object-oriented way. Dependenies are referenced in the file header.<\/p>\n<pre class=\"brush:js\">\/\/\/\r\n\/\/\/\r\nmodule ADRUM.moduleC.moduleD {\r\n    ...\r\n}<\/pre>\n<p>One thing I like when compiling a ts file is using the \u201c\u2013out\u201d option to concatenate all the directly or indirectly referenced ts files, so I don\u2019t need to use requirejs or browserify for the same purpose.<\/p>\n<p>With TypeScript, we can define classes in a classical inheritance way rather than the prototypal inheritance way which is more familiar to Java and C++ programmers. However, you lose the flexibility JavaScript provides too.<\/p>\n<p>For example, if you are seeking a way to hide a function in the class scope, save your time, <a href=\"https:\/\/typescript.codeplex.com\/discussions\/448054\">it isn\u2019t supported<\/a>. The workaround is to define the function in the module and use it in the class.<\/p>\n<p>TypeScript allows you to define modules and classes in an easy way and generates the idiomatic JavaScript for you. As a result, I feel like you may also have less opportunities to learn more advanced JavaScript knowledge than programming in pure JavaScript.<\/p>\n<p>But just like moving from assembly to C\/C++, by and large, it\u2019s still a good thing.<\/p>\n<p>We did not bother adding all the type information in the existing code, but we\u2019ll need to do it when changing or adding code.<\/p>\n<p>It is also worth moving the test cases to TypeScript, as the test cases could be auto updated when refactoring the code in the IDE.<\/p>\n<ol start=\"6\">\n<li>\n<h4><b>Fix Minification<\/b><\/h4>\n<\/li>\n<\/ol>\n<p>Don\u2019t be surprised if the minification is broken especially when you use Google Closure Compiler with advanced optimization.<\/p>\n<p><b>Problem 1: Dead Code Mistakenly Removed<\/b><\/p>\n<p>The advanced optimization has a \u201cdead code removal\u201d feature that removes the code which recognized as unused by the compiler.<\/p>\n<p>Some early version closure compiler (i.e. version 20121212) mistakenly recognizes some code in TypeScript modules as unused and removes them. Fortunately, it\u2019s been fixed in the latest version compiler.<\/p>\n<p><b>Problem 2: Export Symbols in Modules<\/b><\/p>\n<p>To tell the compiler not to rename the symbols in your code, you need to <a href=\"https:\/\/developers.google.com\/closure\/compiler\/docs\/api-tutorial3#export\">export the symbols<\/a> by the quote notation. It means you need to export the API as shown below to allow the API name to stay constant even with the minified js file.<\/p>\n<pre class=\"brush:js\">module A {\r\n    export function fooAPI() { }\r\n    A[\"fooAPI\"] = fooAPI;\r\n}<\/pre>\n<p>transpiled to:<\/p>\n<pre class=\"brush:js\">var A;\r\n(function (A) {\r\n    function fooAPI() { }\r\n    A.fooAPI = fooAPI;\r\n    A[\"fooAPI\"] = fooAPI;\r\n})(A || (A = {}));<\/pre>\n<p>It\u2019s a little bit tedious. Another option is to use the deprecated @expose annotation.<\/p>\n<pre class=\"brush:js\">module A {\r\n    \/**\r\n    * @expose\r\n    *\/\r\n    export function fooAPI() { }\r\n}<\/pre>\n<p>This looks like it will removed in future, and hopefully you might be able to use @export when it\u2019s removed. (Refer to the discussion at <a href=\"https:\/\/github.com\/google\/closure-compiler\/issues\/636\">@expose annotation causes JSC_UNSAFE_NAMESPACE warning<\/a>.)<\/p>\n<p><b>Problem 3: Export Symbols in Interfaces<\/b><\/p>\n<p>If you define a BeaconJsonData interface to be passed to other libraries, you\u2019ll want to keep the key names.<\/p>\n<pre class=\"brush:js\">interface BeaconJsonData {\r\n    url: string,\r\n    metrics?: any\r\n}<\/pre>\n<p>@expose does not help as the interface definition transpile to nothing.<\/p>\n<pre class=\"brush:js\">interface BeaconData {\r\n    \/**\r\n    * @expose\r\n    *\/\r\n    url: string,\r\n    \/**\r\n    * @expose\r\n    *\/\r\n    metrics?: any\r\n}<\/pre>\n<p>You can reserve the key names by quote notation:<\/p>\n<pre class=\"brush:js\">var beaconData: BeaconData = {\r\n    'url': \"www.example.com\",\r\n    'metrics': {\u2026}\r\n};<\/pre>\n<p>But what if you want to assign the optional key later?<\/p>\n<pre class=\"brush:js\">var beaconData: BeaconData = {\r\n    'url': \"www.example.com\"\r\n};\r\n\r\n\/\/ \u2018metrics\u2019 will not be renamed but you lose the type checking by ts compiler\r\n\/\/ because you can create any new properties with quote notation\r\nbeaconData[\"metrics\"] = {\u2026};\r\nbeaconData[\"metricsTypo\"] = {\u2026}; \/\/ no compiling error\r\n\r\n\/\/ \u2018metrics\u2019 will be renamed but dot notation is protected by type checking\r\nbeaconData.metrics = {\u2026};\r\nbeaconData.metricsTypo = {\u2026}; \/\/ compiling error<\/pre>\n<p>What we did is to expose the key name as<br \/>\n\/** @expose *\/ export <b>var<\/b> metrics;<br \/>\nin the interface file to prevent the closure compiler from renaming it.<\/p>\n<ol start=\"7\">\n<li>\n<h4><b>Auto-Generate Google Closure Compiler Externs Files<\/b><\/h4>\n<\/li>\n<\/ol>\n<p>For the Closure Compiler, if your js code calls external js library\u2019s APIs, you need to declare these APIs in an externs file to tell the compiler not to rename the symbols of these APIs. Refer to <a href=\"https:\/\/developers.google.com\/closure\/compiler\/docs\/api-tutorial3#no\">Do Not Use Externs Instead of Exports!<\/a><\/p>\n<p>We used to manually create the externs files and any time we use a new API, we have to manually update its externs file. After using TypeScript, we found that TypeScript .d.ts and the externs file have the similar information.<\/p>\n<p>They both contain the external API declarations \u2014 .d.ts files just have more typing information \u2014 so we can try to get rid of one of them..<\/p>\n<p>The first idea came into my mind is to check if the TypeScript compiler supports minification. As the ts compiler understand the .d.ts file, it won\u2019t need the externs files. Unfortunately, it doesn\u2019t support it, so we have to stay with the Google Closure Compiler.<\/p>\n<p>Then, we thought the right thing is to generate the externs files from the .d.ts files. Thanks to the open source ts compiler, we use it to parse the .d.ts files and convert them to externs file (see my solution at <a href=\"https:\/\/goo.gl\/l0o6qX\">https:\/\/goo.gl\/l0o6qX<\/a>).<\/p>\n<p>Now, each time we add a new external API declaration in our .d.ts file, the API symbols automatically appears in the externs file when build our project.<\/p>\n<ol start=\"8\">\n<li>\n<h4><b>Wrap the ts code in one function<\/b><\/h4>\n<\/li>\n<\/ol>\n<p>Ts compiler generates code for modules like below:<\/p>\n<pre class=\"brush:js\">\/\/ typescript\r\nmodule A {\r\n    export var a: number;\r\n}\r\n\r\nmodule A.B {\r\n    export var b: number;\r\n}\r\n\r\n\/\/ transpiled to javascript\r\nvar A;\r\n(function (A) {\r\n    A.a;\r\n})(A || (A = {}));\r\n\r\nvar A;\r\n(function (A) {\r\n    var B;\r\n    (function (B) {\r\n        B.b;\r\n    })(B = A.B || (A.B = {}));\r\n})(A || (A = {}));<\/pre>\n<p>For each module, there is a variable created and a function called. The function creates properties in the module variable for exported symbols. However, sometimes you want to stop execution for some conditions such as your libraries need to be defined or it has been disabled, you need to wrap all the js code in a function by yourself, like:<\/p>\n<pre class=\"brush:js\">(function(){\r\n    if (global.ADRUM || global.ADRUM_DISABLED) {\r\n        return;\r\n    }\r\n\r\n    \/\/ typescript generated javascript goes here\r\n\r\n}(global);<\/pre>\n<p><span style=\"font-size: 20px;\">Solve App Problems 10x Faster with AppDynamics &#8211; Monitor production apps at code-level depth with minimal overhead. <a href=\"https:\/\/www.appdynamics.com\/free-trial\/?utm_source=webcodegeeks&amp;utm_medium=sponsorship&amp;utm_campaign=sponsored-post&amp;utm_content=8-steps-migrating-javascript-typescript&amp;utm_term=wcg-sponsored-post&amp;utm_budget=digital\">Start a FREE Trial!<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Solve App Problems 10x Faster with AppDynamics &#8211; Monitor production apps at code-level depth with minimal overhead. Start a FREE Trial! Recently, we\u2019ve been moving our Browser RUM agent from JavaScript to TypeScript. Though it\u2019s been a challenge, we enjoyed seeing how the change will benefit us and it\u2019s been fun learning a new language &hellip;<\/p>\n","protected":false},"author":207,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[76],"class_list":["post-15407","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-typescript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>8 Steps to Migrating from JavaScript to TypeScript - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Solve App Problems 10x Faster with AppDynamics - Monitor production apps at code-level depth with minimal overhead. Start a FREE Trial! Recently, we\u2019ve\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"8 Steps to Migrating from JavaScript to TypeScript - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Solve App Problems 10x Faster with AppDynamics - Monitor production apps at code-level depth with minimal overhead. Start a FREE Trial! Recently, we\u2019ve\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-09T17:12:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-05-03T07:09:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Raphael Feng\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Raphael Feng\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/\"},\"author\":{\"name\":\"Raphael Feng\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/b809fd37ca08e42329973ea7305257d8\"},\"headline\":\"8 Steps to Migrating from JavaScript to TypeScript\",\"datePublished\":\"2016-12-09T17:12:10+00:00\",\"dateModified\":\"2017-05-03T07:09:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/\"},\"wordCount\":1483,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"keywords\":[\"TypeScript\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/\",\"name\":\"8 Steps to Migrating from JavaScript to TypeScript - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2016-12-09T17:12:10+00:00\",\"dateModified\":\"2017-05-03T07:09:50+00:00\",\"description\":\"Solve App Problems 10x Faster with AppDynamics - Monitor production apps at code-level depth with minimal overhead. Start a FREE Trial! Recently, we\u2019ve\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"8 Steps to Migrating from JavaScript to TypeScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/b809fd37ca08e42329973ea7305257d8\",\"name\":\"Raphael Feng\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/618d2fdf6d0961106e3905b271e2564f90bd821907b3bb2d99ad92e45359504b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/618d2fdf6d0961106e3905b271e2564f90bd821907b3bb2d99ad92e45359504b?s=96&d=mm&r=g\",\"caption\":\"Raphael Feng\"},\"description\":\"Raphael Feng works in the development team of Real-User Monitoring at AppDynamics. He is developing the browser real-user monitoring product which is a cloud solution to help users to collect the data about end-user experience and analyze the corresponding business impacts in real-time to optimize the results. Prior to joining AppDynamics, he worked at Actuate and SAP on business intelligence products like cross-platform data visualizations and enterprise reporting.\",\"url\":\"https:\/\/www.webcodegeeks.com\/author\/raphael-feng\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"8 Steps to Migrating from JavaScript to TypeScript - Web Code Geeks - 2026","description":"Solve App Problems 10x Faster with AppDynamics - Monitor production apps at code-level depth with minimal overhead. Start a FREE Trial! Recently, we\u2019ve","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/","og_locale":"en_US","og_type":"article","og_title":"8 Steps to Migrating from JavaScript to TypeScript - Web Code Geeks - 2026","og_description":"Solve App Problems 10x Faster with AppDynamics - Monitor production apps at code-level depth with minimal overhead. Start a FREE Trial! Recently, we\u2019ve","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2016-12-09T17:12:10+00:00","article_modified_time":"2017-05-03T07:09:50+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Raphael Feng","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Raphael Feng","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/"},"author":{"name":"Raphael Feng","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/b809fd37ca08e42329973ea7305257d8"},"headline":"8 Steps to Migrating from JavaScript to TypeScript","datePublished":"2016-12-09T17:12:10+00:00","dateModified":"2017-05-03T07:09:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/"},"wordCount":1483,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","keywords":["TypeScript"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/","name":"8 Steps to Migrating from JavaScript to TypeScript - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2016-12-09T17:12:10+00:00","dateModified":"2017-05-03T07:09:50+00:00","description":"Solve App Problems 10x Faster with AppDynamics - Monitor production apps at code-level depth with minimal overhead. Start a FREE Trial! Recently, we\u2019ve","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/8-steps-migrating-javascript-typescript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"8 Steps to Migrating from JavaScript to TypeScript"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/b809fd37ca08e42329973ea7305257d8","name":"Raphael Feng","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/618d2fdf6d0961106e3905b271e2564f90bd821907b3bb2d99ad92e45359504b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/618d2fdf6d0961106e3905b271e2564f90bd821907b3bb2d99ad92e45359504b?s=96&d=mm&r=g","caption":"Raphael Feng"},"description":"Raphael Feng works in the development team of Real-User Monitoring at AppDynamics. He is developing the browser real-user monitoring product which is a cloud solution to help users to collect the data about end-user experience and analyze the corresponding business impacts in real-time to optimize the results. Prior to joining AppDynamics, he worked at Actuate and SAP on business intelligence products like cross-platform data visualizations and enterprise reporting.","url":"https:\/\/www.webcodegeeks.com\/author\/raphael-feng\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/15407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/207"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=15407"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/15407\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=15407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=15407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=15407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}