TYPESCRIPT

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;
  }
}
<foo />; // ok
<bar />; // error

// Intrinsic Attributes example
declare namespace JSX {
  interface IntrinsicElements {
    foo: { requiredProp: string; optionalProp?: number };
  }
}
<foo requiredProp="bar" />; // ok
<foo requiredProp="bar" optionalProp={0} />; // ok
<foo />; // error, requiredProp is missing
<foo requiredProp={0} />; // error, requiredProp should be a string
<foo requiredProp="bar" unknownProp />; // error, unknownProp does not exist
<foo requiredProp="bar" some-unknown-prop />; // ok, because 'some-unknown-prop' is not a valid identifier