Skip to main content

30 Angular and TS tricks and tips that will improve your application

Angular

1. Define form parameters before Component definition

2. Use renderer addClass, removeClass where possible. It will prevent too many change detection checks.

3. Try to use get, set on Input() instead ngOnChanges. When you have many Inputs in the ngOnChanges, each “if” has to be checked.

4. Use pipe when rendering content in ngFor

5. Add baseUrl and path to your compilerOptions to avoid any inconsistency when importing other files

6. Add stylePreprocessorOptions to your angular.json file to avoid inconsistency while importing other files

7. Run npm outdated command or add npm-check once a month to keep your dependencies updated. It will definitely help you keep track of changes. It’s much easier to update Angular 5 to 6 than 4 to 6.

8. Run npm audit command once a month to check if any of the libraries has any vulnerabilities. It will help you keep your app secure.

9. Use parent in form validation instead of this.form which may not be initialised while doing/performing custom validation check.

10. Keep route names as const. It will prevent accidental typos.

11. Start using webpack-bundle-analyzer. It will help you detect any fast-growing modules.

In our case by mistake main.scss has been included in another file instead variable.scss. It has doubled the size of the bundle !

12. Use browser Performance tests. 17ms rendering time means you use 60fps. Actions with fewer than 60fps and more than 30fps are ok. Any speed below 30fps makes the user notice the visualized slowdown of the application.

 

30 Angular and TS tricks and tips  that will improve your application

13. Use Augury chrome extension to track the current state of components.

https://augury.rangle.io

14. Prettier as code formatter

Example config:

To prevent conflicts between tslint and prettier use
https://www.npmjs.com/package/tslint-config-prettier

Typescript

15. declare keyword – create a custom type when the native one doesn’t exist. It’s great for typing in if the JS libraries hasn’t been typed.

http://blogs.microsoft.co.il/gilf/2013/07/22/quick-tip-typescript-declare-keyword

16. Declare dictionary key and value types arg: { [key: string]: number }. Each value of this object will be typed as a number

17. Ampersand operator:

18. Declare tuple types

19. Big figures
You can use _ as a digit separator to make big figures more readable

let bigNumber = 123_456_678;

let bigNumber = 123456678;

20. Abstract class

TSlint

21. Reduce the number of any types:

Add no-unsafe-any: {“severity”: “warning”} to tslint – you will get a warning when any type is used in the code.

To track the number of unsafe-any exists in your project by `npm run lint | grep WARNING | wc -l`.

To prohibit an increased number of unsafe-any add this bash script to your CI pipeline.

this will cause the pipeline to crash when the number of unsafe-any will be greater than 100.

22. Add no-string-literal to tsconfig – disallowed to access key by obj[‘key’], only obj.key allowed.

obj[‘key’] won’t throw a compilation error, even if the key is not defined. It’s a good way to prevent “cheating” on TypeScript.

23. Force generic types:

“no-inferrable-types”: [

true,

“ignore-params”

],

Will crash lint when explicit type declarations are found e.g.

24. Reduce code complexity

Add “parameters-max-number”: [true, 10] to tsconfig – it will set the maximum number of parameters that can be added to the function.

“cognitive-complexity”: [true, 10] – disallows you to add more than 10 “if/else/switch” statements in the function.

“no-big-function”: [true, 100] – set the maximum number of lines per function

25. Keep your codebase clean and dry:

no-commented-out-code to tsconfig – doesn’t allowed to keep commented code

“no-duplicate-string”: [true, 5] – linter will crash when it finds the same string used more than 5 times. It forces the programmer to create variables for common stuff/ elements.

26. Add “noImpicitAny”: true to tsconfig – it will throw a compilation error when the types cannot be inferred or inferring them might result in unexpected errors

27. Add “noImplicitReturns”: true to tsconfig – it will throw a compilation error when you try to return different types in each if statement

28. Add “strictFunctionTypes”: true to tsconfig – it will throw a compilation error when an incorrect parameter is applied to the function.

29. Add “noUnusedParameters”: true to tsconfig – it will throw a compilation error when an unused function parameter is detected. Arguments started with underscore are allowed.

30. Add “noUnusedLocals”: true to tsconfig – it will throw a compilation error when unused variables or imports are found in the code.

 

See also 30 Angular questions that help you get hired by Espeo

 

Author of TypeScript and TSLint rules: Przemysław Pietrzak

Sebastian Superczynski