TS Property '...' does not exist on type

[tjallingt]

Somehow the typings for this library seem to have broken for various elements (I have only checked the TextField, Button and DropDownselect). "Native" props are seemingly not recognized and cause typescript errors. Unsure when this was introduced.

Example

<TextField value="test" onChange={e => console.log(e.target.value)} />

Type '{ value: string; onChange: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes & TextFieldProps & RefAttributes<HTMLInputElement>'.
  Property 'onChange' does not exist on type 'IntrinsicAttributes & TextFieldProps & RefAttributes<HTMLInputElement>'.ts(2322)

Live examples

https://codesandbox.io/s/1r4x82678q

[craigkovatch]

We haven't published any changes since January 28. Have you used the library between then and now? Possible that the latest React typings changed out from under us.

[tjallingt]

Admittedly i don't remember when/whether i tested tableau-ui with typescript (before noticing this error today). I'm just assuming this worked correctly at some point, which would mean something changed.

[craigkovatch]

Tableau-UI is currently built against React 16.5.2 so we use @types/react@16.7.13 and @types/react-dom@16.0.11. Reverting to these versions in code sandbox does not resolve the error that's displayed; neither does reverting to a previous version of Tableau-UI. I also don't see this error in VSCode in an actual project.

Have you tried reproing in another environment? I'm wondering if this is an issue with CodeSandbox.

[tjallingt]

I first encountered this error in create-react-app project so i'm relatively confident that codesandbox isn't causing the issue.

Ill get back to you with the typescript and react versions, cant access them directly right now...

i think you can also reproduce using yarn create react-app --typescript and adding tableau-ui and inserting some code from the examples (haven't tested it though so maybe it works and its something else)

[tjallingt]

Just verified that a fresh install of create-react-app also has these typescript errors:

yarn create react-app test --typescript
cd test
yarn add @tableau/tableau-ui

edit App.tsx to be:

import React from 'react';
import { TextField } from '@tableau/tableau-ui';

function App() {
  return <TextField onChange={e => e.target.value} />
}

export default App;

Running yarn start I get:

Failed to compile.

D:/dev/test/src/App.tsx
TypeScript error: Type '{ onChange: (e: any) => any; }' is not assignable to type 'IntrinsicAttributes & TextFieldProps & RefAttributes<HTMLInputElement>'.
  Property 'onChange' does not exist on type 'IntrinsicAttributes & TextFieldProps & RefAttributes<HTMLInputElement>'.  TS2322

    3 |
    4 | function App() {
  > 5 |   return <TextField onChange={e => e.target.value} />
      |           ^
    6 | }
    7 |
    8 | export default App;

Relevant dependencies:

"@tableau/tableau-ui": "^2.2.0",
"@types/react": "16.8.13",
"@types/react-dom": "16.8.3",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "2.1.8",
"typescript": "3.4.2"

Pinning react@16.5.2, react-dom@16.5.2, @types/react@16.7.13 and @types/react-dom@16.0.11 doesn't seem to fix it either. (although it is hard to tell yarn whether actually downgraded my dependencies)

[tjallingt]

Digging around on https://unpkg.com/@tableau/tableau-ui@2.2.0/ i believe this line is the cause:

import { OmitRef } from './TypeUtil';

It seems that file isn't being shipped and somehow the types passed through it seem to disappear (I guess they turn into any or unknown or something).

I think you can also use React.PropsWithoutRef to achieve the same behaviour...

[tjallingt]

@craigkovatch could you take a look at the missing TypeUtil file?

[craigkovatch]

Is this an immediately-blocking issue for you? Spinning a lot of plates over here :) I probably won't be able to dig in until at least next week.

[tjallingt]

I understand, its not really a priority for me (although id love to see it fixed)

[datawithdev]

@craigkovatch I am stuck at similar error as well trying to compile on Tableau extension that uses tab-UI

[craigkovatch]

Current plan is to get this fixed this week.

[craigkovatch]

Sorry for the wait on this. This is still on our radar and on the June schedule. ~The next release is likely to require TypeScript 3.5 in order to clean this up a little bit, as Omit<> is supported natively in 3.5.~

[tjallingt]

Does the React.PropsWithoutRef generic not do the trick? It seemed to work when I tested it on my end (but I didn't look to much into it).

[DanielGuelfi]

@craigkovatch I also ran into this issue (incorporating Buttons and TextFields) and would appreciate a fix for this, please.

[craigkovatch]

Think I've got this fixed; should release later this week. Our apologies again for the delay, we love that you use this library and we generally try to get things done much quicker but have had many important demands to balance in the past few months. Hold on just a little bit longer :)

[craigkovatch]

Version 2.2.1 has been shipped, please verify and close this issue if it's fixed :)

[DanielGuelfi]

Have tested the new version 2.2.1 and can confirm that it has fixed my issue. Thanks for your help, @craigkovatch !

[tjallingt]

Great! thank you so much @craigkovatch 🙌