Setting up a vanilla Typescript project the right way
Published: 2021-10-04 13:48:38

<p>Are you new learning typescript or you are an experienced typescript developer? chances are you have the urge to use it in any and every project rather than using plain javascript maybe because it gives you that sense of security. If by any chance you haven't heard about typescript or have heard of it but never tried it (which i doubt is possible lol) ,Typescript is superset of Javascript which means it is essentially javascript with more features. Typescript is optionally statically typed which means you have to option to write code which has type checking during compile time. I am not gonna talk to much about that here, this is <a target="_blank" href="https://eslam-7ot.hashnode.dev/typescript-basics-types">eslam's article on typescript</a> and also the offical <a target="_blank" href="https://www.typescriptlang.org/">doc</a> if you want to learn more about it.</p> <h1 id="a-problem-to-be-solved">A problem to be solved</h1> <p> Typescript is awesome no doubt but sometimes using it with just plain html and css was hassle for me . Running the <code>tsc</code> command every five minutes to see my changes was really annoying . I even tried <code>tsc --watch</code>, this worked for a while but presented me with a problem, it would compile every typecript file i create into their separate javascript counterpart. And using custom modules became a problem. I began to wonder if there was a way to compile all my typescript code including modules into a single javascript bundle. I made my research and I discover there was a way.</p> <h1 id="the-solution">The solution</h1> <p>After searching through google and eventually youtube, I realize that there weren't many articles or video to solve this problem, could it be that most people only use typescript in frameworks such as React or Angular and never use it with plain html or css? who knows. I eventually found a way thanks to <a target="_blank" href="https://www.youtube.com/c/CodingEntrepreneurs">codingEnterpreneurs</a> youtube channel. He did a variation of this in his youtube channel on his learn typescript playlist you can checkout his playlist <a target="_blank" href="https://youtu.be/yRQlo6ApYLw?list=PLEsfXFp6DpzQMickZgPq0Pn2uQD77UXoi">here</a>. Subscribe to his channel if you find his content interesting (I am not an affiliate or anything I just value good content, although I wish I were I wouldn't be broke all the time lol). With that said , this was one of the few solutions I found which is what inspired me to write this article. Without wasting any more time let's get to it!</p> <h1 id="getting-started-with-the-project">Getting started with the project</h1> <p>Before we anything we need the following for this to work:</p> <ul> <li>nodejs</li> <li>npm</li> <li>git</li> <li>typescript</li> <li>webpack and webpack-cli</li> <li>ts-loader</li> </ul> <p>Now let's Go!</p> <p>In your projects root directory:</p> <pre><code>npm <span class="hljs-keyword">init</span> -y </code></pre><blockquote> <p>This will create a package.json file.</p> </blockquote> <p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629664613455/8--rNO4jD.png" alt="packagejson-created.PNG" /></p> <p>initialize git with:</p> <pre><code> git <span class="hljs-keyword">init</span> </code></pre><p>create .gitignore file (so we can ignore the node modules folder that will be created when we install our dependencies)</p> <p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629666629681/ndIvL0evG.png" alt="gitignore-file-created.PNG" /></p> <p>in the .gitignore file add:</p> <pre><code>node_modules </code></pre><p></p><h2>Installing the required dependencies</h2><p></p> <hr /> <p>Install webpack and webpack-cli</p> <pre><code><span class="hljs-built_in">npm</span> install webpack webpack-cli </code></pre><p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629666677965/9PpvNnEQS.png" alt="installing_webpack.PNG" /></p> <p>Install typescript and ts-loader</p> <pre><code><span class="hljs-built_in">npm</span> install typescript ts-loader </code></pre><p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629666702101/z8piEaP_-.png" alt="installing_typescript.PNG" /></p> <p>You should now see all our installed dependencies in the package.json file under the dependencies property</p> <p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629666716303/JNUZ01tlZ.png" alt="dependencies.PNG" /></p> <p> Now we will create two folders: </p><ul> <li> public </li> <li> src </li> </ul> <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629666735322/K0HrpGa_O.png" alt="create_public_and_src_folders.PNG" /> <p></p> <p> In public, we will create our index.html, static folder and our assets folder <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629666810439/ncWPEVY5D.png" alt="files_in_public.PNG" /> index.html is our html file (obviously lol) assets folder will contain files such as images,svgs, videos and so on static folder will contain two additional folders: </p><ul> <li> css =&gt; this would contain our styles </li> <li> bundle =&gt; this would be the destination of our compiled typescript code by webpack </li> </ul> <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629666833927/U25DMCIpvr.png" alt="files_in_static.PNG" /> <p></p> <p> In src, create index.ts files and tsconfig.json <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629666850732/Nkv7L1Ldy.png" alt="files_in_src.PNG" /> </p> <p>Add this to tsconfig.json:</p> <pre><code>{ <span class="hljs-attr">"compilerOptions"</span>: { <span class="hljs-attr">"target"</span>: <span class="hljs-string">"es5"</span>, <span class="hljs-attr">"module"</span>: <span class="hljs-string">"ESNEXT"</span>, <span class="hljs-attr">"rootDir"</span>: <span class="hljs-string">"./"</span>, <span class="hljs-attr">"strict"</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">"moduleResolution"</span>: <span class="hljs-string">"node"</span>, <span class="hljs-attr">"allowSyntheticDefaultImports"</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">"esModuleInterop"</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">"skipLibCheck"</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">"forceConsistentCasingInFileNames"</span>: <span class="hljs-literal">true</span> } } </code></pre><p>In the root directory, create webpack.config.js files and add this to the file:</p> <pre><code><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">"path"</span>); <span class="hljs-built_in">module</span>.<span class="hljs-built_in">exports</span> = { mode: <span class="hljs-string">"production"</span>, entry: path.resolve(__dirname, <span class="hljs-string">"./src/index.ts"</span>), <span class="hljs-keyword">module</span>: { rules: [ { test: <span class="hljs-regexp">/\.ts?$/</span>, use: <span class="hljs-string">"ts-loader"</span>, exclude: <span class="hljs-regexp">/node_modules/</span>, }, ], }, resolve: { extensions: [ <span class="hljs-string">".ts"</span>, <span class="hljs-string">".js"</span>], }, output: { filename: <span class="hljs-string">"script.js"</span>, path: path.resolve(__dirname, <span class="hljs-string">"public"</span>, <span class="hljs-string">"static"</span>, <span class="hljs-string">"bundle"</span>), }, }; </code></pre><p> what does this file do? well it essential gives webpack information such as what file to compile and what folder to compile to. For instance, the entry property above tells webpack what file we are compiling which is index.ts in src which we created earlier (note we used the path module to <em>resolve</em> the path to the index.ts file no pun intended). filename in the output property tells webpack what to name the compiled javascript bundle and path tells webpack where to place the javascript bundle which we have set to ./public/static/bundle (again we used the path module to resolve the path).You can change the name of the bundles output file to whatever you want just rember to point your html to that javascript bundle in your script tag. </p> <p> open up the package.json file and under scripts <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629666877517/LHOJJl5vF.png" alt="scripts_packagejson1.PNG" /> Add the start and build script shown below <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629666890557/--39YbnNb.png" alt="scripts_packagejson2.PNG" /> </p> <blockquote> <p>that wraps up everything with the configs</p> </blockquote> <p><b>We are almost there </b></p> <p> In our html let up set up our boilerplate and include our css and our bundled javascript (script.js which we named it in the webpack config this is important!!!) <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629666908124/tdt6h_2b8.png" alt="boilerplatehtml.PNG" /> </p> <p> now in css (in the static folder) create style.css so we can add some styles <br /> <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629668955527/NyL-G9PEz.png" alt="styles.PNG" /> </p> <p> </p><h3> Running your html</h3> if you are like me and you are using vscode there is a 95% chance you have liveserver extension installed run the html with liveserver or if you don't just open it in your browser. You should see this page: <br /> <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629667025289/6nS73F4OI.png" alt="htmlPage.PNG" /> <p></p> <p>Open your terminal/command prompt</p> <pre><code>(assuming you are <span class="hljs-keyword">in</span> the projects the root directory) npm <span class="hljs-keyword">start</span> </code></pre><p> This should run the start script that we set to webpack --watch earlier. This compiles our index.ts and recompiles automatically on every change to index.ts . If everything was configured properly this should show up in your terminal. <br /> <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629667064660/YETssKRSr.png" alt="start_script_output.PNG" /> and our script.js file should be generated in bundle <br /> <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629667078483/gvbHfiXHz.png" alt="bundle_created.PNG" /> </p> <p> now that we are done with all the boring stuff let's write some typescript in index.ts <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629667094799/1qy9MvSgC.png" alt="test1.PNG" /> webpack automatically recompiles our code and the change should take effect in the browser because of liveserver. we should see this: <br /> <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629667106358/rumoBgbwI.png" alt="test1_result.PNG" /> </p> <p> now let's code up the logic for the counter example. </p><ul> <li>First we need to select the required html elements <ul> <li> our span tag with id counter-value </li> <li> our button with id increment-btn </li> <li> our button with id decrement-btn </li> <ul> <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629667588641/Rs85orZT4.png" alt="elements_to_select.PNG" /> <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629667495057/e5vKbIf_T.png" alt="select_elements.PNG" /> </ul></ul></li> <li> Next we create a new file in src called helpers which will contain two files <ul> <li> increment.ts which will contain our increment function which we will export <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629667758358/rNt3dCJba.png" alt="incrementFunction.PNG" /> </li> <li> decrement.ts which will contain our decrement function which we will also export <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629667785122/tMwd6VH1q.png" alt="decrementFunction.PNG" /> </li> </ul> </li> <li> then will import these two functions in index.ts <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629668147650/QiyUxrTX3.png" alt="import_modules.PNG" /> </li> <li> Finally the complete snippet <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629668297678/B9zSpl3pN.png" alt="complete_code_snippet.PNG" /> </li> <ul> <p></p> <p></p><h2> Increment count </h2><p></p> <hr /> <p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629669482602/GZQaDLuH_.png" alt="count1.PNG" /></p> <p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629669492238/caKa8lEqk.png" alt="count2.PNG" /></p> <p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629669347988/OQet9xTcT.png" alt="count3.PNG" /></p> <p></p><h2> Decrement count </h2><p></p> <hr /> <p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629669355006/yNZrUPWLD.png" alt="uncount1.PNG" /></p> <p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629669363517/EGaQFqWXV.png" alt="uncount2.PNG" /></p> <p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629669372391/ALCVgcWXE.png" alt="uncount3.PNG" /></p> <p></p><h2> Summary </h2><p></p> <p> Now that we have everything is working fine it might appear like magic or maybe not but either way it is not magic. What essentially is happening is like I said before webpack would bundle all our typescript code including including all modules into a single file which we named script.js. The compiled code looks like this: <br /> <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629671587627/wDztqY4XS.png" alt="compiled_output.PNG" /> looks kinda ugly right? well this what is being run in the browser and we make changes in our typescript code webpack will recompile into the file which will trigger liveserver to reload, showing how changes automatically in the browser. This is a very simple example so you might node see the benefits straight away but in bigger projects relative to this were you don't want to use a framework this in my oppinon can be really helpful. </p> <h1 id="conclusion">Conclusion</h1> <p>Setting this up might seen like a hassle but using typescript with plain html and css has a lot advantages than with plain Javascript for example type checking, and also enables us to split out code into modules which makes everything much cleaner and easier to debug and much more. If you don't want to bother yourself with setting this up yourself you can make your own vanilla typescript project from this <a target="_blank" href="https://github.com/Xavier577/vanilla-typescript-project-template">boilerplate</a> I set up so you don't have to set it up yourself. </p> <h1 id="a-little-bit-about-me-the-author">A little bit about me the Author</h1> <p>If you have read this article to the end, I want you to know that i really appreciate it. My name is Joseph Tsegen, I have training to become a programmer now for 7 months now learning about the web and other technologies. I am aspiring to become a fullstack developer on the path to learn the GNERPT (Graphql Node Express React Postgresql Typescript), I also have interest in Python, Django and Kotlin. I am new to the community here on hashnode, this is in fact my first article please give it a like if you found it interesting or useful and comment on what you think about it and also what you think about building projects with this approach without any framework and what kind of projects you use this for. Feedbacks will be very helpful as it will help access myself and make better content, all feedbacks would be very appreciated. Let me know what you think I could have done better, thank you for reading.</p> </ul></ul>