변수, 파일, 네이밍, 폴더 구성

🅰️ Identifier(변수명, 함수명) 규칙

이름을 만들 때 다음의 규칙을 따르도록 한다.

Style	Description	Category
UpperCamelCase	첫문자는 대문자로하고 단어 구분시에만 대문자 표기	클래스, 인터페이스, 타입, enum, 데코레이터, 타입 파라미터
lowerCamelCase	첫문자는 소문자로하고 단어 구분시에만 대문자 표기	일반 변수, 파라미터, 함수 이름, 메소드, property, 모듈 등
CONSTANT_CASE	모든 문자를 대문자로 표기	전역 constant 변수, enum values를 포함한 변수

• UpperCamelCase 예시

  • enum 값

    enum Color { red } // X
    enum Color { Red } // O
    

  • namespace, interface(인터페이스)

    namespace Foo { }
    interface Foo { }
    

  • 클래스(Class)

    class Foo { bar: number; hello(){} } // O
    class Foo { Bar: number; Hello(){} } // X
    

  • Type Parameter

    Array<T>   // 대문자 하나만 사용하기
    Array<DataType> // 아니면, UpperCamelCase 사용하기
    

• lowerCamelCase 예시

  • 함수 이름

    function helloWorld() { ... } // O
    function HelloWorld() { ... } // X
    

  • 프로퍼티(property), 지역 변수 이름

    let foo;
    const waitingDays = 2;
    

기타 규칙

• 인터페이스 이름 앞에 I를 붙이지 않는다.

  interface IFoo { } // X
  interface Foo { } // O
  

• 비공개 프로퍼티 앞에 _를 붙이지 않는다. ex) _foo (x)

• 가능한 전체 단어를 사용한다.

• 약어는 그 자체가 하나의 단어인 것 처럼 사용한다.

  let loadHTTPURL; // X
  let loadHttpUrl // O
  const XMLHttpRequest // 그 자체로 의미를 가지는 일부 약어들은 제외
  

• 문자열인 경우 홑 따옴표를 이용한다.

  "hello world" // X
  'hello world' // O
  

• Import할 때 이름은 lowerCamelCase를 쓴다.

  import * as fooBar from './fooBar';
  

🔤 네이밍 규칙

타입스크립트는 타입으로 정보를 표현하기 때문에, 이름에는 타입에 관한 정보가 들어가면 안된다.

• private 프로퍼티나 메서드의 앞이나 뒤에 _를 붙이지 않는다
• optional parameter에 opt_접두사를 붙이지 않는다.
• interface라고 표시하지 않는다. (IMyInterface, MyFooInterface). 클래스를 위한 인터페이스는 왜 인터페이스가 존재하는지를 이름으로 표현한다.
• If Nest를 쓴다면
  • user
    • user.module.ts
    • user.controller.ts
    • user.service.ts

⌨ 타이핑 규칙

타입 추론(문서)

타입스크립트 컴파일러는 기본적으로 타입 추론 기능을 지원해준다. 따라서 타입 추론이 가능한 타입을 명시하는 것은 오히려 가독성을 떨어트리기 때문에 명시하지 않는 것이 좋다.

예를 들어, 바로 추론이 가능한 string, number, boolean, RegExp literal 이나 new expression을 사용한 코드는 타입을 명시하지 않는 것이 오히려 좋다.

• 타입 추론 예시

  const x = 15;  // number라는 타입으로 알아서 추론이 된다.
  const x: boolean = true;  // Bad: 'boolean' here does not aid readability
  // Bad: 'Set' is trivially inferred from the initialization
  const x: Set<string> = new Set();
  const x = new Set<string>();
  

null / undefined

타입스크립트는 null, undefined 타입을 지원한다. 유니온 타입에 묶어 자유롭게 사용 가능하다.

ex - number | undefined

다만 타입 별칭 자체에 null, undefined 타입을 포함하는 것은 좋지 않다. 이는 타입 별칭의 의미를 모호하게 만들 수 있기 때문이다.

• 타입 별칭 예시

  // Bad
  type CoffeeResponse = Latte|Americano|undefined;
  class CoffeeService {
  getLatte(): CoffeeResponse { ... };
  }
  // Better
  type CoffeeResponse = Latte|Americano;
  class CoffeeService {
  getLatte(): CoffeeResponse|undefined { ... };
  }
  

Optional ? vs | undefined type

타입스크립트는 parameter와 field에 대해 ? 키워드를 이용해 선택적인 옵션을 제공할 수 있도록 할 수 있다.

interface CoffeeOrder {
  sugarCubes: number;
  milk?: Whole|LowFat|HalfHalf; // milk라는 field가 선택적으로 올수 있음을 의미
}
function pourCoffee(volume?: Milliliter) { ... }
// volume이라는 parameter가 선택적으로 올수 있음을 의미

Optional parameter(?)는 내재적으로 타입에 | undefined 에 포함함을 의미한다.

⭐️ Interface vs Type 별칭

인터페이스나 Type별칭 모두 타입을 표현하는데 사용가능한 수단이지만, Object 의 타입을 선언할때에는 타입 별칭 대신 Interface를 사용하는 것을 권장한다. 성능상 Interface를 사용하는 것이 더 용이(왜?)하다고 한다. 자세한 내용은 여기서 확인하기.

• Interface vs type 별칭 예시

  // 권장
  interface User {
    firstName: string;
    lastName: string;
  }
  // 권장 되지 않음
  type User = {
  firstName: string,
  lastName: string,
  }
  

이외에도 정말 많은 규칙들이 있으며 자세한 내용들은 여기 및 아래를 참고.

이름 규칙

타입스크립트 문법 규칙

Import/Export 규칙

타이핑 규칙