TypeScript에서 HTML 요소의 속성을 확장합니다

<:> typeScript 팁 : HTML 요소 속성을 확장합니다 이 기사는 "Typescript의 전력 출시"에서 발췌 한 것으로, 이는 Typection에서 HTML 요소의 속성을 확장하는 방법을 보여줍니다. 대규모 응용 프로그램에서는 사용자 지정 버튼 또는 태그와 입력 필드를 결합하는 구성 요소와 같은 표준 HTML 요소를 기반으로 구성 요소를 작성합니다.

typeScript는 구성 요소에 의해 수락 된 속성에 대한 명시적인 정의가 필요하며, 이는 각 속성에 대해 성가신 일 수 있습니다. REACT의 HTML 요소가 사용하는 속성과 일치하려면

를 사용할 수 있습니다. 특정 속성을 제외하려면

유틸리티 유형을 사용할 수 있습니다.

구성 요소의 속성을 확장하려면 교차로 유형을 사용할 수 있습니다. 이를 통해 구성 요소는 HTML 요소의 모든 속성과 기타 추가 속성을 수용 할 수 있습니다. 이것은 현재 테마를 기반으로 스타일을 변경하거나 표준 HTML 요소에 새로운 기능을 추가하는 구성 요소에 유용합니다.

React.ComponentProps 메소드 1 : 단일 HTML 요소의 특성을 확장 인앱 스타일로 사용자 정의 버튼 구성 요소를 작성하겠습니다. JavaScript에서는 다음을 수행 할 수 있습니다 Omit typeScript에서 : 와 같은 필요한 속성을 추가 할 수 있습니다.

그러나 이것은 매우 성가시다. html

요소의 속성과 일치하기 위해

를 사용할 수 있습니다.

그러나 사용자가 속성을 ​​통과하면 스타일을 덮어 씁니다. 를 사용하여 특정 속성을 배제 할 수 있습니다

또는

라이브러리를 사용하여 클래스 이름을 관리 할 수 ​​있습니다.

속성을 ​​확장하려면 교차점 유형을 사용할 수 있습니다.

const Button = (props) => {
  return <button {...props} />;
};

<🎜 🎜> 구성 요소는 이제 <🎜 🎜> 요소의 모든 속성과 추가 <🎜 🎜> 속성을 ​​수용합니다. children <🎜 🎜> <<> 메소드 2 : 복합 구성 요소를 만듭니다

const Button = ({ children }: React.PropsWithChildren) => {
  return <button>{children}</button>;
};

또 다른 공통 구성 요소는 레이블과 입력 요소를 결합한 구성 요소입니다.

이 방법으로 표준 HTML 요소의 기능을 쉽게 재사용하고 확장하여 코드의 유지 관리 및 재사성을 향상시킬 수 있습니다. React.ComponentProps button <<>

<<> 이 기사는 "TypeScript의 힘을 출시"하여 SitePoint 프리미엄 또는 전자 책 소매 업체를 방문하십시오.

const Button = (props: React.ComponentProps<'button'>) => {
  return <button {...props} />;
};

위 내용은 TypeScript에서 HTML 요소의 속성을 확장합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!