Quand utiliser le PascalCase, le camelCase, ou le kebab-case ?

Trois types de notation sont utilisés pour les noms de symboles d’une application Angular : PascalCase, camelCase, et kebab-case. À quoi correspond chaque notation et quand faut-il l’utiliser ?

PascalCase

Syntaxe : Chaque mot commence par une majuscule, par exemple CommentCaVa.

Dans Angular, le PascalCase est utilisé pour tous les noms de classe Angular (composants, directives, services…), les noms d’interface et les modèles de l’application.

Exemple #1 - Classe de service :

@Injectable()
export class AuthService {  // PascalCase
  ...
}

Exemple #2 - Modèle de l’application :

export class User {  // PascalCase
  ...
}

camelCase

Syntaxe : Le premier mot commence par une minuscule, les mots suivants par une majuscule, par exemple commentCaVa.

Dans Angular, le camelCase est utilisé pour les noms de variables, les propriétés de classe et les sélecteurs de directives.

Exemple #1 - Propriétés de classe :

export class User {
  firstName: string;  // camelCase
  lastName: string;   // camelCase
  email: string;      // camelCase
  ...
}

Exemple #2 - Sélecteur de directive :

@Directive({
  selector: '[adminOnly]',  // camelCase
  template: '...'
})
export class AdminOnlyDirective {}

kebab-case

Syntaxe : Tout en minuscule, les mots sont séparés par des tirets, par exemple comment-ca-va.

Dans Angular, le kebab-case est utilisé pour les sélecteurs de composants.

Exemple :

@Component({
  selector: 'app-meteo',  // kebab-case
  template: '...'
})
export class MeteoComponent {}
Informations

Tags : best_practices

Dernière mise à jour :

Auteur : AngularChef

Qualité : Bonne