인프런 커뮤니티 질문&답변

안녕하세요 ohj3694님 이정환입니다.

결론부터 말씀드리면, 위 예제에서는 두 방식 모두 동작에 차이는 없지만, 향후 확장성을 고려한 타입 관리 방식의 차이 때문에 as State를 사용하는 방식을 사용하고 있습니다.

다음과 같이 타입 단언 대신 타입 정의를 이용하는 경우 타입 검사가 매우 엄밀히 수행되어 초과 프로퍼티는 담을 수 없는 제약이 발생하게 됩니다.

type State = { count: number; text: string; }

const initialState: State = {
  count: 0,
  text: "hi",
  extra: 123    // ❌ 에러: State에 없는 속성
};

그러나 다음과 같이 타입 단언을 이용할 경우, 다소 느슨하게 타입 검사가 이루어져 초과 프로퍼티가 허용됩니다. 큰 차이는 없지만 개발 단계에서는 이런 느슨한 타입 검사가 더 도움이 된다고 생각해 보통 저는 타입 단언을 이용하고 있습니다. (추가로 향후 satisfies 연산자와의 궁합도 좋습니다)

type State = { count: number; text: string; }

const initialState = {
  count: 0,
  text: "hi",
  extra: 123     // ❗ as State 때문에 통과됨
} as State;

안녕하세요, 인프런 AI 인턴입니다. ohj3694님.

질문 주신 사항은 TypeScript에서의 타입 단언(as)를 활용하여 객체의 타입을 명시하는 방법에 관련된 것입니다. 두 방법의 차이점을 이해하면 정확한 상황에 맞게 적절한 방법을 선택할 수 있습니다.

타입 직접 선언 vs 타입 단언

1. 타입 직접 선언

   • const initalState: State = {...}처럼 변수를 선언할 때 타입을 명시적으로 지정하는 것입니다.
     
   • 이 방법을 사용하면 컴파일러가 상수의 형태나 내용이 State형태와 일치하는지 검사합니다.
     
   • 타입이 잘못될 경우 컴파일러가 오류를 알려줍니다.
     

2. 타입 단언 사용

   • const initalState = {...} as State;는 단언을 통해 이 객체가 State 타입임을 보장한다고 개발자가 선언하는 것입니다.
     
   • 주로 객체 리터럴을 초기화하면서 기본적으로 추론되지 않을 때 유용합니다.
     
   • 특히 일부 필드가 초기화되지 않거나 임시적으로 구성을 마무리하거나 인터페이스의 형태가 다소 유연할 때 사용됩니다.
     

왜 타입 단언을 사용했는가?

• 유연한 초기화:
  실제 사용 중인 zustand와 같은 상태 관리 라이브러리에서 복잡한 초기화 로직이나 여러 필드를 추가 및 변경할 여지가 있을 때 저자가 초기화 로직을 좀 더 유연하게 유지하기 위해 타입 단언을 활용했을 가능성이 높습니다.

• 강제 형변환:
  상태 초기화 시점에서 모든 필드가 작성되지 않은 경우에도 as State를 사용하여 타입을 강제로 맞출 수 있습니다. 이는 구현 초기에 유리할 수 있지만, 컴파일러가 타입 불일치를 잡아내지 못할 수 있으므로 주의가 필요합니다.

참고 자료

유사한 주제에 대한 기존 질문 및 답변이 도움이 될 수 있습니다. 추가적으로 관련된 이해를 돕기 위해 아래 링크를 추천합니다.

• Type Safety in Zustand with TypeScript
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.