Как исправить ошибку Property 'items' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes>?

Question

[KOPC1886]

Всем привет!

Вот такой код

// файл parent.tsx

import * as React from 'react';
import Child from './child';

class Parent extends React.Component<{}, {}> {
   constructor(props){
      super(props);
   }


    state = {
        items: [
            {
                id: 1,
                title: 'Test-1'
            },
            {
                id: 2,
                title: 'Test-3'
            }
        ]
    }

    render() {
        return (
            <div>
                <Child items={this.state.items}/>
            </div>
        );
    }
}

файл child.tsx

interface Props {
    items: any;
}

class Child extends React.Component<Props, {}> {
    constructor(props){
        super(props);
    }

    render() {
        const items = this.props.items;
        return (
            <div>
            </div>
        );
    }
}

в файле Parent.tsx показывает ошибку

Property 'items' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes>?

Answer 1

[Руслан Лопатин]

Вы указали, что тип состояния вашего элемента - пустой, а пытаетесь его заполнить чем-то.

Просто укажите тип данных, которые собираетесь использовать в качестве состояния:

interface ParentStateItem {
    id: number;
    title: text;
}
interface ParentState {
    items: ParentStateItem[];
}

class Parent extends React.Component<{}, ParentState> {
}

Comments

[KOPC1886]

Руслан Лопатин а если данные приходят через Props ? и я не знаю точный формат данных ?

[KOPC1886]

Руслан Лопатин

interface Props {
   data: any;
}

class Parent extends React.Component<Props, {}> {
   constructor(props){
      super(props);
   }

    render() {
        return (
            <div>
                <Child items={this.props.data}/>
            </div>
        );
    }
}

[Руслан Лопатин]

Вы знаете как минимум ту часть данных, что собираетесь использовать. Остальное - неважно. Впрочем, вы всегда можете использовать any. Но тогда зачем вам TypeScript?

[KOPC1886]

Руслан Лопатин: я вот в примере выше any использую, но все равно ругается TSC.

[Руслан Лопатин]

Я не знаю как работает react. Предположу, что Child ожидает на вход объект Props, содержащий поле items. А оно у вас не объявлено. Разделите ParentProps и ChildProps хотя бы. У ChildProps должно быть поле items. У ParentProps - поле data: ChildProps

[KOPC1886]

Руслан Лопатин: у меня разделено

вот

interface Props {
    items: any;
}

class Child extends React.Component<Props, {}> {
    constructor(props){
        super(props);
    }

    render() {
        const items = this.props.items;
        return (
            <div>
            </div>
        );
    }
}

[Руслан Лопатин]

Не знаю, что сказать. Но по-моему то, что оба интерфейса называются одинаково (Props) как минимум подозрительно. Они в одном файле или в разных? Если в разных, то почему нет декларации export?

[KOPC1886]

Руслан Лопатин: в разных файлах. export interface default ChildProps ?

[Руслан Лопатин]

export Child, export ChildProps. Ну и соответствующий import в Parent. Иначе Parent не увидит ни того, ни другого. default не нужно.

[KOPC1886]

Руслан Лопатин:

interface ChildProps {
    items: any;
}

 export default class Child extends React.Component<ChildProps, {}> {
    constructor(props){
        super(props);
    }

    render() {
        const items = this.props.items;
        return (
            <div>
            </div>
        );
    }
}

export default ChildProps;

[KOPC1886]

Руслан Лопатин: а вот Parent.tsx

import ChildProps from './child';

interface ParentProps {
    data: ChildProps
}

export default class Child extends React.Component<ParentProps, {}> {
    constructor(props){
        super(props);
    }

    render() {
        return (
            <div>
                <Child items={this.props.data}/>
            </div>
        );
    }
}

[KOPC1886]

Руслан Лопатин: все равно ругается на items в компоненте Parent + добавились ошибки "Cannot find name ChildProps"

[Руслан Лопатин]

Так не пойдёт. Зачем там export default? Это требование React или что? Почему нельзя написать export class Child и импортировать его по-человечески import {Child} from './child'?

[KOPC1886]

Руслан Лопатин: через default тоже экспортируется и работает. Можно и так, как вы предложили. Но это не исправляет ошибки)

[Руслан Лопатин]

В parent.tsx у вас класс называется Child. А настоящий Child не импортируется. Как tsc должен понять, какой Child вы имели ввиду?

[Руслан Лопатин]

И import ChildProps from './child'; тоже неправильный синтаксис
Должно быть
import {ChildProps} from './child'

[KOPC1886]

Руслан Лопатин: вот что в файле parent.tsx

import ChildProps from './child';

interface ParentProps {
    data: ChildProps
}

export default class Parent extends React.Component<ParentProps, {}> {
    constructor(props){
        super(props);
    }

    render() {
        return (
            <div>
                <Child items={this.props.data}/>
            </div>
        );
    }
}

[KOPC1886]

строка с подключением компонента не вошла

import Child from './child';

[Руслан Лопатин]

import Child, {ChildProps} from './child';
тогда уж

[KOPC1886]

Руслан Лопатин: не суть) ошибки не исправляются все равно)