Udemy/Ts/section2/20

[4BFC]

✍Udemy/Ts/section2/20

본 PR은 청강 1회독을 마친 후 N회독으로 작성된 PR입니다.

🔗Reference

• Micorsoft/issue/TypeScript

🔥KeyWord

• enum
• error TS2367
• enum overlap

📝Description

• eunm

  • 🚩: 전역상수를 이용한 role의 값 변경하기
  • 전역 상수로 값을 직접 할당해서 이를 객체에 할당해서 사용할 수도 있다 하지만 매번 새로운 값이 생길때 마다 변수를 할당해야한다는 불편함과 가독성이 떨어지는 코드를 볼 수 있다. 이를 해결하기 위해서 열거형 방식인 enum을 사용해서 간단하고 쉽게 원하는 값을 할당하고 객체의 형태로 관리 할수 있다. 단. 열겨형과 객체의 차이를 잘 살펴 보아야한다.

• error TS2367

  • 🐛: error TS2367 role: Role.ADMIN이 TS에선 변하지 않아야 하는 값으로 인식하면서 발생한 에러
  • 아래와 같은 오류가 발생하면서 애를 먹었다. 전체적인 오류는 다음과 같다.

    src/app.ts:18:5 - error TS2367: This comparison appears to be unintentional because the types 'Role.READ_ONLY' and 'Role.ADMIN' have no overlap.
    

  이 문제가 발생한 코드는 person.role = Role.READ_ONLY; 이 부분인데 person이라는 객체에서 role 속성에 값을 할당 해서 발생한 상황이었다.

• enum overlap

  • 🐛: error TS2367 role: Role.ADMIN이 TS에선 변하지 않아야 하는 값으로 인식하면서 발생한 에러
  • 원인은 person.role이 Role.READ_ONLY로 설정된 후 TypeScript는 person.role이 더 이상 Role.ADMIN과 같은 값이 될 수 없다고 판단하는 것이다. 즉, person.role = Role.READ_ONLY; 로 재할당을 했음에도 TypeScirpt에서는 이를 받아 들이지 않는 것이다. 그래서 TypeScript는 혼란이 오게 되는 것이고 초기 설정값을 따르려고 하기 때문에 발생한 오류인것이다. 따라 role: Role.ADMIN과 같이 초기 값을 부여하게 되면 as const로 값이 변하지 않게 명시를 하는 것을 권장한다.
    • 그렇다면 의문이 들것이다. 이렇게 enum이 재할당이 되면서 overload가 발생한다면 객체를 활용하는 것이 좋은거 아닌가?
      • enum과 object의 차이
        • 가장 큰 차이는 코드의 가독성과 값의 안정성이지만 위에서 내가 언급하지 않은 부분을 중점으로 비교하자면 역방향 매핑이 있다. TypeScript의 enum은 숫자형 값일 경우 역방향 매핑을 지원한다. 즉, Role.ADMIN으로 0을 얻을 수 있으며 바대로 0으로도 Role.ADMIN을 얻을 수 있다. 이는 일반 객체로는 구현하기 어렵다.
    • overlap
      • overlap은 두 타입이 서로 겹치는 부분이 있는지를 나타내며, 재할당과 비교 연산에서 중요한 역할을 한다. 예를 들어 2개의 enum이 있다고 하면 enum.A와 enum.B를 둘이 === 연산으로 비교 하면 아무런 의미가 없다고 판단을 한다 왜냐하면 이미 서로 다른 enum임을 인지하고 논리적으로 명확하기 때문에 overlap이 발생하는 것이다.
      • 그렇다면 person.role = Role.READ_ONLY;는?
        • 조금은 복잡할 수 있다. 논리 구조상 초기 할당 값은 enum Role에서 부터의 ADMIN이였다. 이후 READ_ONLY로 재할당이 되었다. 그렇다면 이 둘은 같은 타입, 값일 것이라는 논리가 애초에 성립이 되지 않는다는 것이다. 즉, 이미 같은 타입, 중복되는 타입, 값이라는 것을 인지하고 있기 때문인 것이다. 따라서 TypeScript에서 타입 추론으로 인해서 불필요한 메모리 낭비를 하지 않기 위해 비교 연산을 최소화 하는 것이라고 판단 할 수 있다. 취소선은 내가 TypeScript의 입자에서 생각해본 문장이다. 크게 의미가 없으며 결론적으로 다음과 같은 원일 가능성이 있다.
        • 환경 설정 또는 특정 TypeScript 버그: TypeScript의 특정 환경 설정이나 버전에서 enum 비교를 제대로 처리하지 못하는 경우가 있을 수 있다. 이 경우 오류가 발생할 수 있다.
      • 타입 추론의 문제: 만약 person.role의 타입이 Role으로 명시되지 않고 TypeScript가 이를 제대로 추론하지 못하면 비교 연산에서 예상치 못한 동작이 발생할 수 있다.

📌Summary

• 마지막의 error TS2367가 발생한 원인을 명확하게 이해할 수 없어서 많이 답답했다. 참고한 자료를 살펴보면 TypeScript는 person.role 변수가 Role.ADMIN으로 초기화된 후 다른 Role 값으로 변경될 수 있음에도 이 변경 가능성을 제대로 추론하지 못해 생겨난 오류로 판단 되었다. 따라서 TypeScript가 person에 정의한 값이 충분히 동적으로 타입 추론할 수 있게 하거나 const person에서 선언한 자료형 const에서 벗어지 못하게 as const로 명시하는 것이 최선이라는 것이 나의 결론이다. 이는 동적인 js에 익숙한 사용자들이 쉽게 겪을 수 있는 오류와 논리 문제로 판단이 된다. 아직 많이 미흡하고 명확한 해답을 찾지 못해서 아쉽다.