배열 - TypeScript "TS2339: 'X' 속성이 'Y' 타입에 존재하지 않습니다" 오류, 타입이 정의되어 있음에도 불구하고

제 코드에서 저는 React.ReactElement 배열 요소의 type 속성에 접근하려고 하고 있습니다. 배열에 React.ReactElement 자식 요소를 포함하도록 정의했음에도 불구하고, 배열 요소를 React.ReactElement 타입으로 캐스팅하지 않으면 해당 요소의 type 속성에 접근하려 할 때 오류가 발생합니다.

제 코드입니다:

const getChildren = (
    children: (React.ReactChild | React.ReactElement)[]
) => {
    console.log((children[0] as React.ReactElement).type)  // this line works
    console.log(children[0].type)  // this line breaks
}

그리고 제가 받은 오류는 다음과 같습니다:

Property 'type' does not exist on type 'ReactChild | ReactElement<any, string | JSXElementConstructor<any>>'.
  Property 'type' does not exist on type 'string'.  TS2339

이 문제를 어떻게 해결할 수 있나요?

답변 #1

저는 React에 익숙하지 않지만 React.ReactChild에는 type이라는 속성이 없고 이것이 오류가 발생하는 이유라고 추정합니다.

타입스크립트 컴파일러는 어떤 타입(React.ReactChild 또는 React.ReactElement)인지 명시적으로 알려주지 않는 한, 당신의 아이템이 어떤 타입인지 알 수 없습니다. 이것이 함수의 첫 번째 줄이 작동하는 이유입니다. 왜냐하면 함수에 전달된 인수가 React.ReactElement[]이거나 최소한 배열의 첫 번째 요소가 React.ReactElement 타입임을 명시적으로 컴파일러에 알려주기 때문입니다.

배열 내 요소들이 항상 React.ReactElement 타입임을 알고 있다면, 함수 인자 타입을 로 바꾸는 것을 권장합니다

const getChildren = (children: React.ReactElement[]) => {/* ... */}

그렇지 않으면 런타임 오류를 피하기 위해 그것이 어떤 타입인지 확인해야 합니다:

const getChildren = (children: (React.ReactChild | React.ReactElement)[]) => {
  if (children[0] instanceof React.ReactChild) {
    console.log(children[0].type);
  }
}