Typescript Coding Convention

1. Use correct data type annotation ( avoid ‘any’ )

• Data type annotation is one of the advantages you have when coding in TS, while JS defines data types in the run time. defining data types in TS saves you from weird run time errors that can occur by mistakes.

• Do not use ‘any’ keyword when you know what type of data your variable’s gonna hold. It is recommended that you always define the data type whenever you declare a new variable.

Good Example:

name: string = “Hello”

value: number = 50

isCorrect: boolean = false

2. Use ‘let’ instead of ‘var’

Var is your good old friend while let came into the picture in ES6 version.

Let and const were introduced to reduce some drawbacks TS had with var. Var is either a global scope or a local scope declaration. A var type variable becomes a globally scoped variable when it is defined outside a function/block.

In that case the variable is available to be used anywhere inside your script. Var becomes locally scoped when it is defined inside a function. In those cases it is only accessible inside that function.

var name= "John Doe"; // global scope variable
function getAge() {
var age= 30; // local scope variable
}

There are several drawbacks of var. It can be redeclared, can be called without declaring it. TS won’t show any error but you will end up with surprising outputs.

var name = "John Doe";
function getName(){
var name = "Anne"; // no error is showed
}

To avoid this, you should use let instead. let is a blocked scope variable declaration. And you cannot redeclare it. But you can declare the same variable name in different scopes, and each of them will be treated as separate different variables.

let name = "John";
if (true) {
let name = "Anne";
console.log(name); // "Anne"
}
console.log(name); // "John"

3. Use ‘const’ for constants

Const came in to the picture together with let. Const is also a blocked scope type. Also we cannot re-declare a const. These are the similarities between let and const.

However the purpose of const comes with the feature that it’s value cannot be updated either (We could update with let). So always use const when you declare a constant.

const name = "John";
name = "Anne";// error
const age = 30;
const age = 31; //error
P.S: When declaring const objects, you cannot update it.
But you can update it’s properties.

4. Use tuples for fixed length arrays

let marks: number[] = [1, 2, 3];

You can use the above ‘marks’ array to store different number of items in different places of the same script. TS is not gonna restrict you as long as you provide all the values with the correct defined data type.

let marks: number[] = [1, 2, 3];
marks = []; // success
marks = [1]; // success
marks = [1, 2, 3, 4, 5]; // success

However this can lead to nasty logical errors in cases where the array length is a constant. To avoid these you should use array as a tuple, whenever the size should be a fixed size. Tuple is a properly defined array with each of the expecting value’s data type.

let marks:[number, number] = [1, 2]; // tuple of 2 number values
marks = [10, 20]; // success
marks = [1]; // syntax error
marks = [1, 2, 3, 4, 5] // syntax error

5. Use type aliases in repetitive data types

Assume that you have multiple variables/ objects in your script which all follow the same structure of data types.

let man: {name: string, age: number} = {name = "john", age=30}
let woman: {name: string, age: number} = {name = "Anne", age=32}

to avoid this redundant chunks of type declarations and to re-use types, you can use type aliases.

type Details = {name: string, age: number} // defining type alias
let man: Details = {name = "john", age=30} // using type alias
let woman: Details = {name = "Anne", age=32}

The additional benefit of using a type alias is, your intention of defining the data is now clearly visible.

6. Decide between ‘any’ and ‘unknown’

Any and unknown does the same help if you look from the surface. They help you to easily refactor JS to TS when JS gives you no clue about the data types. In these kind of scenarios or when you don’t really know what type of data to expect, any and unknown comes to help. But there is a difference.

let anyExample: any; // defining an any
let unknownExample: unknown; // defining an unknown
anyExample = 123;
anyExample = "Hey"
unknownExample = false;
unknownExample = 23.22;

However, you can do anything with ‘any’, when it comes to calling functions of that variable.

anyExample.you.made.this.code.chain(); // success

But you can’t do this with unknown. unknown is safer.

unknownExample.trim(); // syntax error

If you wanna use unknown variable, you have to do it inside a condition block.

if (typeof exampleUnkown == "string") { // 1st check the type
exampleUnkown.trim(); // No syntax error now
}

You can use whatever value with both any and unknown type variables.

7. Use access modifiers for class members

TS comes with access modifiers for properties of a class, while classes are always public. You can create public, protected or private properties.

• private: only accessible inside the class

• protected: only accessible inside the class and through subclasses

• public: accessible anywhere

class Employee {
protected name: string;
private salary: number;
constructor(name: string, salary: number) {
this.name = name;
this.salary = salary
}
public getSalary(){
return salary
}

Here, you cannot access the salary unless you use the getSalary method.

class Developer extends Employee{
viewDetails(){
console.log(this.salary); // error: property 'name' is private
console.log(this.getSalary()); // success
}
}

But you can access the name through a sub class.

class Developer extends Employee{
viewDetails(){
console.log(this.name);
}
}

8. Avoid unnecessary comments

Commenting is good as long as it is absolutely necessary. Always try to use intuitive names when naming variables and functions. It will reduce the necessity for you to add comments.

Do not comment out source code lines. In debugging it is acceptable but keep in mind not to push commented out source code.

This is some best practice for TS you can research and apply other if necessary for coding Links[1] Vuejs Guide, https://v2.vuejs.org/v2/style-guide/Coding conventions