타입스크립트 클린코드

불필요한 컨텍스트를 추가하지 말라

: 클래스/타입/객체의 이름이 뜻하는 것이 있다면 변수 이름에서 반복하지 말라

 

- 개선전

type Car = {
  carMake: string;
  carModel: string;
  carColor: string;
}

 

- 개선후

type Car = {
  make: string;
  model: string;
  color: string;
}

 

 

 

 

 

 

enum을 사용하라

: enum은 변해서는 안되는 값을 명시하여 코드의 의도를 명확화 할 수 있다

: 사실 타입스크립트에서 enum 보다는 as const를 통해 객체화 시키는 것이 tree-shaking을 지원하기 때문에 메모리 측면에서 유리하다

 

- 개선전

const GENRE = {
  ROMANTIC: 'romantic',
  DRAMA: 'drama',
  COMEDY: 'comedy',
  DOCUMENTARY: 'documentary',
}

 

- 개선 후

enum GENRE {
  ROMANTIC,
  DRAMA,
  COMEDY,
  DOCUMENTARY,
}

 

 

 

 

 

 

 

함수 이름은 자신이 하는 일을 말해야한다

: 함수의 의도가 무엇인지 이름에서 알 수 있어야한다

 

- 개선 전

function addToDate(date: Date, month: number): Date {
  // ...
}

 

 

- 개선 후

function addMonthToDate(date: Date, month: number): Date {
  // ...
}

 

 

 

 

 

 

명령어 보다는 함수를 사용하자

: 같은 작업을 수행한다면 기본 함수를 활용하자

: 다만, 대용량 처리로 인해 성능이 필요하다면 명령어를 활용하도록 하자

 

- 개선 전

const contributions = [
  {
    name: 'Uncle Bobby',
    linesOfCode: 500
  }, {
    name: 'Suzie Q',
    linesOfCode: 1500
  }, {
    name: 'Jimmy Gosling',
    linesOfCode: 150
  }, {
    name: 'Gracie Hopper',
    linesOfCode: 1000
  }
];

let totalOutput = 0;

for (let i = 0; i < contributions.length; i++) {
  totalOutput += contributions[i].linesOfCode;
}

 

- 개선 후

const contributions = [
  {
    name: 'Uncle Bobby',
    linesOfCode: 500
  }, {
    name: 'Suzie Q',
    linesOfCode: 1500
  }, {
    name: 'Jimmy Gosling',
    linesOfCode: 150
  }, {
    name: 'Gracie Hopper',
    linesOfCode: 1000
  }
];

const totalOutput = contributions
  .reduce((totalLines, output) => totalLines + output.linesOfCode, 0);

 

 

 

 

 

 

 

부정적인 조건을 사용하지마라

: 조건에 대해 정의할때 부정조건을 사용하지마라

: 즉, boolean을 return 한다면 긍정이 true여야 한다. 부정이 true이면 이해가 어렵다

 

- 개선 전

function isEmailNotUsed(email: string): boolean {
  // ...
}

if (isEmailNotUsed(email)) {
  // ...
}

 

- 개선 후

function isEmailUsed(email: string): boolean {
  // ...
}

if (!isEmailUsed(email)) {
  // ...
}

 

 

 

 

 

 

 

 

불변성 선호

: 객체나 인터페이스의 내부의 값은 타입이 변해서는 안된다

 

- 개선 전

interface Config {
  host: string;
  port: string;
  db: string;
}

 

- 개선 후

interface Config {
  readonly host: string;
  readonly port: string;
  readonly db: string;
}

 

 

 

 

 

 

타입 VS 인터페이스

: 변수나 union은 타입을, 객체를 표현할때는 인터페이스를 사용하자

: 인터페이스를 사용해야 객체에 대해 중복을 줄이고 확장을 쉽게 할 수 있다

 

- 개선 전

interface EmailConfig {
  // ...
}

interface DbConfig {
  // ...
}

interface Config {
  // ...
}

//...

type Shape = {
  // ...
}

 

- 개선 후

type EmailConfig = {
  // ...
}

type DbConfig = {
  // ...
}

type Config  = EmailConfig | DbConfig;

// ...

interface Shape {
  // ...
}

class Circle implements Shape {
  // ...
}

class Square implements Shape {
  // ...
}

 

 

 

 

 

 

 

테스트는 하나의 개념에 대해서만 수행해야한다

: 단일 책임 원칙에 따라 단위 테스트는 하나의 기능씩 수행한다

 

- 개선 전

import { assert } from 'chai';

describe('AwesomeDate', () => {
  it('handles date boundaries', () => {
    let date: AwesomeDate;

    date = new AwesomeDate('1/1/2015');
    assert.equal('1/31/2015', date.addDays(30));

    date = new AwesomeDate('2/1/2016');
    assert.equal('2/29/2016', date.addDays(28));

    date = new AwesomeDate('2/1/2015');
    assert.equal('3/1/2015', date.addDays(28));
  });
});

 

- 개선 후

import { assert } from 'chai';

describe('AwesomeDate', () => {
  it('handles 30-day months', () => {
    const date = new AwesomeDate('1/1/2015');
    assert.equal('1/31/2015', date.addDays(30));
  });

  it('handles leap year', () => {
    const date = new AwesomeDate('2/1/2016');
    assert.equal('2/29/2016', date.addDays(28));
  });

  it('handles non-leap year', () => {
    const date = new AwesomeDate('2/1/2015');
    assert.equal('3/1/2015', date.addDays(28));
  });
});

 

 

 

 

 

 

 

도움이 되는 글

https://github.com/labs42io/clean-code-typescript#variables

GitHub - labs42io/clean-code-typescript: Clean Code concepts adapted for TypeScript

 

 

 

 

 

 

 

 

Reference

Clean Code in TypeScript