CODEWITHSUNDEEP
reactjstypescript
Michael_Lee
Michael_Lee

Reputation: 41

How can i disable props checking when jsx type is a function?

when i set the jsx to react and jsxFactory to fn in tsconfig.json, and some errors here:

a.tsx

import fn from "./fn";
import delegate from "./delegate";

class A {
    constructor(point: { x: number, y: number }){
        console.log(x, y);

        // ...
    }
}

delegate(
    <A target={document.getElementById("myId")} />
);

delegate.ts

export default function delegate({ type, props: { target } }){
    target.onClick = (e) => {
        new type(e.clickX, e.clickY);
    };
};

The errors:Type '{ target: HTMLElement; }' is not assignable to type '{ x: number;, y: number; }' and Property 'target' does not exist on type '{ x: number; y: number; }'

how can i disable the props checking ? Do not care the logic with code, because, this only is an example.

Upvotes: 0

Views: 680

Answers (2)

Michael_Lee
Michael_Lee

Reputation: 41

The code is below:

jsx-namespace.d.ts

declare namespace JSX {
     // ...
    interface IntrinsicAttributes {
        [attributeName: string]: any
    }
    // ...
}

for typescript 3.4.5

Upvotes: 0

basarat
basarat

Reputation: 276057

You can assert the props as any and then spread (...) them: 

delegate(
    <A {...({ target: document.getElementById("myId") } as any)} />
);

Upvotes: 1

Related Questions