[TypeScript]타입스크립트 Property does not exists on type

React 컴포넌트를 TypeScript로 개발할 때, 사용자 정의 HTML 프로퍼티를 사용하는 경우 주로 아래 에러가 발생합니다.

 

에러 내용

Type '{ type: string;}' is not assignable to type 'DetailedHTMLProps<ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>'.

Property 'size' does not exists on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

 

에러 사진

 

에러 원인

col Element는 기본 HTML 태그인데, col Element에는 type 프로퍼티가 존재하지 않습니다.

 

JQuey를 사용하여 개발자가 기본 HTML 태그에 사용자 정의 HTML 프로퍼티를 추가할 수 있는데요.

 

TypeScript는 타입에 엄격한 언어라서 사용자 정의 HTML 프로퍼티의 타입이 정의되지 않으면 위 사진처럼 에러가 발생합니다.

 

위 상황을 정리하자면, JQuery를 사용하여 col Element에 type 프로퍼티를 추가했는데, type 프로퍼티의 타입이 정의되지 않은 상황입니다.

 

주로, Node Package Module을 추가했는데, JQuery를 사용하여 사용자 정의 HTML 프로퍼티를 작성한 코드가 존재하는 경우 문제가 발생합니다.

 

해결 방법

사용자 정의 HTML 프로퍼티를 허용하기 위해 다음 코드를 추가합니다. HTMLAttributes 인터페이스를 확장하여 type 프로퍼티의 타입을 정의합니다.

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    type?: string;
  }
}

type 프로퍼티가 필수인지 모르기 때문에 선택적 프로퍼티 연산자( ?: )를 사용합니다.