Posts TypeScript Code Convention
Post
Cancel

TypeScript Code Convention

Code Convention

코드 컨벤션은 Google TypeScript Style Guide 를 따릅니다.

변수명

변수명은 아래의 분류에 따라 작성합니다.

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

예시는 아래와 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 상수는 전부 대문자로 작성
const PI: number = 3.14;

// 클래스 이름은 UpperCamelCase
class Greeter {
  greeting: string;

	// 매개변수는 lowerCamelCase
  constructor(message: string) {
    this.greeting = message;
  }

	// 함수 이름은 lowerCamelCase
  greet() {
    return "Hello, " + this.greetingMessage;
  }
}

// 일반 변수는 lowerCamelCase
let greeterObj = new Greeter("world");

기타

  • 변수명은 너무 짧은 것보다 너무 긴 변수명이 낫습니다. 최대한 이해하기 쉽게 풀어서 작성해주세요.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
      // Bad
      for (let i = 0; i < 100; i += 1) {
        ...
      }
    
      // Good
      const MAX_REPETITION = 100;
    
      for (let idx = 0; idx < MAX_REPETITION; idx += 1) {
        ...
      }
    

Formatting & Linting

코드 포맷터인 Prettier 를 사용하면 파일 저장 시 자동으로 해당 컨벤션에 맞게 포맷팅을 해주므로 이 부분은 크게 신경 쓰지 않아도 됩니다.

또한, 코드 품질을 관리하는 ESLint 를 사용하기 때문에 GUI 에서 컨벤션을 위배하는 코드를 실시간으로 확인하고 수정할 수 있습니다.

ESLint 의 대표적인 예시로는 사용하지 않은 변수는 지우라고 알려주는 것이 있습니다.

Naming Styles

  • 타입스크립트는 기본적으로 타입이 제공됩니다. 따라서 변수 이름에 타입에 대한 정보를 넣을 필요가 없습니다.

    1
    2
    3
    4
    5
    
      // Bad
      let nameString: string = 'Jay';
    
      // Good
      let name: string = 'Jay';
    
  • 과한 상세내용은 담지 않습니다.

    1
    2
    3
    4
    5
    
      // Bad
      let finalBattleBossMonster: Monster;
    
      // Good
      let boss: Animal;
    

Clean Code for TypeScript

클린 코드를 작성하기 위해 아래의 링크를 참고했습니다.

모든 내용을 기억할 수 없으니 조금씩 코드에 적용해보면 자연스럽게 익히고자 합니다.

참고자료

This post is licensed under CC BY 4.0 by the author.