react-tap-event-plugin: syntax error in Typescript when adding onTouchTap to div

Hey guys, in the latest @types/react, use this solution

import * as React from 'react';
import * as injectTapEventPlugin from 'react-tap-event-plugin'
injectTapEventPlugin()
declare module 'react' {
    interface DOMAttributes<T> {
        onTouchTap?: React.EventHandler<React.TouchEvent<T>>;
    }
}

FYI to any newcomers to this, @blakeembrey responded to that ticket ^ and this solution works:

import * as React from 'react';
injectTapEventPlugin();
declare module 'react' {
    interface HTMLProps<T> {
        onTouchTap?: React.EventHandler<React.TouchEvent<T>>;
    }
}

apparently by importing react first, you flip the file into module mode such that your module declaration augments the previous definition for react as opposed to over-writing it.

@ptitmouton FYI, I’ve opened https://github.com/Microsoft/TypeScript/issues/14325 to figure out what’s happening (I’m a curious guy 😃 ).

I am using it successfully with TS2. In the index.tsx rather than import use const …

const injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

Then add a custom type definition for require. I created a require.d.ts file in my types dir with

declare var require: {
    (path: string): any;
    <T>(path: string): T;
    (paths: string[], callback: (...modules: any[]) => void): void;
    ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
};

That should do the trick.

Hm, I guess React typings have changed since? The snippet above doesn’t work for me with TS2 and react bindings from @types/react…

This helped me out:

declare module 'react' {
    interface HTMLProps<T> {
        onTouchTap?: React.EventHandler<React.TouchEvent<T>>;
    }
}

Not a great solution but you can place the props into an object and then destructure them into the element like:

      const props = {
        key: index,
        src: item.data,
        onTouchTap: () => this.handleOpen()
      };

      return (
        <img {...props} />
      );

This seems to dodge the type checker. I only have one instance of this in my code base at the moment but it won’t be fun if there are lots. Very happy to hear of a better solution. I can’t get the type extension described above to work. I suspect it is because the ‘react’ types have been re-written to a ‘@types’ approach and are now less extendable in some way? Though I’ve no idea what I’m talking about really.

@rlmckenney But doesn’t your tsc complain that onTouchTap is not a valid attribute when compiling .tsx files?