[TypeScript]React에 TypeScript 적용하기(타입지정)

 ◼ HTMLElement 타입 

html의 Dom 을 가르키는 타입 입니다.

"HTML태그네임Element" 형식으로 태그의 타입이 있습니다.

 

HTMLElement를 작성하면 자동완성으로 나오는 것을 보고

해당 Tag에 맞는 타입을 찾아서 사용하면 됩니다.

 

 

 

HTMLElement 종류

https://night-owl-zz.tistory.com/89

[TypeScript]HTMLElement 태그 타입들

 

 

---

 

 

 

 ◼ HTMLAttributes 타입 

HTML 요소에 대한 기본 속성(props)을 정의하는 데 사용되는 인터페이스입니다. React에서 컴포넌트를 작성할 때 HTML 요소에 넣을 수 있는 속성들을 타입으로 정의하는 데 사용됩니다.

 

 

 

 

 

요소HTMLAttributes<요소타입>

아래 코드를 예로 들어 설명하면,

InputHTMLAttributes는 JSX 요소에 사용될 속성(props)의 타입을 정의하는데 사용됩니다.
이 타입은 JSX 요소에서 해당하는 HTML 요소에 사용할 수 있는 속성들을 TypeScript로 타입화하여 제공합니다.

<HTMLInputElement>
JSX 요소를 작성할 때, 해당 요소에 사용할 실제 HTML 요소의 타입을 명시해야 합니다. 이것은<input>
요소의 경우 HTMLInputElement 를 사용해야 합니다. 이렇게 하면 JSX 요소의 타입과 HTML 요소의 타입이 일치하게 됩니다.

InputHTMLAttributes<HTMLInputElement>는 <input> 요소에 사용할 수 있는 속성들을 정의한 것입니다. 그러나 이것만으로는 어떤 종류의 <input> 요소를 사용할지를 명시하지 않습니다. 따라서 <input> 요소의 타입을 HTMLInputElement로 명시해야 합니다.

 

 

 

 

---

 

 

 

 ◼ Event 타입 

이벤트에서 사용하는 아주 보편적인 타입입니다.

간단히 사용할때나, 이벤트를 사용하지 않을때 이미지 처럼 Event 타입을 적을수 있습니다.

 

 

Event타입 또한, 다양한 이벤트가 존재하기에

Event를 작성하고 자동완성에서 해당 이벤트에 맞는 타입을 고르면 됩니다.

 

 

 

 

addEventListener안에 이벤트를 정의, 자동으로 타입이 지정되기에 타입 선언을 하지 않아도 됩니다. 

혹시나 타입을 찾기가 어려울때, 지정되는 타입을 보고 힌트를 얻어도 좋을꺼 같습니다.

 

 

 

Event 종류

https://night-owl-zz.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F

Tistory