intrinsicattributes typescript

//  IntrinsicAttributes is specific to JSX

/** IntrinsicAttributes are attributes of IntrinsicElements. Intrinsic elements are

  * looked up on the special interface JSX.IntrinsicElements. By default, if this

  * interface is not specified, then anything goes and intrinsic elements will not be

  * type checked. However, if this interface is present, then the name of the intrinsic

  * element is looked up as a property on the JSX.IntrinsicElements interface.

  * The JSX.IntrinsicAttributes interface can be used to specify extra properties

  * used by the JSX framework which are not generally used by the components’ props

  * or arguments – for instance the key prop in React.

  */

// Intrinsic Elements example

declare namespace JSX {

  interface IntrinsicElements {

    foo: any;

  }

}

; // ok

; // error
// Intrinsic Attributes example

declare namespace JSX {

  interface IntrinsicElements {

    foo: { requiredProp: string; optionalProp?: number };

  }

}

; // ok

; // ok

; // error, requiredProp is missing

; // error, requiredProp should be a string

; // error, unknownProp does not exist

; // ok, because ‘some-unknown-prop’ is not a valid identifier