I’m Not Using JavaScript Anymore | TypeScipt vs JavaScript

For the past few years, I have almost stopped writing JavaScript. You may ask why. It doesn't mean I don't like JavaScript. However...

Subscribe to my newsletter and never miss my upcoming articles

For the past few years, I have almost stopped writing JavaScript. You may ask why. It doesn't mean I don't like JavaScript. However, there is a better version of JavaScript, TypeScript. Yes, I have started developing all my library and application in TypeScript. It includes the backend too.

Here in this article, I will try to answer the question of why you should use TypeScript instead of JavaScript. This article does not cover the pros and cons of JavaScript. Rather than just focus on Good Parts of TypeScript.

Chapter 1. The Beginning

As you may know, Every story starts somewhere. I have worked on TypeScript long back ago. However, Sometimes I didn't like it. Sometimes, I felt, it is too hard to maintain so I skipped it. However, When I started working on Angular. I didn't have that privilege to ignore TypeScript. All the code has been written in TypeScript. Even the examples are given in TypeScript. TypeScript was the first and last choice in Angular. So I had to level up my TypeScript knowledge.

My first reaction was bad. It is just me, I don't like thing when it forced on me. But as I mentioned, I didn't have a choice. Since we were working on a big library at that time. I do have to support a lot of stakeholders (developer in this case). Soon I realise, the more code grows in size. It reduces my effort to spend time explaining things. That how my first impression changed.

Chapter 2. How and where to start with

OK, Now I start liking TypeScript. Things were still not clear. I am one of the tech leads. I do have to create new libraries and utilities. Working on something created it easy. But building from scratch requires your understanding of that language. Although, TypeScript is JavaScript. However, the lifecycle is a bit different. Creating JavaScript requires a few other .js files and a node package manager(npm). Babel, If you do want to write code in the latest ECMA standard.

As you can see, You have one main.js which contains source code. __test__ contains all the test cases and package.json, metadata to package.

// main.js

const greetings = (name) => \`Hello, ${name}\`;

module.exports = {  
 greetings,  
};

// package.json

{  
 "name": "js-module",  
 "version": "1.0.0",  
 "description": "",  
 "main": "main.js",  
 "scripts": {  
 "test": "node \_\_test\_\_/geetings.test.js"  
 },  
 "keywords": \[\],  
 "author": "xdeepakv",  
 "license": "ISC"  
}

// geetings.test.js

const assert = require("assert");  
const { greetings } = require("../");

assert.strictEqual(greetings("Deepak"), "Hello, Deepak");

Pretty simple right. Yeah, maybe this is one of the simplest modules in this world. But TypeScript, you need some extra decorators(files) like TypeScript config. You do need to setup compiler options.

In the beginning, the TypeScript community was new. So I struggle a lot to find the correct config. Same time lot of people were facing similar issues on StackOverflow. Basic TypeScript resources were OK. But, It was not good enough to build the library with proper CI/CD.

Note: I explain the step-step guild to build the TypeScript module in later sections. Hold the beer for that time.

Chapter 3. What to build

After long research and discussion, We finalize the starter/scaffolding for our libraries. The next question was, What should we build using TypeScript. Only basic frontend libraries. We do have a few command-line tools, a few backend apps. How should we make a guideline to select the language(js/types)? Since we already had positive feedback from our last work. So we decided to build as much we could. We start building libraries, react components, CLI tools and even I go further. I have built some backend apps using TypeScript and GraphQL. If you want to learn more, please do check out my article build-a-scalable-graphql-server-using-TypeScript.

Chapter 4. Why to use TypeScript

The bad parts in JavaScript are solved in TypeScript it becomes good parts of it. Just kidding. TypeScript does not try to solve the bad part of JavaScript. However, It tries to minimise the mistake/blunder causes by those bad parts. In another sense, It compliments the JS bad parts by providing better support.

Chapter 5. The Good Parts of TypeScript

  1. Start a new project config: TypeScript has CLI to create a new config in a project. tsc --init
  2. Support all the browser and ECMA standard: TypeScript compiler option you can provide the target ECMA standard.
  3. Define the source folder(Inclusion): Since working on node.js, Everything is “.js”. The biggest challenge was to separate the source code from the rest of the script. TypeScript config makes it very simple. It also supports include and exclude options. Same time with the support of paths, You don't have to write long import statements.
  4. Support for Strict rule: Before using TypeScript, I had to use eslint and another linter module to enable some basic rule like avoid nulls. However, TypeScript does support such basic rules. There are plenty of such rules that can be used. If you are looking for more hold on rules. You may want to check tslint. It also supports to import rule from some standard libraries.
  5. Backward compatibility: TypeScript is backed by Microsoft. And its community is very strong. They do frequent release, the same time they do have better backward compatibility. Now, The transition from one version to another is very smooth(that was not the same when I was using TypeScript 2).
  6. JavaScript Support: If you are using TypeScript, It doesn't mean you can't use JavaScript. Anyhow, TypeScript is a superset of JS. TypeScript does support JavaScript. You just need to enable allowJS flag in tsconfig.
  7. Superset of JavaScript: This was the biggest key points for me, that I started using TypeScript. TypeScript always ahead and align to ECMA standard. When ECMA standard releases new specs. It is added in TypeScript way before it implemented in the browser. For those who don't know about ECMA standard. Please read this wiki.

Examples:

To read more on changes/features introduce to TypeScript, Read this.

Chapter 6. Happy Ending/Continued…Takeaways

Like every other story, This journey has its own ending. Till now, I am happy with the uses of TypeScript. But It doesn't mean, I had stopped here. I started looking some another language like Deno and explore the options. However, the community is still young and it will take time to grow. But It seems promising. It will go longer that is my belief.

Photo by Alex on Unsplash

How to create a script module

As I promise, I will tell you step by step how to create a TypeScript module. Here are the steps, you can take to convert the above create JavaScript module to TypeScript.

1. Add TypeScript: npm i — save-dev typescript

2. Init TypeScript config: npx tsc --init

3. Update folder structure:

4. Update basic config to tsconfig.json:

{  
 "compilerOptions": {  
 "target": "es5",  
 "module": "commonjs",  
 "strict": true,  
 "esModuleInterop": true,  
 "rootDir": "./src",  /* define src directory*/
 "outDir": "./lib" /* define js output directory*/
 }  
}

5. Add build script in package.json and main.ts:

// main.ts

export const greetings = (name: string) => \`Hello, ${name}\`;

// package.json

{  
 "name": "js-module",  
 "version": "1.0.0",  
 "description": "",  
 "main": "lib/main.js",
 "scripts": {  
 "build": "tsc",  
 "test": "node \_\_test\_\_/geetings.test.js"  
 },  
/// rest of the code.

}

You have created a basic TypeScript library. To create an advance module, I will recommend using tsdx: Zero config CLI.

Thanks, I hope you liked this article. Please thumbs up for support and care. Cheers!


I’m Not Using JavaScript Anymore was originally published in JavaScript in Plain English on Medium.

No Comments Yet