{"id":1188,"date":"2023-07-26T10:58:09","date_gmt":"2023-07-26T10:58:09","guid":{"rendered":"https:\/\/www.naveedulhaq.com\/?p=1188"},"modified":"2023-07-26T11:18:04","modified_gmt":"2023-07-26T11:18:04","slug":"how-to-convert-your-javascript-components-into-typescript","status":"publish","type":"post","link":"https:\/\/www.naveedulhaq.com\/index.php\/js\/how-to-convert-your-javascript-components-into-typescript\/","title":{"rendered":"How to Convert Your JavaScript Components into TypeScript"},"content":{"rendered":"\n<p>If you already know javascript, it would be very easy to learn and get started with Typescript. You can take typescript as an extension of javascript with better tooling and more popularity. You can easily convert your previous javascript projects into typescript.<\/p>\n\n\n\n<p>So, are you ready to take one step forward and convert your javascript code into typescript but still unsure where to start? Worry not because in this article we will be going through the whole process step-by-step, showing you how to leverage TypeScript&#8217;s static typing to build safer, more reliable components.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Changing the File Extension<\/h2>\n\n\n\n<p>We can start with a really simple and easy step by just changing your file extension from<strong><em> .js<\/em><\/strong> or<strong><em> .jsx<\/em><\/strong> to<strong><em> .ts<\/em><\/strong> or<strong><em> .tsx<\/em><\/strong> (if the file contains JSX). This will indicate your development environment in that you are working with TypeScript code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Defining Your Types<\/h2>\n\n\n\n<p>In typescript, we have to declare variable types, function parameters, and return values. This is one of the major benefits of TypeScript as it allows type-checking at the compile time.<\/p>\n\n\n\n<p>With this feature, we can intercept and rectify many common errors before deploying the code into a production environment.<\/p>\n\n\n\n<p>For example, consider the following JavaScript function:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"573\" height=\"135\" src=\"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image.png\" loading=\"lazy\" alt=\"Convert Your JavaScript Components into TypeScript\" class=\"wp-image-1189\" srcset=\"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image.png 573w, https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-300x71.png 300w\" sizes=\"auto, (max-width: 573px) 100vw, 573px\" \/><\/figure>\n\n\n\n<p>While converting it into TypeScript, we would specify that name should always be a string:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"682\" height=\"135\" src=\"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-1.png\" loading=\"lazy\" alt=\"Convert Your JavaScript Components into TypeScript\" class=\"wp-image-1192\" srcset=\"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-1.png 682w, https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-1-300x59.png 300w\" sizes=\"auto, (max-width: 682px) 100vw, 682px\" \/><\/figure>\n\n\n\n<p>This prevents any unexpected errors and gives greater control over our code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Transforming PropTypes to TypeScript Interfaces<\/h2>\n\n\n\n<p>As we use<strong><em> PropTypes<\/em><\/strong> in javascript to implement specific types for our props. <strong><em>Interfaces<\/em><\/strong> serve the same purpose in Typescript.<\/p>\n\n\n\n<p>For example, consider the following JavaScript component with PropTypes:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"609\" height=\"663\" src=\"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-2.png\" loading=\"lazy\" alt=\"Convert Your JavaScript Components into TypeScript\" class=\"wp-image-1193\" srcset=\"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-2.png 609w, https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-2-276x300.png 276w\" sizes=\"auto, (max-width: 609px) 100vw, 609px\" \/><\/figure>\n\n\n\n<p>Now let&#8217;s transform this into TypeScript using interfaces:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"826\" height=\"478\" src=\"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-3.png\" loading=\"lazy\" alt=\"Convert Your JavaScript Components into TypeScript\" class=\"wp-image-1194\" srcset=\"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-3.png 826w, https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-3-300x174.png 300w, https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-3-768x444.png 768w\" sizes=\"auto, (max-width: 826px) 100vw, 826px\" \/><\/figure>\n\n\n\n<p><strong>Note<\/strong>: &#8211; We can also use optional chaining in using interfaces. e.g;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"586\" height=\"153\" src=\"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-4.png\" loading=\"lazy\" alt=\"Convert Your JavaScript Components into TypeScript\" class=\"wp-image-1195\" srcset=\"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-4.png 586w, https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-4-300x78.png 300w\" sizes=\"auto, (max-width: 586px) 100vw, 586px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">React-Specific Typings<\/h2>\n\n\n\n<p>When using any javascript library e.g. React, it is important to note that it includes its own unique constructs like hooks and methods, which needs specific type definitions. We have a package known as <strong><em>@types\/react<\/em><\/strong> that helps us in this aspect and provides us with pre-defined types for these constructs.<\/p>\n\n\n\n<p>For instance, when creating a functional component, we can define the types of props and states as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"939\" height=\"727\" src=\"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-5.png\" loading=\"lazy\" alt=\"Convert Your JavaScript Components into TypeScript\" class=\"wp-image-1196\" srcset=\"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-5.png 939w, https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-5-300x232.png 300w, https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-5-768x595.png 768w\" sizes=\"auto, (max-width: 939px) 100vw, 939px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Install Type Definitions<\/h2>\n\n\n\n<p>Many popular JavaScript libraries have TypeScript definitions available, usually in a package named <strong><em>@types\/library-name<\/em><\/strong>. E.g. for React <em>(@types\/react)<\/em>, for Node.js <em>(@types\/node)<\/em>, etc. Make sure to install these types to make full use of TypeScript&#8217;s static typing if you are using third-party libraries in your project.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using Strict Mode<\/h2>\n\n\n\n<p>To ensure the highest level of type safety, it is recommended to enable the<strong><em> strict<\/em><\/strong> mode to <strong><em>true<\/em><\/strong> in your tsconfig.json file. This forces the compiler to perform more rigorous checks, catching potential issues that might otherwise be missed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"364\" src=\"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-6.png\" loading=\"lazy\" alt=\"Convert Your JavaScript Components into TypeScript\" class=\"wp-image-1197\" srcset=\"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-6.png 600w, https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image-6-300x182.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Adopt TypeScript Gradually<\/h2>\n\n\n\n<p>We have mentioned earlier that typescript is on top of javascript, always keep this in consideration that moving from javascript to Typescript is a gradual process. As TypeScript supports JavaScript, we can have a combination of both<strong><em> .js<\/em><\/strong> and<strong><em> .ts<\/em><\/strong> files in our projects. This gives us enough time to convert our components, hence reducing the risk of breaking the working code by introducing bugs or disrupting our workflow.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Compile and Fix Type Errors<\/h2>\n\n\n\n<p>After making the necessary changes to the codebase, we need to run the TypeScript compiler <strong><em>(tsc)<\/em><\/strong>. This will help us in identifying any further issues or type errors in our project.<\/p>\n\n\n\n<p>Working with some new technology can be daunting at times. It&#8217;s better to follow a step-by-step process so that the transition from javascript to Typescript can be more smooth and more efficient. The additional safety of TypeScript&#8217;s static type checking can save countless hours of debugging down the line. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you already know javascript, it would be very easy to learn and get started with Typescript. You can take typescript as an extension of&#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[86],"tags":[32,65],"class_list":["post-1188","post","type-post","status-publish","format-standard","hentry","category-js","tag-developer","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Convert Your JavaScript Components into TypeScript - Naveed Ul-Haq&#039;s blog<\/title>\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.naveedulhaq.com\/index.php\/js\/how-to-convert-your-javascript-components-into-typescript\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Convert Your JavaScript Components into TypeScript - Naveed Ul-Haq&#039;s blog\" \/>\n<meta property=\"og:description\" content=\"If you already know javascript, it would be very easy to learn and get started with Typescript. You can take typescript as an extension of...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.naveedulhaq.com\/index.php\/js\/how-to-convert-your-javascript-components-into-typescript\/\" \/>\n<meta property=\"og:site_name\" content=\"Naveed Ul-Haq&#039;s blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-26T10:58:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-26T11:18:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image.png\" \/>\n<meta name=\"author\" content=\"Aisha Naveed\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aisha Naveed\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.naveedulhaq.com\\\/index.php\\\/js\\\/how-to-convert-your-javascript-components-into-typescript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.naveedulhaq.com\\\/index.php\\\/js\\\/how-to-convert-your-javascript-components-into-typescript\\\/\"},\"author\":{\"name\":\"Aisha Naveed\",\"@id\":\"https:\\\/\\\/www.naveedulhaq.com\\\/#\\\/schema\\\/person\\\/982991c040838d7fc973b1082accde52\"},\"headline\":\"How to Convert Your JavaScript Components into TypeScript\",\"datePublished\":\"2023-07-26T10:58:09+00:00\",\"dateModified\":\"2023-07-26T11:18:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.naveedulhaq.com\\\/index.php\\\/js\\\/how-to-convert-your-javascript-components-into-typescript\\\/\"},\"wordCount\":621,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.naveedulhaq.com\\\/#\\\/schema\\\/person\\\/dd6db5980b965fcae41e096d357c65c9\"},\"image\":{\"@id\":\"https:\\\/\\\/www.naveedulhaq.com\\\/index.php\\\/js\\\/how-to-convert-your-javascript-components-into-typescript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.naveedulhaq.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/image.png\",\"keywords\":[\"developer\",\"javascript\"],\"articleSection\":[\"JS\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.naveedulhaq.com\\\/index.php\\\/js\\\/how-to-convert-your-javascript-components-into-typescript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.naveedulhaq.com\\\/index.php\\\/js\\\/how-to-convert-your-javascript-components-into-typescript\\\/\",\"url\":\"https:\\\/\\\/www.naveedulhaq.com\\\/index.php\\\/js\\\/how-to-convert-your-javascript-components-into-typescript\\\/\",\"name\":\"How to Convert Your JavaScript Components into TypeScript - Naveed Ul-Haq&#039;s blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.naveedulhaq.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.naveedulhaq.com\\\/index.php\\\/js\\\/how-to-convert-your-javascript-components-into-typescript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.naveedulhaq.com\\\/index.php\\\/js\\\/how-to-convert-your-javascript-components-into-typescript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.naveedulhaq.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/image.png\",\"datePublished\":\"2023-07-26T10:58:09+00:00\",\"dateModified\":\"2023-07-26T11:18:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.naveedulhaq.com\\\/index.php\\\/js\\\/how-to-convert-your-javascript-components-into-typescript\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.naveedulhaq.com\\\/index.php\\\/js\\\/how-to-convert-your-javascript-components-into-typescript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.naveedulhaq.com\\\/index.php\\\/js\\\/how-to-convert-your-javascript-components-into-typescript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.naveedulhaq.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/image.png\",\"contentUrl\":\"https:\\\/\\\/www.naveedulhaq.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/image.png\",\"width\":573,\"height\":135},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.naveedulhaq.com\\\/index.php\\\/js\\\/how-to-convert-your-javascript-components-into-typescript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.naveedulhaq.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Convert Your JavaScript Components into TypeScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.naveedulhaq.com\\\/#website\",\"url\":\"https:\\\/\\\/www.naveedulhaq.com\\\/\",\"name\":\"Naveed Ul-Haq's blog\",\"description\":\"AI, Optimizely, Azure &amp; more\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.naveedulhaq.com\\\/#\\\/schema\\\/person\\\/dd6db5980b965fcae41e096d357c65c9\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.naveedulhaq.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.naveedulhaq.com\\\/#\\\/schema\\\/person\\\/dd6db5980b965fcae41e096d357c65c9\",\"name\":\"Naveed Ul-Haq\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/362536aba6cc66917d7558cacd015a81c7cdf1a69b9a28c994764847c487b692?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/362536aba6cc66917d7558cacd015a81c7cdf1a69b9a28c994764847c487b692?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/362536aba6cc66917d7558cacd015a81c7cdf1a69b9a28c994764847c487b692?s=96&d=mm&r=g\",\"caption\":\"Naveed Ul-Haq\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/362536aba6cc66917d7558cacd015a81c7cdf1a69b9a28c994764847c487b692?s=96&d=mm&r=g\"},\"description\":\"I lead engineering delivery teams for digital commerce and digital experience platforms, combining hands-on architecture experience with strong delivery governance. Over 20+ years, I\u2019ve built and led cross\u2011functional teams (engineering, BA, QA) delivering modern cloud solutions on Azure, microservices, APIs and eCommerce\\\/CMS platforms. My recent focus includes AI-enabled commerce automation: product ingestion and enrichment workflows, content optimisation for SEO and shopping feeds, and agentic tooling to improve marketing and accessibility workflows. I\u2019m passionate about building high-performing teams, establishing quality\\\/release standards, and delivering measurable outcomes across performance, reliability, and speed of change.\",\"sameAs\":[\"https:\\\/\\\/www.naveedulhaq.com\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/naveedulhaq\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.naveedulhaq.com\\\/#\\\/schema\\\/person\\\/982991c040838d7fc973b1082accde52\",\"name\":\"Aisha Naveed\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e97bd0be71e62b962482e5eed948f420b34c00603a2db0073bfd0177e7db9239?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e97bd0be71e62b962482e5eed948f420b34c00603a2db0073bfd0177e7db9239?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e97bd0be71e62b962482e5eed948f420b34c00603a2db0073bfd0177e7db9239?s=96&d=mm&r=g\",\"caption\":\"Aisha Naveed\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Convert Your JavaScript Components into TypeScript - Naveed Ul-Haq&#039;s blog","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.naveedulhaq.com\/index.php\/js\/how-to-convert-your-javascript-components-into-typescript\/","og_locale":"en_GB","og_type":"article","og_title":"How to Convert Your JavaScript Components into TypeScript - Naveed Ul-Haq&#039;s blog","og_description":"If you already know javascript, it would be very easy to learn and get started with Typescript. You can take typescript as an extension of...","og_url":"https:\/\/www.naveedulhaq.com\/index.php\/js\/how-to-convert-your-javascript-components-into-typescript\/","og_site_name":"Naveed Ul-Haq&#039;s blog","article_published_time":"2023-07-26T10:58:09+00:00","article_modified_time":"2023-07-26T11:18:04+00:00","og_image":[{"url":"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image.png","type":"","width":"","height":""}],"author":"Aisha Naveed","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Aisha Naveed","Estimated reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.naveedulhaq.com\/index.php\/js\/how-to-convert-your-javascript-components-into-typescript\/#article","isPartOf":{"@id":"https:\/\/www.naveedulhaq.com\/index.php\/js\/how-to-convert-your-javascript-components-into-typescript\/"},"author":{"name":"Aisha Naveed","@id":"https:\/\/www.naveedulhaq.com\/#\/schema\/person\/982991c040838d7fc973b1082accde52"},"headline":"How to Convert Your JavaScript Components into TypeScript","datePublished":"2023-07-26T10:58:09+00:00","dateModified":"2023-07-26T11:18:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.naveedulhaq.com\/index.php\/js\/how-to-convert-your-javascript-components-into-typescript\/"},"wordCount":621,"commentCount":0,"publisher":{"@id":"https:\/\/www.naveedulhaq.com\/#\/schema\/person\/dd6db5980b965fcae41e096d357c65c9"},"image":{"@id":"https:\/\/www.naveedulhaq.com\/index.php\/js\/how-to-convert-your-javascript-components-into-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image.png","keywords":["developer","javascript"],"articleSection":["JS"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.naveedulhaq.com\/index.php\/js\/how-to-convert-your-javascript-components-into-typescript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.naveedulhaq.com\/index.php\/js\/how-to-convert-your-javascript-components-into-typescript\/","url":"https:\/\/www.naveedulhaq.com\/index.php\/js\/how-to-convert-your-javascript-components-into-typescript\/","name":"How to Convert Your JavaScript Components into TypeScript - Naveed Ul-Haq&#039;s blog","isPartOf":{"@id":"https:\/\/www.naveedulhaq.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.naveedulhaq.com\/index.php\/js\/how-to-convert-your-javascript-components-into-typescript\/#primaryimage"},"image":{"@id":"https:\/\/www.naveedulhaq.com\/index.php\/js\/how-to-convert-your-javascript-components-into-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image.png","datePublished":"2023-07-26T10:58:09+00:00","dateModified":"2023-07-26T11:18:04+00:00","breadcrumb":{"@id":"https:\/\/www.naveedulhaq.com\/index.php\/js\/how-to-convert-your-javascript-components-into-typescript\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.naveedulhaq.com\/index.php\/js\/how-to-convert-your-javascript-components-into-typescript\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.naveedulhaq.com\/index.php\/js\/how-to-convert-your-javascript-components-into-typescript\/#primaryimage","url":"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image.png","contentUrl":"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2023\/07\/image.png","width":573,"height":135},{"@type":"BreadcrumbList","@id":"https:\/\/www.naveedulhaq.com\/index.php\/js\/how-to-convert-your-javascript-components-into-typescript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.naveedulhaq.com\/"},{"@type":"ListItem","position":2,"name":"How to Convert Your JavaScript Components into TypeScript"}]},{"@type":"WebSite","@id":"https:\/\/www.naveedulhaq.com\/#website","url":"https:\/\/www.naveedulhaq.com\/","name":"Naveed Ul-Haq's blog","description":"AI, Optimizely, Azure &amp; more","publisher":{"@id":"https:\/\/www.naveedulhaq.com\/#\/schema\/person\/dd6db5980b965fcae41e096d357c65c9"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.naveedulhaq.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":["Person","Organization"],"@id":"https:\/\/www.naveedulhaq.com\/#\/schema\/person\/dd6db5980b965fcae41e096d357c65c9","name":"Naveed Ul-Haq","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/362536aba6cc66917d7558cacd015a81c7cdf1a69b9a28c994764847c487b692?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/362536aba6cc66917d7558cacd015a81c7cdf1a69b9a28c994764847c487b692?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/362536aba6cc66917d7558cacd015a81c7cdf1a69b9a28c994764847c487b692?s=96&d=mm&r=g","caption":"Naveed Ul-Haq"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/362536aba6cc66917d7558cacd015a81c7cdf1a69b9a28c994764847c487b692?s=96&d=mm&r=g"},"description":"I lead engineering delivery teams for digital commerce and digital experience platforms, combining hands-on architecture experience with strong delivery governance. Over 20+ years, I\u2019ve built and led cross\u2011functional teams (engineering, BA, QA) delivering modern cloud solutions on Azure, microservices, APIs and eCommerce\/CMS platforms. My recent focus includes AI-enabled commerce automation: product ingestion and enrichment workflows, content optimisation for SEO and shopping feeds, and agentic tooling to improve marketing and accessibility workflows. I\u2019m passionate about building high-performing teams, establishing quality\/release standards, and delivering measurable outcomes across performance, reliability, and speed of change.","sameAs":["https:\/\/www.naveedulhaq.com","https:\/\/www.linkedin.com\/in\/naveedulhaq\/"]},{"@type":"Person","@id":"https:\/\/www.naveedulhaq.com\/#\/schema\/person\/982991c040838d7fc973b1082accde52","name":"Aisha Naveed","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/e97bd0be71e62b962482e5eed948f420b34c00603a2db0073bfd0177e7db9239?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e97bd0be71e62b962482e5eed948f420b34c00603a2db0073bfd0177e7db9239?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e97bd0be71e62b962482e5eed948f420b34c00603a2db0073bfd0177e7db9239?s=96&d=mm&r=g","caption":"Aisha Naveed"}}]}},"_links":{"self":[{"href":"https:\/\/www.naveedulhaq.com\/index.php\/wp-json\/wp\/v2\/posts\/1188","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.naveedulhaq.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.naveedulhaq.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.naveedulhaq.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.naveedulhaq.com\/index.php\/wp-json\/wp\/v2\/comments?post=1188"}],"version-history":[{"count":0,"href":"https:\/\/www.naveedulhaq.com\/index.php\/wp-json\/wp\/v2\/posts\/1188\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.naveedulhaq.com\/index.php\/wp-json\/wp\/v2\/media?parent=1188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.naveedulhaq.com\/index.php\/wp-json\/wp\/v2\/categories?post=1188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.naveedulhaq.com\/index.php\/wp-json\/wp\/v2\/tags?post=1188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}