docs(style-guide): spell const variables in lower camel case
Changes previous guidance on const which insisted on UPPER_SNAKE_CASE
This commit is contained in:
		
							parent
							
								
									2c5f0dbd9a
								
							
						
					
					
						commit
						0664a271ba
					
				| @ -1,15 +1,19 @@ | |||||||
| import { Component } from '@angular/core'; | import { Component } from '@angular/core'; | ||||||
| 
 | 
 | ||||||
| import { HEROES_URL, VILLAINS_URL } from './shared'; | import { heroesUrl, mockHeroes, VILLAINS_URL } from './shared'; | ||||||
| 
 | 
 | ||||||
| @Component({ | @Component({ | ||||||
|   selector: 'sg-app', |   selector: 'sg-app', | ||||||
|   template: ` |   template: ` | ||||||
|     <div>Heroes url: {{heroesUrl}}</div> |     <div>Heroes url: {{heroesUrl}}</div> | ||||||
|     <div>Villains url: {{villainsUrl}}</div> |     <div>Villains url: {{villainsUrl}}</div> | ||||||
|   `,
 | 
 | ||||||
|  |     <h4>Mock Heroes</h4> | ||||||
|  |     <div *ngFor="let hero of heroes">{{hero}}</div> | ||||||
|  |   ` | ||||||
| }) | }) | ||||||
| export class AppComponent { | export class AppComponent { | ||||||
|   heroesUrl = HEROES_URL; |   heroes      = mockHeroes;   // prefer
 | ||||||
|   villainsUrl = VILLAINS_URL; |   heroesUrl   = heroesUrl;    // prefer
 | ||||||
|  |   villainsUrl = VILLAINS_URL; // tolerate
 | ||||||
| } | } | ||||||
|  | |||||||
| @ -1,7 +0,0 @@ | |||||||
| // #docregion
 |  | ||||||
| // #docregion example
 |  | ||||||
| /* avoid */ |  | ||||||
| 
 |  | ||||||
| export const heroesUrl = 'api/heroes'; |  | ||||||
| export const villainsUrl = 'api/villains'; |  | ||||||
| // #enddocregion example
 |  | ||||||
| @ -1,5 +1,4 @@ | |||||||
| // #docregion
 | // #docregion
 | ||||||
| // #docregion example
 | export const mockHeroes   = ['Sam', 'Jill']; // prefer
 | ||||||
| export const HEROES_URL = 'api/heroes'; | export const heroesUrl    = 'api/heroes';    // prefer
 | ||||||
| export const VILLAINS_URL = 'api/villains'; | export const VILLAINS_URL = 'api/villains';  // tolerate
 | ||||||
| // #enddocregion example
 |  | ||||||
|  | |||||||
| @ -651,20 +651,43 @@ a(href="#toc") Back to top | |||||||
| 
 | 
 | ||||||
| .s-rule.do | .s-rule.do | ||||||
|   :marked |   :marked | ||||||
|     **Do** use uppercase with underscores when naming constants. |     **Do** declare variables with `const` if their values should not change during the application lifetime. | ||||||
| 
 | 
 | ||||||
| .s-why | .s-why | ||||||
|   :marked |   :marked | ||||||
|     **Why?** Follows conventional thinking for constants. |     **Why?** Conveys to readers that the value is invariant. | ||||||
| 
 | 
 | ||||||
| .s-why.s-why-last | .s-why.s-why-last | ||||||
|   :marked |   :marked | ||||||
|     **Why?** Constants can easily be identified. |     TypeScript helps enforce that intent by requiring immediate initialization and by | ||||||
|  |     preventing subsequent re-assignment. | ||||||
|      |      | ||||||
| +makeExample('style-guide/ts/03-02/app/shared/data.service.avoid.ts', 'example', 'app/shared/data.service.ts')(avoid=1) | .s-rule.consider | ||||||
| :marked |   :marked | ||||||
|  |     **Consider** spelling `const` variables in lower camel case. | ||||||
| 
 | 
 | ||||||
| +makeExample('style-guide/ts/03-02/app/shared/data.service.ts', 'example', 'app/shared/data.service.ts') | .s-why | ||||||
|  |   :marked | ||||||
|  |     **Why?** lower camel case variable names (`heroRoutes`) are easier to read and understand | ||||||
|  |     than the traditional UPPER_SNAKE_CASE names (`HERO_ROUTES`). | ||||||
|  | 
 | ||||||
|  | .s-why.s-why-last | ||||||
|  |   :marked | ||||||
|  |     **Why?** The tradition of naming constants in UPPER_SNAKE_CASE reflects | ||||||
|  |     an era before the modern IDEs that quickly reveal the `const` declaration. | ||||||
|  |     TypeScript itself prevents accidental reassignment.  | ||||||
|  |      | ||||||
|  | .s-rule.do | ||||||
|  |   :marked | ||||||
|  |     **Do** tolerate _existing_ `const` variables that are spelled in UPPER_SNAKE_CASE. | ||||||
|  | 
 | ||||||
|  | .s-why.s-why-last | ||||||
|  |   :marked | ||||||
|  |     **Why?** Although we recommend creating _new_ constants in lower camel case, | ||||||
|  |     the tradition of UPPER_SNAKE_CASE remains popular and pervasive, | ||||||
|  |     especially in third party modules. | ||||||
|  | 
 | ||||||
|  | +makeExample('style-guide/ts/03-02/app/shared/data.service.ts', '', 'app/shared/data.service.ts') | ||||||
| :marked | :marked | ||||||
| 
 | 
 | ||||||
| a(href="#toc") Back to top | a(href="#toc") Back to top | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user