{"id":9880,"date":"2021-11-18T08:38:05","date_gmt":"2021-11-18T08:38:05","guid":{"rendered":"https:\/\/ui-lib.com\/blog\/?p=9880"},"modified":"2022-06-13T08:54:44","modified_gmt":"2022-06-13T08:54:44","slug":"typescript-to-javascript","status":"publish","type":"post","link":"https:\/\/ui-lib.com\/blog\/typescript-to-javascript\/","title":{"rendered":"Convert TypeScript Project to JavaScript"},"content":{"rendered":"\n<p>We all know TypeScript is an amazing programming language. And we love it! But a lot of time developers still prefer to write codes and build their projects using JavaScript. Here at <a href=\"https:\/\/ui-lib.com\/\"><strong>UI-Lib<\/strong><\/a>, we build templates and UI Kits for both personal and commercial purposes. And many of our UI Kits are developed with TypeScript. However, a large portion of our customers always wants JavaScript as source code. <\/p>\n\n\n\n<p>So, to make our customers satisfied, we built a simple tool that easily converts the whole TypeScript project to a formatted readable JavaScript project. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Convert TypeScript Project to JavaScript <\/h2>\n\n\n\n<p>TypeScript is our main codebase and this is the source of everything. And from this source, beautiful and readable JavaScript will be generated. So, without further delay, let&#8217;s dive into the task and learn how this tool works. And learn how you can create one on your own.<\/p>\n\n\n\n<p>Here,<code>Babel<\/code> is that magician who transforms TypeScript code to readable &amp; editable JavaScript. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Create a folder called <code>tools<\/code> in your TypeScript project (which you&#8217;ll convert to JavaScript).<\/li><li>Create <code>package.json<\/code> or run <code>npm init<\/code> in <code>tools<\/code> folder and paste below content in <code>package.json<\/code><\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n{\n  &quot;scripts&quot;: {\n    &quot;start&quot;: &quot;node convert&quot;\n  },\n  &quot;dependencies&quot;: {},\n  &quot;devDependencies&quot;: {\n    &quot;@babel\/cli&quot;: &quot;^7.15.7&quot;,\n    &quot;@babel\/core&quot;: &quot;^7.15.8&quot;,\n    &quot;@babel\/node&quot;: &quot;^7.15.8&quot;,\n    &quot;@babel\/plugin-transform-typescript&quot;: &quot;^7.15.8&quot;,\n    &quot;@babel\/preset-env&quot;: &quot;^7.15.8&quot;,\n    &quot;@babel\/preset-react&quot;: &quot;^7.14.5&quot;,\n    &quot;@babel\/preset-typescript&quot;: &quot;^7.15.0&quot;,\n    &quot;fs-extra&quot;: &quot;^10.0.0&quot;\n  }\n}\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\"><li>Open terminal in tools folder and run <code>npm install<\/code>.<\/li><li>Create <code>utils.js<\/code>  in <code>tools<\/code> folder and past below code. <ul><li>The <code>buildTree<\/code> function creates a tree structure of all the files in your project.<\/li><li><code>createJsConfig<\/code> function to create jsconfig.json file.<\/li><li>The <code>transformTsToJs<\/code> function uses babel to convert whole project to js.<\/li><\/ul><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-utils-js\">utils.js<\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nvar fs = require(&#039;fs&#039;);\n\nclass TreeNode {\n  path;\n  children;\n\n  constructor(path) {\n    this.path = path;\n    this.children = &#x5B;];\n  }\n}\n\nconst buildTree = (rootPath) =&gt; {\n  const root = new TreeNode(rootPath);\n\n  const stack = &#x5B;root];\n\n  while (stack.length) {\n    const currentNode = stack.pop();\n\n    if (currentNode) {\n      const children = fs.readdirSync(currentNode.path);\n\n      for (let child of children) {\n        const childPath = `${currentNode.path}\/${child}`;\n        const childNode = new TreeNode(childPath);\n        currentNode.children.push(childNode);\n\n        if (fs.statSync(childNode.path).isDirectory()) {\n          stack.push(childNode);\n        }\n      }\n    }\n  }\n\n  return root;\n};\n\nconst transformTsToJs = (node) =&gt; {\n  \/\/   console.log(node);\n  node.children.forEach((childNode) =&gt; {\n    if (childNode.children &amp;&amp; childNode.children.length) {\n      transformTsToJs(childNode);\n    } else {\n      \/\/ transform only ts files\n      if (childNode.path.includes(&#039;.js&#039;) || childNode.path.includes(&#039;.jsx&#039;)) {\n        return;\n      }\n\n      \/\/ Transform\n      let result = require(&#039;@babel\/core&#039;).transformSync(\n        fs.readFileSync(childNode.path),\n        {\n          filename: childNode.path,\n          presets: &#x5B;&#039;@babel\/preset-typescript&#039;],\n          plugins: &#x5B;&#039;@babel\/plugin-transform-typescript&#039;],\n        }\n      );\n\n      \/\/ Save new file\n      let newFilePath;\n      if (childNode.path.includes(&#039;.ts&#039;)) {\n        newFilePath = childNode.path.replace(&#039;.ts&#039;, &#039;.js&#039;);\n      }\n      if (childNode.path.includes(&#039;.tsx&#039;)) {\n        newFilePath = childNode.path.replace(&#039;.tsx&#039;, &#039;.jsx&#039;);\n      }\n\n      fs.writeFileSync(newFilePath, result.code);\n\n      \/\/ delete main ts files\n      if (childNode.path.includes(&#039;.ts&#039;) || childNode.path.includes(&#039;.tsx&#039;)) {\n        fs.unlinkSync(childNode.path);\n      }\n    }\n  });\n};\n\nconst createJsConfig = (outdir) =&gt; {\n  fs.writeFileSync(\n    outdir,\n    `{\n    &quot;compilerOptions&quot;: {\n        &quot;baseUrl&quot;: &quot;src&quot;\n    },\n    &quot;include&quot;: &#x5B;&quot;src&quot;]\n}`\n  );\n};\n\nmodule.exports = {\n  buildTree,\n  transformTsToJs,\n  createJsConfig,\n};\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\"><li>Create a file <code>convert.js<\/code> and paste below code.<\/li><li>Inside <code>Promise.all<\/code> copy all the source files including TS, images, etc. to <code>output<\/code> folder. Your new javascript project will be saved in <code>output<\/code> folder.<ul><li>We created <code>jsconfig.json<\/code> <code>output<\/code> folder.<\/li><li>We built tree structure of output folder and used this to convert all the typescript code to javascript.<\/li><\/ul><\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst utils = require(&#039;.\/utils&#039;);\nconst fse = require(&#039;fs-extra&#039;);\n\nPromise.all(&#x5B;\n  fse.copy(&#039;..\/src&#039;, &#039;output\/src&#039;),\n  fse.copy(&#039;..\/.env&#039;, &#039;output\/.env&#039;),\n  fse.copy(&#039;..\/.gitignore&#039;, &#039;output\/.gitignore&#039;),\n  fse.copy(&#039;..\/public&#039;, &#039;output\/public&#039;),\n  fse.copy(&#039;..\/package.json&#039;, &#039;output\/package.json&#039;),\n  fse.copy(&#039;..\/README.md&#039;, &#039;output\/README.md&#039;),\n])\n  .then(() =&gt; {\n    utils.createJsConfig(&#039;output\/jsconfig.json&#039;);\n\n    const allFiles = utils.buildTree(&#039;output\/src&#039;);\n    utils.transformTsToJs(allFiles);\n  })\n  .catch((err) =&gt; console.log(err));\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Finally Convert Your Project<\/strong><\/h3>\n\n\n\n<p>Lastly, run this command. It will convert your whole project to JavaScript. <\/p>\n\n\n\n<p>Run <code>node convert<\/code> or<code> npm start<\/code> to run the <code>convert.js<\/code> file.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>We hope at this point, you&#8217;ll be able to convert your TypeScript Project to JavaScript. If you face a similar situation like us or just want to convert your TypeScript project to JavaScript then you can use this tool. <\/p>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\">About Us<\/h2>\n\n\n\n<p>At <strong><a href=\"https:\/\/ui-lib.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI-Lib<\/a><\/strong>, we develop fully hand-coded premium software. There are tons of templates, UI Kits, Design Systems &amp; Management systems in our collection. And we made them with popular technologies like Angular, Vue, React, etc. <\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong><a class=\"button\" href=\"https:\/\/uilib.gumroad.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Our Gumroad Profile<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We all know TypeScript is an amazing programming language. And we love it! But a lot of time developers still prefer to write codes and&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/ui-lib.com\/blog\/typescript-to-javascript\/\">Continue reading<span class=\"screen-reader-text\">Convert TypeScript Project to JavaScript<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":9911,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[141],"tags":[366,284,283],"class_list":["post-9880","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","tag-convert-typescript-to-javascript","tag-javascript","tag-typescript","entry"],"_links":{"self":[{"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/posts\/9880","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/comments?post=9880"}],"version-history":[{"count":19,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/posts\/9880\/revisions"}],"predecessor-version":[{"id":10053,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/posts\/9880\/revisions\/10053"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/media\/9911"}],"wp:attachment":[{"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/media?parent=9880"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/categories?post=9880"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/tags?post=9880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}