본문 바로가기
Web/TypeScript

[TypeScript] 타입스크립트 스타일 가이드 요약 📋 (Ver. Google) / 1️⃣ - 식별자 (Identifiers)

by 서상혁 2021. 3. 4.

스타일가이드란?

 개발자라면 보통 본인들이 코딩을 할때 시스로 지키는 convention 들이 있을 것입니다. 변수 이름 짓는 방법이라던가, 들여쓰기의 정도, 줄바꿈 등등등 이런것들이 각각 다르겠죠? 헌데 협업, 혹은 대규모 개발을 할 때는, 코딩 스타일에 규칙을 정해놓고 통일할 필요가 있습니다. 구글에서는 이런 상황에서 서로 맞출 style 들을 지정해서 문서화 두었습니다. 워낙 체계적으로 잘 돼있어서 여러 기업, 프로젝트 들에서 사용됩니다. 

 

구글 스타일 가이드 : google.github.io/styleguide/

 

Google Style Guides

Style guides for Google-originated open-source projects

google.github.io


TypeScript

 저는 그 중에 제가 가장 많이 사용하는 타입스크립트에 대해서 포스팅하려합니다. 워낙 양이 많아서, 좀 주의깊게 봐야할 내용이나 놓칠 수 있는 부분에 대해서 기술하겠습니다.

 

변수명

일단 변수명은 모두 ASCII 포맷을 따라야하며, 영어 문자들, 숫자, 언더바(상수나, 테스트메소드에 사용), \(정규표현식 관련) 로만 이루어져 있어야 합니다.

 

Style Category
UpperCamelCase 클래스, 인터페이스, 타입, enum, 데코레이터, 타입 파라미터
lowerCamelCase 일반 변수, 파라미터, 함수이름, 메소드, property, 모듈 등등 
CONSTANT_CASE 전역 constant 변수, enum values 를 포함한 변수
#ident private identifiers are never used.

 

  • Imports : imports 로 불러온 모듈 파일명이 스네이크 케이스여도 lowerCamelCase로 import 합니다.
import * as fooBar from './foo_bar';

 

  • Constants :  변경되지 않을 상수로 설계된 경우, CONSTANT_CASE 로 표기합니다.
const UNIT_SUFFIXES = {
  'milliseconds': 'ms',
  'seconds': 's',
};
// Even though per the rules of JavaScript UNIT_SUFFIXES is
// mutable, the uppercase shows users to not modify it.

즉, 만약 변수 이름이 CONSTANT_CASE 라면, 값을 변경할 수 있어도 변경하면 안된다는 뜻입니다.

만약 lifecycle중, 1번이라도 변경될 가능성이 있다면 lowerCamelCase 를 이용해야 합니다.

 

Aliases

만약, 특정 변수를 그대로 가져다가 다른 local 스코프에서 aliase (별칭) 역할로 쓰는 변수는 그 이름을 그대로 가져다 const 로 선언해야 합니다. 그리고 클래스 필드로 쓸 때는 readonly를 붙여줘야 합니다.

 

Naming Styles

  • 타입스크립트는 기본적으로 타입이 제공이 되기 때문에, 변수 이름에 타입에 대한 정보를 넣을 필요가 없습니다.
// Bad, the type tells us what these variables are:
String nameString; List<datetime> holidayDateList;
// Better:
String name; List<datetime> holidays;

 

  • 과한 상세내용은 담지 않습니다.
// Overly specific names are hard to read:
Monster finalBattleMostDangerousBossMonster; Payments nonTypicalMonthlyPayments;
// Better, if there's no other monsters or payments that need disambiguation:
Monster boss; Payments payments;

 

  • 이미 surrounding context 에 있는 정보는 생략합니다.
// Bad, repeating the context:
class AnnualHolidaySale {int annualSaleRebate; boolean promoteHolidaySale() {...}}
// Better:
class AnnualHolidaySale {int rebate; boolean promote() {...}}

 

 

  • 다음과 같은 변수 이름들은 일반적으로 좋지 않습니다.
data, state, amount, number, value, manager, engine,
object, entity, instance, helper, util, broker, metadata,
process, handle, context

 

  • 기타
    • 너무 짧은 변수명보다는 너무 긴 변수명이 낫습니다.
    • 당신의 직관을 믿으세요 

 

 

- 참고자료

 

 

주의

  • _ : 접두사나 접미사, 혹은 그 자체로 사용하면 안됩니다! (중간에만 들어갈 수 있다는 뜻인듯)

 


출처

- 구글 스타일 가이드

728x90

댓글