要素のネイティブインターフェイスを拡張する

Question

"半カスタマイズ"ボタンを作成したいと思います。基本的には、<button>タグの初期プロパティを拡張する必要があります。ここで私はやっているものの最小限の例を示します。しかし

export default class Button extends React.Component<Props, State> { 
    public render() { 
    const { size, ...buttonProps } = this.props; 
    return (
     <button 
     {...buttonProps} 
     className={classnames({ 
      [styles.small]: size === 'small', 
      [styles.medium]: size === 'medium', 
      [styles.large]: size === 'large', 
     })} 
     /> 
    ); 
    } 
} 

、私が把握することはできませんが、ネイティブHTMLButtonのproptypesのすべてを継承するインターフェイスを作成する方法です。どのようにあなたはtypescriptですにおけるネイティブのHTML要素のプロパティを延長する

interface Props extends <(Something)> { 
    size: 'small' | 'medium' | 'large', 
} 

：

私はそれはようなものになるだろうと想像しますか？

Answer 1

HTMLPropsインターフェイスを反応させることができます。

import { HTMLProps } from 'react' 

interface Props extends HTMLProps<HTMLButtonElement> { 
    size: 'small' | 'medium' | 'large' 
} 

Answer 2

TypeScriptのインターフェイスは開いており、同じ共通ルート内の複数の宣言がマージされます。例：

interface HTMLButtonElement { 
    customThing(): string; 
} 

const button = document.getElementsByTagName('button')[0]; 

const customValue = button.customThing(); 

HTMLButtonElementインタフェースは、元のインターフェイス（すなわち、それはグローバルスコープ内にある）と同じ共通のルートに宣言する必要があります。 customThingを追加すると、HTMLButtonElementにはオリジナルのすべてのメンバーが含まれますHTMLButtonElementとcustomThing