Property 'type' does not exist on button

Asked
Active3 hr before
Viewed126 times

8 Answers

existproperty
90%

Why? Isn't the type attribute part of React.HTMLAttributes<HTMLButtonElement>? What is the proper/recommended way to set this attribute?, Thanks :) Is it really necessary to have the interface extend React.DetailedHTMLProps, or will React.ButtonHTMLAttributes<HTMLButtonElement> suffice? – o01 Apr 23 '20 at 15:04 , Outdated Answers: results from flagging exercise and next steps

export interface ButtonProps
  extends React.DetailedHTMLProps<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    HTMLButtonElement
  > {
  small?: boolean
}

class ButtonZ extends React.Component<ButtonProps> {
  render() {
    return <></>
  }
}
88%

So what is going here? We have defined an empty object first and then tried to assign it the name property. This is just plain Javascript code, and Typescript should allow us to write that transparently. So why the error message?,If you enjoyed this post, have also a look also at other popular posts that you might find interesting:,This is related to the first key concept that we are going to cover: Type Inference.

If we are not familiar with how the Typescript Type system works, we might be surprised to realize that this actually does not compile. So why is that? Let's have a look at the error message we get:

Error: (54, 6) TS2339: Property 'name'
does not exist on type '{}'.
load more v
72%

The EventTarget type does not inherit from the Element type which is why TypeScript fails to recognize properties such as id, class, etc. that we would expect to exist on a typical Element object., As it is evident from the example above, after specifying the correct type for e.target it works fine. However, other properties (such as e.type, etc.) would throw a TypeScript error. If we need to access those other properties of the event as well, we could do so in the following way: , This code runs perfectly fine because we know we're expecting the event target to be an HTML element, and we are certain that the HTML element has the property id. However, TypeScript complains about the id property not existing on the EventTarget type. This is because:

Let's suppose we have the following HTML element:

<div id="foo"></div>
load more v
65%

Can I prevent the TypeScript compiler from caring about this?, Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. ,createPath is missing the generic type param.

interface Props extends RouteComponentProps < {
   myParamProp ? : string;
} > {
   myNormalProp: boolean;
}
load more v
75%

Pretag
 Pretag team - issue, fix, solve, resolve
40%

How to solve Type Property '' does not exist on type 'IntrinsicAttributes & Function'? ,Type '{ reload: (e: MouseEvent) => void; }' is not assignable to type 'IntrinsicAttributes & Function'. Property 'reload' does not exist on type 'IntrinsicAttributes & Function',Also note that I've changed filterComponent to be FilterComponent as lowercase component namespace is reserved for HTML primitives

I have a parent component like so

import filterComponent from 'filter/filterComponent'


  const reloadHandler = useCallback(
    (event: MouseEvent) => {
      event.preventDefault();
     // my logic
    },
    [Reload, Fetching]
  );

const parent = () => { 
return (
    <filterComponent reload={reloadHandler} /> 
   )
}

Filter Component:

export const filterComponent = (filter: Function, reload: Function) => { 
    return (
       <Button onClick={reload} />
   )
}
load more v
22%

error TS2339: Property '_input' does not exist on type

Pretag
 Pretag team - issue, fix, solve, resolve
60%

Typescript doesn't like the very last line, which this warning: Property 'results' does not exist on type 'AxiosResponseData'.,I'd like represent this response in Typescript, so I've done this:,The code does work, it's just that Typescript complaints. Changing to data.data.result results in Cannot read property 'results' of undefined.

From my Axios request, my res.data looks like this:

{
   "count": 1,
   "next": null,
   "previous": null,
   "results": [{
      "id": 1,
      "name": "The Name",
      "url": "http://somewhere"
   }]
}
load more v

Other "exist-property" queries related to "Property 'type' does not exist on button"