TypeScript Naming Standards · TS-03

Files must follow the naming convention {description}.{type}.{file extension} · TS-03.1 · MUST

This naming convention aims to make it easy to find files and identify the contents of the file without opening it.

• Use dashes to separate the descriptive name of a file, e.g. user-role
• Use dots to separate the descriptive name of a file from its type e.g. user-role.enum or user-role.service
• Append the type to the description e.g. user-role.enum.ts or user-role.service.ts

The type within the file name should use the conventional names · TS-03.2 · SHOULD

Conventional names are those such as:

1. service
2. component
3. pipe
4. guard
5. module
6. directive
7. request
8. result
9. enum
10. interface

Symbols must use pascal case (PascalCase) · TS-03.3 · MUST

All properties and methods must use Pascal Case. This follows conventional naming methodology for symbols.

// filename example.model.ts
export class Example {}

// filename example.interface.ts
export interface IExample {}

Symbols must avoid private property prefix · TS-03.4 · MUST

A prefix of _ must not be used when naming private properties as the concept of a private method does not exist.

Components must use kebab case (kebab-case) · TS-03.5 · MUST

This follows the naming conventions of HTML and removes spaces between words, replacing them with a hyphen i.e. User Name would be written as user-name in kebab case.

The symbol must be suffixed with the word Component · TS-03.6 · MUST

Suffixing the symbol clearly marks the it with its purpose.

// Example from header.component.ts

@Component({
  selector: 'project-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent {}

Component selectors should be prefixed to describe its use · TS-03.7 · SHOULD

Component selectors should be prefixed with something that describes the app the component is for. This makes it easier to identify what has come from internal code vs libraries when looking through HTML and ensures there are no have collisions with Components from external libraries.

Directives must use camel case (camelCase) · TS-03.8 · MUST

The selectors for these must use camel case as the Angular HTML parser is case sensitive and recognises camel case.

The symbol must be suffixed with the word Directive · TS-03.9 · MUST

Suffixing the symbol clearly marks the it with its purpose.

// Example from debounce.directive.ts
@Directive({selector: '[admDebounce]'})
export class DebounceDirective {}

Directive selectors should be prefixed to describe its use · TS-03.10 · SHOULD

All Directive selectors should also be prefixed with something that describes the app the Directive is for. This makes it easier to identify what has come from our internal code vs libraries when looking through HTML. This ensures that we don’t have collisions with Directives from external sources.

Pipes must use camel case (camelCase) · TS-03.11 · MUST

The selectors for these must use camel case.

The symbol must be suffixed with the word Pipe · TS-03.12 · MUST

Suffixing the symbol clearly marks the it with its purpose.

// Example from order-by.pipe.ts

@Pipe({name: 'adOrderby'})
export class OrderByPipe implements PipeTransform {}

Pipe selectors should be prefixed to describe their use · TS-03.13 · SHOULD

All Pipe selectors should also be prefixed with something that describes the app the Pipe is for. This makes it easier to identify what has come from our internal code vs libraries when looking through HTML. This ensures that we don’t have collisions with Pipes from external sources.

The symbol must be suffixed with the word Module · TS-03.14 · MUST

All symbol names for Modules must be suffixed with Module to mark the symbol with its purpose.

@NgModule({ ... })
export class AppModule { }

// filename app.module
// location app folder

Modules should be named after the feature and folder that they reside in · TS-03.15 · SHOULD

Modules should be named after the feature and folder that they reside in. It should be obvious when looking at filenames what its purpose is.