Integrating Polymer Web Components into React app written in Typescript?

Question

Trying to integrate a Polymer Web Components tooltip feature into a React App written in TypeScript.

On compile, it is throwing error Property 'paper-tooltip' does not exist on type 'JSX.IntrinsicElements'

So, trying to get the <paper-toooltip> into the JSX namespace, I created this file:

Tooltip.txs:

import * as React from 'react'

declare global {
    namespace JSX {
        interface IntrinisicElements {
            'paper-tooltip': { Tooltip: string }
        }
    }
}

export default Tooltip;

What am I doing wrong here?

Also, I understand in React/TypeScript there is issue with components are required to start with capital letter, like "I" … this is adding to my confusion, I don't understand.

Answer 1

It's a typo. You wrote IntrinisicElements instead of IntrinsicElements when merging the interface.

declare global {
    namespace JSX {
        interface IntrinsicElements {
            'paper-tooltip': { Tooltip: string }
        }
    }
}

From my testing, this was the only issue, but if that was just a typo when pasting the question, it's probably an issue with config.