Contents hide 1) Source Code Documentation In Angular Project 1.1) Classes 1.2) @type (for class property) 1.3) @param and @returns 1.4) @constructor 1.5) @usageNotes 2) Generate Source Code Documentation Using CLI 2.1) Links In this tutorial, we will see how can we write a Better Typescript Source Code Documentation For Angular 10 Projects. Documentation can help the developers to understand the logic and functionality of methods, class, or arguments. You can document your project with an automated documentation generator in which we donβt have to add comments for each method and class, But the issue while the developing projects developers cannot find the documentation at that instant time because the documentation generator doesnβt add comments for us in source code. Source Code Documentation In Angular Project Documentation helps the developers to understand the developers the logic behind the code, even if the developers change it will easy to understand the logic as what to be passed and what to be not. Documentation can be done for each part of the code lets go through one by one. Classes At the initial, whether it is component, service, pipe, or directive. It is contained in the class. A class can be documented by its overall functionality. /** * Class representing a list of products. */ @Component({...}) export class ProductListComponent implements OnInit {...} In case if the class extends some other class we can document that extended class. /** * Class representing a list of products. * @extends ProductType */ export class ProductListComponent extends ProductType {...} @type (for class property) Inside the class, the basic thing we do is declare the class properties we can document that in both ways i.e. by commenting and by defining the type of property. /** * Selected Product types * @type {string[] | null} * @public */ public showProductType: string[] | null = null; // or /** * Selected Product types * @type {string[] | null} * @private */ private showProductType: string[] | null = null; @param and @returns The other thing in class we do is create a method. the method can be of two types a function that returns a value and the other one which performs just logic inside it (i.e. void type). With that, the method can also accept parameters of different types such as string, number, etc. Function with return type and parameters /** * get the product count by its type * @param {string} type : ProductType Name * @return {number} count * @private */ private getProductCount(type: string): number { return this.product[type].count; }; Function with no return type (void) and with multiple parameters /** * set the product count by its type * @param {string} type : ProductType Name * @param {number} count : ProductType Count * @public */ public setProductCount(type: string, count: number): void { this.product[type].count = count; }; @constructor As we documented the parameters for methods similarly we can document the class constructor and its parameters. /** * @constructor * @param {Router} router - The router service. * @param {RoutingState} routingState - The Routing State service. */ constructor( private router: Router, private routingState: RoutingState ) {} @usageNotes You can also document the example of the method that how the method can be used, and what can you expect from that particular method. /** * @usageNotes * ### Retrieve a nested control * For example, to get a `name` control nested within a `person` sub-group: * * `this.form.get('person.name');` * -OR- * * `this.form.get(['person', 'name']);` */ get(path: Array<string | number> | string): AbstractControl | null; More Till now we have seen the basic documentation type which we use on daily basis for further more detailed documentation you can refer : Typescript Doc Note Generate Source Code Documentation Using CLI compodoc allows you to generate the documentation within seconds and can create a complete documentation report and architecture of your project. Bash # Install compodoc with npm $ npm install -g @compodoc/compodoc # Run compodoc in your project (generated with Angular CLI for example) and serve it $ compodoc -p src/tsconfig.app.json -s Links App: compodoc Live Demo: Compodoc Demo Get More tutorials on Angular 10 Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: Angular 10, Documentation, Source Code