Javascript – React Typescript property does not exist on type / IntrinsicAttributes & IntrinsicClassAttributes

javascriptreactjstypescript

New to TypeScript and this feels like it should be really simple but I can't quite get the syntax happy!

Very simple component:

import * as React from "react";
import ControlArea from "./ControlArea";

interface IControlAreaProps {
  welcome?: any;
}

export class Layout extends React.Component<IControlAreaProps> {
  public render() {
    return (
        <ControlArea welcome="This is the control area"/>
    );
  }
}

I'm getting the TS error Property 'welcome' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ControlArea> & Readonly<{ children?: ReactNode; }>...'.

Any point in the right direction would be very much appreciated.

Best Answer

Your mistake here is that you're adding the interface to the Layout component when you should be adding them to the ControlArea component

interface IControlAreaProps {
  welcome?: any
}

export default class ControlArea extends React.Component<IControlAreaProps> {
  // Your ControlArea code
}

Related Solutions

Javascript – Why does the JavaScript code receive a “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error, while Postman does not

If I understood it right you are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request. A tutorial about how to achieve that is Using CORS.

When you are using Postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest:

Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.

Reactjs – Property does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> …’

I've resolved this problem by adding missing properties to namespaces in node_modules/@types/material-ui/index.d.ts file. It worked for me. I don't think that it's a good solution and I'm wondering if there're some better approaches.

namespace DatePicker {
    export interface DatePickerProps {
        defaultDate?: Date;
        disableYearSelection?: boolean;
        ..

Best Answer

Related Solutions

Javascript – Why does the JavaScript code receive a “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error, while Postman does not

Reactjs – Property does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> …’

Related Topic