Some Clean Code Examples in TypeScript

Nowadays, JavaScript is common language that we use to make a web app or web page. Usually, coders us React, Vue and Angular to make nice web page and ExpressJS to make a web app. In this story i want to share about some clean code rule and examples that i implement in my project this semester. In this semester, me and my team develop a web based app called Crowd+.

Use Meaningful Names

The first rule of clean code in use useful names that represent the purpose of the variable or function. If we use weird name, it will make other developer who work with us can’t understand our code easily.

Async Function to Register a User

Form Hooks to Handle Email Input

Mask Value with Constant Variable

To make us easier when debugging or changing the code, we can mask a value with a constant to make it same globally in the app and also prevent us to change the value one by one if we want to change it with a new value.

Mask Regex with Constant Variable

Beside that, we can easily find that variable in our app.

Use Implicit Types over Explicit Types

Types in TypeScript is powerful thing that we can use to make our code more understandable. Some type that we implement may be not useful because it makes our code have more words than usual, we can use TypeScript engine to infer the type to the variable that we make.

Clean Variable

Variable with Useless Type Declaration

We can use Explicit Types when we need to initiate an object that we want to assign a type to it.

BasicLoginData Object

Don’t Overuse “Any”

TypeScript is created to make our JavaScript app can be type-safe, so we can code more confidently because we hold on the type that we assign to the variable. If we use “any” type, we kind of turn off the type feature. We may use “any” if our variable is used to store more than one type for temporary.

Action Data is Used to Store Action Data

Avoid Export Default

Export default enable us to change the name when we import an exported variable from other modules. To avoid that, we may export the variable one by one explicitly.

LOGIN_URL and MAIN_URL was Exported One by One

The Way We Import Them

Place All The Types in One File

Our app maybe has many type that we’ve been declared. We may create a file that contain all the type that we declare to make us easier to manage all of the type.

A File that Contains Types

Use Primitive Types

When we create a new variable that contain a basic value like number, string, or boolean. We may use primitive types rather than Non-Primitive type.

Use boolean Rather than Boolean

Tips

In real world, clean code has many rule to follow. You can use a tool called “linter”. Most common linter in TypeScript is ESLint. The linter will scan your code and give some warning if your code don’t follow the rule that you declare. To install the linter you can use this command.

yarn add eslint --dev

Before you use ESLint, you must make .eslintrc.json file that contains all of the rule and linter configuration. You can use this command to generate basic configuration file.

yarn run eslint --init

Example of .eslintrc.json

For detailed information about .eslintrc.json you can read in this link. After that you can scan your code using ESLint. Use this command to do it.

npx eslint <target folder>

Maybe that’s all of the example of clean code and some tips that i implement in my project this semester, hopefully this article will be useful.

References

Clean Code Explained - A Practical Introduction to Clean Coding for Beginners

How to Keep your TypeScript Code Clean