TypeScript 및 React의 요소 대 ReactElement 대 HTMLElement 대 노드 혼란

과거에 당신에게 일어 났을 수도 있고, 당신이 사용해야 할 것을 이해하지 못했습니다.

Unsplash에 Amit Lahav의 사진

TypeScript의 뛰어난 기능 중 하나는 변수를 입력 할 때 얻을 수있는 특이성 수준입니다. 배열을 문자열, 숫자 또는 조합의 모음으로 정의 할 수 있지만 요소가 HTMLInputElement 또는 HTMLSelectElement. 그러나 변수 유형의 세분성을 쉽게 지정할 수 있기 때문에 시작할 때 많은 혼란이 발생할 수 있습니다.

프로그래머가 더 일관성이없는 것을 본 분야 중 하나는 특히 React로 작업하는 동안 HTML 요소를 입력 할 때입니다. 공정하게 말하면, 특히 TypeScript로 작업을 시작할 때 광범위한 가능성을 고려할 때 약간 당황합니다.

따라서 각각을 언제 사용 해야하는지 알아 보겠습니다.

정의

먼저 다음 각 용어를 정의 해 보겠습니다.

노드 유형

노드 유형은 이 라이브러리 정의 에서 TypeScript에 의해 정의 됩니다. 이 인터페이스는 대부분의 DOM 요소의 기본 조상입니다. 선택 옵션, DIV 또는 HTML 양식과 같은 요소는 Node에서 상속됩니다 .

소스 코드 문서에서 :

“노드는 많은 DOM API 객체 유형이 상속 하는 인터페이스입니다 . 이러한 유형을 유사하게 처리 할 수 ​​있습니다 . 예를 들어 동일한 메소드 세트를 상속하거나 동일한 방식으로 테스트됩니다. "

Node에서 발견 된 다른 구현 중에서 nodeName(읽기 전용 문자열), childNodes(ChildNode 유형의 읽기 전용 요소 목록) 및 노드를 조작하기 위해 일반적으로 사용되는 기타 많은 속성 및 메서드를 볼 수 있습니다.

요소 유형

요소 유형은 무엇보다도 노드 유형에서 상속됩니다. 이것은 TypeScript의 표준 DOM 유형 세트에 정의되어 있습니다 ( 여기에서 확인할 수 있습니다 ). 소스 코드의 문서에 따르면 :

"요소는 문서의 모든 개체가 상속 하는 가장 일반적인 기본 클래스입니다 ."

두 가지 하이라이트는 저의 것이며,이 유형이 무엇에 관한 것인지, 즉 문서 객체 모델에서 끝나는 객체에 대한 기본 클래스라고 생각합니다.

다음으로 요소 유형 소스 코드에 대한 문서는 다음과 같이 설명합니다.

“모든 종류의 요소에 공통적 인 메서드와 속성 만 있습니다. 보다 구체적인 클래스는 Element에서 상속합니다.”

이것은 노드 유형에 이어 사용할 수있는 가장 일반적인 유형입니다. 다른 유형은 여기에서 상속됩니다. 여기에는 getElementsByClassNamemethod (요소 컬렉션을 반환) 와 같은 유용한 메서드 나 className(string) 과 같은 속성이 있습니다.

HTMLElement 유형

이 인터페이스는 실제로 HTML 태그로 끝나는 모든 요소를 ​​정의하고 상속합니다. 이것은 React의 커스텀 태그를 제외합니다. 예를 들어 <MainHeader />React 컴포넌트 가 있다면 HTMLElement. TypeScriptLang.org에 따르면HTMLElement " TypeScript 에서 DOM 조작을위한 백본"입니다.

TypeScript 소스 코드에서 직접 :

“모든 HTML 요소. 일부 요소는이 인터페이스를 직접 구현하고 다른 요소는이를 상속하는 인터페이스를 통해 구현합니다. "

HTMLElement 요소 유형에서 직접 상속됩니다.

에서 HTMLElement유형, 당신은 일반적인 유용한 같은 방법을 볼 수 있습니다 addEventListener또는 removeEventListener(분명히 관련 Events), offsetHeight재산, 그리고 다른 사람을.

HTML 요소는이 인터페이스에서 상속되며 고유 한 구현으로 확장됩니다. 예를 들어, HTMLInputElement는에서 연장됩니다 HTMLElement일부 속성과 같은 자신의 방법을 만들고 value, name하고 placeholder. 그러나, HTMLSelectElement구현 속성은 그 존재하지 않는 HTMLInputElement등, selectedIndex또는 multiple.

그런데 이러한 유형은 상속 된 모든 속성 또는 메서드를 재정의 할 수도 있습니다. 물론 super 속성이나 메서드가 정적이지 않고 서명이나 원래 메서드를 유지하는 등의 설정된 규칙 집합을 따라야합니다.

ReactElement 유형

이것은 @types/react패키지에 정의되어 있으며 여기에서 확인할 수 있습니다 . ReactElement인터페이스이기도합니다. 주목해야 할 중요한 점은 이것이 실제 DOM 요소가 아니며 TypeScript의 이전에 논의 된 유형에서 상속되지 않는다는 것입니다. React의 기능적 구성 요소는 a ReactElement또는 null.

ReactElement유형 등과 같은 다른 유형에 대한 프리미티브의 정의 고려 될 수있다 JSX.ElementJSX.IntrinsicElements.

ReactNode유형은 될 수 ReactElement하는 stringA, number또는 심지어 null, 다른 유형들입니다. 덧붙여서 React의 클래스 구성 요소 렌더링 메서드 반환 유형은 ReactNode.

반면에 a JSX.Element는 a 일 수도 있습니다 ReactElement. 그러나 이것은 명시 적으로 그것 과 둘 다를로 정의 하므로 이것은 더 일반적이고 느슨합니다. typepropsany

인터페이스 정의는 다음과 같습니다.

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
    type: T;
    props: P;
    key: Key | null;
}

다음 스 니펫을 고려하십시오.

여기에서 몇 가지 사항이 분명해질 것입니다. 첫째,을 호출 할 때 document.createElement반환되는 것은 TypeScript가 생성하려는 것을 가장 잘 추측 한 것입니다. 따라서 전화 document.createElement(‘div’)하면 HTMLDivElement. 알 수없는 태그를 만들려고하면 HTMLUnknownElement.

이것은 HTMLDivElement에서 직접 HTMLElement상속되며, 다른 무엇보다도 요소 유형에서 직접 상속됩니다 . 마지막으로 Element는 Node.js에서 서명을 상속받습니다.

이 조상 계층은 인스턴스로 전달되는 메서드와 속성의 전체 범위를 제공하며 다형성의 기본 기능 중 하나입니다.

DOM을 통해 페이지에 넣을 수있는 모든 요소가 TypeScript에 특정 요소 유형을 갖는 것은 아닙니다. 다음을 고려하세요:

이 경우 <header></header>요소는 일반 HTMLElement유형 을 갖습니다 . 적어도이 시점에서는 HTMLHeaderElement. 이 헤더 인스턴스는 Node 및 Element에서 상속 된 모든 멤버를 수신하는 동시에 HTMLElement자체 유형 인와 함께 제공되는 모든 것을 수신 합니다.

TypeScript를 통해 프로그래밍 방식으로 선언하지 않는 한 DOM 쿼리를위한 일부 표준 Document 메서드는 TypeScript에 정의 된 특정 유형이있는 경우에도 일반 HTMLElement를 반환합니다 . 예를 들어 런타임에 getElementById어떤 종류의 요소를 찾을 수 있는지 알 수 없는 경우에 발생할 수 있습니다. 실제로 얻을 것이라고 알고있는 것으로 캐스팅하는 것은 다음과 같은 경우입니다.

// casting the return value from getElementById
const div:HTMLDivElement = document.getElementById('div_id') as HTMLDivElement;

React 컴포넌트 타이핑을 확인합시다

React 기능 구성 요소의 경우 다음과 ReactElement같이 를 반환하려고합니다 .

이전 예제의 13 행에는이 Appointment 구성 요소가 ReactElement.

흥미롭게도 React 유형 HTMLElements은 TypeScript에서 수행 하는 것과 매우 유사한 방식 으로 작동합니다. 피라미드 상단에는 이전 예제를 확장하는 인터페이스가 React.FC있습니다.. 이것은 기능적 구성 요소에 대해 독점적으로 작동하며 모든 React 기능 구성 요소의 기반입니다.

React.FC형제,이 React.Component유형입니다. 소스 코드에 따르면 이것은 "일반 JS 클래스를위한 기본 구성 요소"입니다.

따라서 이것은 다음과 같이 클래스 구성 요소에 사용할 것입니다.

renderReact Class 구성 요소 의 함수는 React.ReactNode유형 을 반환합니다 .

React.ComponentReact.FC인터페이스 바로 뒤에는 다른 여러 인터페이스가 있지만 그중 세 가지가 특히 흥미 롭습니다. 첫 번째는 ReactElement입니다. 위에서 언급했듯이 이것은에서 반환 할 유형 React.FC이지만 더 흥미롭게도 인터페이스 ReactElement로 직접 JSX.Element상속하고 JSX.IntrinsicElements. 이 (타이프 라이터가하는 것과 비슷합니다 JSX 코드에서 transpiled 될 HTML 정의하기 때문에이 마지막 하나는 매우 흥미 HTMLElements, HTMLInputElement등을).

다음은 JSX 용 소스 코드의 스크린 샷입니다. IntrinsicElements 인터페이스 소스 코드 :

JSX.IntrinsicElements는 JSX에서 트랜스 파일 할 HTML 요소를 정의합니다.

결론

일반적으로 TypeScript에서 React 구성 요소를 만들 때 반환 유형을 너무 많이 조작해서는 안됩니다. 그러나 린터가 반환 유형을 지정하도록 설정된 경우와 같이 트랜스 파일러가 유형을 추론하도록 설정하는 것과는 반대로 유효한 사용 사례가 있습니다. 보기 — noImplicitAnystrict: true당신의 설정 tsconfig.ts.

경험상 linter가 불평 할 때 코드에 유형을 지정해야합니다. 이는 일반적으로 TypeScript의 엔진이 사용하려는 변수 유형을 추론 할 수 없음을 의미합니다.

이상적으로는 사용중인 것을 이해해야합니다. 무엇을 구현하고 있는지, 사용중인 것이 작업에 적합한 도구인지 배우고 감사해야합니다.

"우리가 이해할 때까지 아무것도 보지 못합니다." — John Constable, XIX 세기 영국 화가

읽어 주셔서 감사합니다!

추가 읽기

Suggested posts

N + 1 문제 선택

모든 것은 비용이 있습니다.

N + 1 문제 선택

개발자의 경우 ORM (Object-relational mapping)을 사용하면 삶을 상당히 단순화 할 수 있지만 알아야 할 자체 캐치 세트가 있습니다. 더 심각한 문제 중 하나는 Select N + 1 문제입니다.

자신감있는 겸손 : 성공적인 리더십의 역설

자신감있는 겸손을 갖는 것은 드뭅니다. 그것을 전시하는 데 필요한 것을 알고

자신감있는 겸손 : 성공적인 리더십의 역설

자신감 겸손 시소에 대해 어떻게 균형을 잡을 수 있습니까? 내 자신감이 오만함으로 보이거나 겸손 함이 내 주장 부족의 신호로 보인다면 어떨까요. 어떻게하면 제대로됩니까? 이 생각은 내 것이 아닙니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.