Search for a command to run...
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...
I am developer from south-east asia, Singapore. I have more than 10years of development experience. In my leisure time, I like to read and write poems. I am passionate about tech and coding.
No comments yet. Be the first to comment.
Writing better code is always a challenge in any programming language. Before wring good code, you should have a better understanding of the programing language. Reading an entire book is time-consuming. At the same time, It will be hard to remember ...
A Decorator is a special kind of declaration that can apply to a function to enhance its functionality. This is also called known as metaprogramming.
Write clean codes using JavaScript Generators
Working with JavaScript has never been easy. You always required continuous learning and exploration of new APIs/specs. One of the toughest things
Coding for a multilingual application is always challenging. Most of the time you end up adding some third-party library. Using basic React you can...
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.
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.
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.
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.
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.
tsc --initExamples:
To read more on changes/features introduce to TypeScript, Read this.
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.
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.