TypeScript 열거형 + JavaScript "in"= 👍

cinch에서 저는 재고 팀에서 일하며 수천 대의 자동차에 대한 상태, 위치 및 기타 모든 종류의 데이터를 추적하면서 모든 차량 재고를 관리합니다. 우리는 코드의 일부가 우리가 구독하는 특정 이벤트에 응답함을 의미하는 이벤트 기반 아키텍처를 가지고 있습니다. 한 상태에서 다른 상태로 자동차를 이동하는 것을 결정하는 많은 논리가 포함된 상태 머신/모델이 있습니다. 코드베이스에서 몇 가지 무거운if 조건을 발견했을 때 다음 패턴을 생각해 냈습니다.

이 예에서는 매일 차량과 관련된 코드를 작성할 때 로봇을 주제로 사용할 것입니다! 🚗

로봇을 처분하는 함수를 원하지만 상태가 faulty 또는 damaged 인 경우에만 로봇을 처분할 수 있다고 상상해 봅시다. 아래에서 열거형RobotStatus을 설정하여 가능한 로봇 상태를 나열하고 Robot 인터페이스를 설정하여 로봇의 모양을 만듭니다.

enum RobotStatus {
    ready,
    damaged,
    faulty
}

interface Robot {
    name: string
    status: RobotStatus
}

function disposeRobot(robot: Robot): void {
    if (robot.status === RobotStatus.damaged || 
        robot.status === RobotStatus.faulty
    ) {
        console.log('Disposing of robot...')
    }

    console.log('Robot in incorrect state to dispose...')
}

지금은 괜찮습니다. 그러나 다른 상태에 대해 더 많은 검사를 추가하기 시작해야 한다고 상상해 보십시오. discontinued , dead , old , rusty , dangerous 에 대해 좀 더 추가해 보겠습니다.

enum RobotStatus {
    ready,
    damaged,
    faulty,
    discontinued,
    dead,
    old,
    rusty,
    dangerous
}

interface Robot {
    name: string
    status: RobotStatus
}

function disposeRobot(robot: Robot): void {
    if (robot.status === RobotStatus.damaged || 
        robot.status === RobotStatus.faulty ||
        robot.status === RobotStatus.discontinued ||
        robot.status === RobotStatus.dead ||
        robot.status === RobotStatus.old ||
        robot.status === RobotStatus.rusty ||
        robot.status === RobotStatus.dangerous ||
    ) {
        console.log('Disposing of robot...')
    }

    console.log('Robot in incorrect state to dispose...')
}

이제 if 블록이 두꺼워지고 악취가 납니다. 👃.
허용된 일회용 상태를 포함하는 enum를 생성해 보겠습니다.

enum DisposableStatus {
    damaged,
    faulty,
    discontinued,
    dead,
    old,
    rusty,
    dangerous
}

JavaScript에는 지정된 속성이 지정된 객체에 있으면 true를 반환하는 in 연산자가 있습니다.

prop in object

이것은 위에서 if 블록을 정리할 수 있습니다. 써보자...

function disposeRobot(robot: Robot): void {
    if (robot.status in DisposableStatus) {
        console.log('Disposing of robot...')
    }

    console.log('Robot in incorrect state to dispose...')
}

TypeScript는 열거형을 일반 JavaScript 개체로 컴파일하고 이러한 속성은 런타임에 존재합니다.
이것은 미래의 자신과 다른 개발자를 위해 훨씬 더 읽기 쉽고 소화하기 쉽습니다.