reactjs - Typescript hlási, že Vlastnosť neexistuje na type 'JSX.IntrinsicElements' pri používaní React.createClass?

Používam TypeScript na písanie aplikácie Redux.

var item = React.createClass({
  render: function() {
    return (<div>hello world</div>)
  }
});

export default class ItemList extends Component<any, any> {
    render() {
        return (<item />)
    }
}

Potom TypeScript hlási toto:

Property 'item' does not exist on type 'JSX.IntrinsicElements'.

Odpoveď č. 1

Vaša komponenta musí začínať veľkým písmenom I namiesto malého písmena i, inak by TypeScript vydal chybu. Zmena item na Item by to mala opraviť:

var Item = React.createClass({
  render: function() {
    return (<div>hello world</div>)
  }
});

export default class ItemList extends Component<any, any> {
    render() {
        return (<Item />)
    }
}

Odpoveď č. 2

Môžete deklarovať svoj vlastný typ prvku takto:

import * as React from 'react'

declare global {
  namespace JSX {
    interface IntrinsicElements {
      item: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    }
  }
}

Odpoveď č. 3

Je to preto, že názov vašej komponenty item nezačína veľkým písmenom, čo spôsobuje sťažnosť Typescriptu. Nahradenie item za Item by mohlo tento problém vyriešiť.

Odpoveď č. 4

Pre kohokoľvek iného, kto je na tom zaseknutý.

Riešením bolo

rm -rf node_modules
npm install

Typescript sa sťažoval

Property 'div' does not exist on type 'StyledInterface'.

a

Property 'div' does not exist on type 'JSX.IntrinsicElements'.

Myslím, že hlavným dôvodom bolo, že som omylom upravoval definície typov v node_modules vo vscode.

Odpoveď č. 5

Pre všetkých, ktorí čelili podobnej chybe:

Property 'div' does not exist on type 'JSX.IntrinsicElements'.

Alebo akýkoľvek iný tag namiesto div. Ak ostatné riešenia nepomohli, skúste pridať do tsconfig.json:

...    
"compilerOptions": {
    "moduleResolution": "node"
    }
...

Odpoveď č. 6

Vyzeralo to, že mám rovnaký problém ako v tejto otázke, ale bol to preklep :/ Ale rozhodol som sa to sem zdieľať, pretože chyba vyzerala veľmi podobne a Google ma tu zaviedol.

V deklarácii som mal preklep:

declare global {
    namespace JSX {
        interface IntrinisicElements {
            'about-me': { me: string }
        }
    }
}

Namiesto IntrinsicElements som mal IntrinisicElements (extra písmeno 'i' po 'Intrin'). Kompilátor si to nevšimol, pretože ide o definíciu rozhrania, takže si môžeme názov zvoliť sami.

A chyba vyzerala takto:

Vlastnosť 'about-me' neexistuje na type 'JSX.IntrinsicElements'.

Odpoveď č. 7

VS Code Zobraziť -> príkazovú paletu, spustite príkaz TypeScript: Vybrať verziu TypeScript a vyberte Použiť verziu pracovného priestoru

alebo

VS Code Zobraziť -> príkazová paleta, spustiť príkaz TypeScript: Vybrať verziu TypeScript a vybrať Použiť verziu VS Code

Súvisiace články