1

I have the following code:

interface IHandleSelection {
    (value: string): any | void;
}

interface IPipeChangeEventValueToFunction {
    (handler: IHandleSelection): (event: React.ChangeEvent<HTMLSelectElement>) => void;
}

const pipeChangeEventValueToFunction: IPipeChangeEventValueToFunction = handler => event => 
    handler(event.target.value);

...
        // within a component where onSelection is a prop of type IHandleSelection
        <select
            onChange={pipeChangeEventValueToFunction(onSelection)}
        >

On which I get the error:

Property 'value' does not exist on type 'EventTarget & HTMLSelectElement'

I've tried the fix suggested here (and elsewhere):

const pipeChangeEventValueToFunction: IPipeChangeEventValueToFunction = handler => event => {
    const test = event.target as HTMLSelectElement;
    const a = test.value;
}

But I get the exact same error (perhaps unsurprisingly).

Any thoughts on what's going on here? It seems like some sort of typing error.

OliverRadini
  • 6,238
  • 1
  • 21
  • 46
  • How does your `IHandleSelection` type look like? Also: Can you show, how you invoke `pipeChangeEventValueToFunction`? – ford04 Oct 03 '19 at 14:36
  • @ford04 sure, thanks for pointing out that I'd missed that; updated now – OliverRadini Oct 03 '19 at 15:38
  • Cannot reproduce that. Do you do something different from following sample (URL too long to post it in one comment)? – ford04 Oct 03 '19 at 16:39
  • [Pg](https://www.typescriptlang.org/play/index.html?esModuleInterop=true&jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChRJY4BvOIgOwBMko4BfObXAo9GAWka4y5ejBaZ0SOAEkAEiiYAbJAGUkKjMAj1qpOHAAUANxRKArkgBccAM4wowegHMAlDeMRgjUm1KjxKEk0aRkABWAwJABhAAtFZyQAUWMkMQA1M0sAFQgAMXN6LR0afSN45RYbeUVGFXVNGG16dyMkVLEbZD4AOjiE5I6YAB45bIBZABkGpAwklRA0mAA+VzgAXmW4T29ffzQdezgwSJiKxJSlzIskXIKipp1qiKj+l0GrrNv8wuL6DbgFTqLA2W3aS1BZSBKighnBYh6MBQUESMB6phurn8mF+j3+AEEwGBDGAcGBbDZaDoZn9qgpKjS8exXHoDEQYOYoP9hrYNLN4Do3ol1tQTq9zh8Ml87rjmiSybYetS+X9XBwAPTLPakBjMWHDQlgODKxrNEXGUE0dga5YAGiEaHMiwRqPmSGdMAAQgBPGSMQyECAQGD4VxYoA) – ford04 Oct 03 '19 at 16:40
  • @Pg That was indeed what I was doing; though it seems that the problem was no including `"dom"` in the `compilerOptions` of my `tsconfig` – OliverRadini Oct 07 '19 at 07:37

1 Answers1

1

Looks like you are not including typescript/lib/lib.dom.d.ts in your project.

You can do that by changing your tsconfig.json, and adding dom to compilerOptions.lib as follows:

{
  "compilerOptions": {
    ...
    "lib": ["es2017", "dom"],
    ...
   }
}

Or you can add the following reference triple-slash directive to one of your declaration (*.d.ts) files.

/// <reference lib="dom" />
Hamza El Aoutar
  • 5,292
  • 2
  • 17
  • 23