Home A - Z
Page Index

Blame

ab4dba Melisha Dsouza 2026-01-14 15:41:52 1 
# **TypeScript**
2
3
#### **Best Coding Practices:**
4
5
| Standard Area | Recommended Practice | Purpose / Example |
6
| -------------------- | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
7
| Variable Declaration | **Immutability:** Use `const` by default. Use `let` only if reassignment is strictly needed. Never use `var`. | **Purpose:** Makes code logic predictable; reduces side effects. |
8
| Booleans | **Named as Questions:** Boolean variables must strictly use prefixes like `is`, `has`, `should`, or `can`. | **Purpose:** Immediate semantic understanding.<br><br>**Bad:** `const visible = true`<br>**Good:** `const isVisible = true` |
9
| Asynchronous Logic | **Async/Await:** Prefer `async/await` syntax over `.then()` chains. | **Purpose:** Makes async code look like synchronous code; easier to debug.<br><br>**Exception:** Parallel execution using `Promise.all`. |
10
| Imports | **Type Imports:** Use `import type { ... }` when importing interfaces or types. | **Purpose:** Helps the bundler remove non-code imports, reducing bundle size.<br><br>**Example:** `import type { User } from './types'` |
11
| Arrays | **Generics Syntax:** Prefer `Array<Type>` for complex types and `Type[]` for primitives. | **Purpose:** Improves readability.<br><br>**Primitive:** `string[]`<br>**Complex:** `Array<Record<string, unknown>>` |
12
| String Handling | **Template Literals:** Use backticks (`` ` ``) for concatenation instead of `+`. | **Purpose:** Cleaner syntax and easier multi-line strings.<br><br>**Example:** `` `Hello ${name}` `` is better than `'Hello ' + name` |
13
| Switch Statements | **Exhaustiveness Check:** Use a `never` type check in the `default` case of a switch statement. | **Purpose:** Ensures that if you add a new case to a Union type, the compiler forces you to handle it in the switch. |
14
15
16
#### **Best Linting Practises:**
17
18
| Tool | Rule Type | Typical Setting |
19
| ------------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
20
| Prettier | Style / Formatting | **Indentation:** 2 or 4 spaces (No Tabs).<br>**Quotes:** Single or Double (choose one).<br>**Semicolons:** Always or Never (choose one). |
21
| ESLint (`@typescript-eslint`) | Code Quality / Best Practice | `@typescript-eslint/no-unused-vars`: Disallow unused variables.<br>`@typescript-eslint/explicit-function-return-type`: (Optional but helpful) Require function return types.<br>`no-console`: Disallow `console.log` (especially in production code). |
22
| ESLint (`eslint-plugin-import`) | Module / Import Quality | `import/order`: Enforce a consistent order for imports.<br>`import/no-unresolved`: Ensure imports point to existing files. |
23
24
25
#### **Recommended Extensions for VScode:**
26
27
| Extension Name | Publisher | Function |
28
| ------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
29
| ESLint | Dirk Baeumer | Integrates ESLint into VS Code, showing errors and warnings directly in the editor and providing quick fixes. Essential for linting enforcement. |
30
| Prettier – Code formatter | Esben Petersen | Formats code using Prettier. Essential for enforcing consistent code style. |
31
| EditorConfig for VS Code | EditorConfig | Maintains consistent coding styles across multiple developers and editors by using a `.editorconfig` file in the repository root. |
32
33
34
#### **VS Code configuration file for Typescript Linting:**
35
36
```
37
{
38
"editor.formatOnSave": true,
39
"editor.defaultFormatter": "esbenp.prettier-vscode",
40
"editor.codeActionsOnSave": {
41
"source.fixAll.eslint": "explicit"
42
},
43
"[typescript]": {
44
"editor.defaultFormatter": "esbenp.prettier-vscode"
45
},
46
"[typescriptreact]": {
47
"editor.defaultFormatter": "esbenp.prettier-vscode"
48
}
49
}
50
51
```
52
53
#### **Recommended TS Config file:**
54
55
```
56
57
export = {
58
rules: {
59
'@typescript-eslint/ban-ts-comment': 'error',
60
'no-array-constructor': 'off',
61
'@typescript-eslint/no-array-constructor': 'error',
62
'@typescript-eslint/no-duplicate-enum-values': 'error',
63
'@typescript-eslint/no-empty-object-type': 'error',
64
'@typescript-eslint/no-explicit-any': 'error',
65
'@typescript-eslint/no-extra-non-null-assertion': 'error',
66
'@typescript-eslint/no-misused-new': 'error',
67
'@typescript-eslint/no-namespace': 'error',
68
'@typescript-eslint/no-non-null-asserted-optional-chain': 'error',
69
'@typescript-eslint/no-require-imports': 'error',
70
'@typescript-eslint/no-this-alias': 'error',
71
'@typescript-eslint/no-unnecessary-type-constraint': 'error',
72
'@typescript-eslint/no-unsafe-declaration-merging': 'error',
73
'@typescript-eslint/no-unsafe-function-type': 'error',
74
'no-unused-expressions': 'off',
75
'@typescript-eslint/no-unused-expressions': 'error',
76
'no-unused-vars': 'off',
77
'@typescript-eslint/no-unused-vars': 'error',
78
'@typescript-eslint/no-wrapper-object-types': 'error',
79
'@typescript-eslint/prefer-as-const': 'error',
80
'@typescript-eslint/prefer-namespace-keyword': 'error',
81
'@typescript-eslint/triple-slash-reference': 'error',
82
'@typescript-eslint/await-thenable': 'error',
83
'@typescript-eslint/ban-ts-comment': 'error',
84
'no-array-constructor': 'off',
85
'@typescript-eslint/no-array-constructor': 'error',
86
'@typescript-eslint/no-array-delete': 'error',
87
'@typescript-eslint/no-base-to-string': 'error',
88
'@typescript-eslint/no-duplicate-enum-values': 'error',
89
'@typescript-eslint/no-duplicate-type-constituents': 'error',
90
'@typescript-eslint/no-empty-object-type': 'error',
91
'@typescript-eslint/no-explicit-any': 'error',
92
'@typescript-eslint/no-extra-non-null-assertion': 'error',
93
'@typescript-eslint/no-floating-promises': 'error',
94
'@typescript-eslint/no-for-in-array': 'error',
95
'no-implied-eval': 'off',
96
'@typescript-eslint/no-implied-eval': 'error',
97
'@typescript-eslint/no-misused-new': 'error',
98
'@typescript-eslint/no-misused-promises': 'error',
99
'@typescript-eslint/no-namespace': 'error',
100
'@typescript-eslint/no-non-null-asserted-optional-chain': 'error',
101
'@typescript-eslint/no-redundant-type-constituents': 'error',
102
'@typescript-eslint/no-require-imports': 'error',
103
'@typescript-eslint/no-this-alias': 'error',
104
'@typescript-eslint/no-unnecessary-type-assertion': 'error',
105
'@typescript-eslint/no-unnecessary-type-constraint': 'error',
106
'@typescript-eslint/no-unsafe-argument': 'error',
107
'@typescript-eslint/no-unsafe-assignment': 'error',
108
'@typescript-eslint/no-unsafe-call': 'error',
109
'@typescript-eslint/no-unsafe-declaration-merging': 'error',
110
'@typescript-eslint/no-unsafe-enum-comparison': 'error',
111
'@typescript-eslint/no-unsafe-function-type': 'error',
112
'@typescript-eslint/no-unsafe-member-access': 'error',
113
'@typescript-eslint/no-unsafe-return': 'error',
114
'@typescript-eslint/no-unsafe-unary-minus': 'error',
115
'no-unused-expressions': 'off',
116
'@typescript-eslint/no-unused-expressions': 'error',
117
'no-unused-vars': 'off',
118
'@typescript-eslint/no-unused-vars': 'error',
119
'@typescript-eslint/no-wrapper-object-types': 'error',
120
'no-throw-literal': 'off',
121
'@typescript-eslint/only-throw-error': 'error',
122
'@typescript-eslint/prefer-as-const': 'error',
123
'@typescript-eslint/prefer-namespace-keyword': 'error',
124
'prefer-promise-reject-errors': 'off',
125
'@typescript-eslint/prefer-promise-reject-errors': 'error',
126
'require-await': 'off',
127
'@typescript-eslint/require-await': 'error',
128
'@typescript-eslint/restrict-plus-operands': 'error',
129
'@typescript-eslint/restrict-template-expressions': 'error',
130
'@typescript-eslint/triple-slash-reference': 'error',
131
'@typescript-eslint/unbound-method': 'error',
132
},
133
};
134
```
135
136
#### **Scripts to add to package.json**
137
138
```
139
"scripts": {
140
"type-check": "tsc --noEmit",
141
"lint": "eslint . --ext .ts,.tsx",
142
"lint:fix": "eslint . --ext .ts,.tsx --fix",
143
"format:check": "prettier --check \"**/*.{ts,tsx,json,css,md}\""
144
}
145
```
146
147
#### **Commands to check on whether repository is following Lint:**
148
149
```
150
npm run lint
151
npm run format:check
152
```