TS2339: свойство 'реквизит' не существует в типе 'Home'

Ответ 1

После того, как вы сняли репозиторий и проверили его, я понял, что у вас нет реакции на типизацию для машинописи.

Typings - это простой способ управлять и устанавливать определения TypeScript

Добавление этой строки

"@types/react": "^16.0.25" // or another version you prefer

к package.json и запуску npm i еще раз решил проблему. Попробуйте и дайте мне знать, если это решит это на вашей стороне :)

PS: TypeScript требует, чтобы вы описали форму ваших объектов и ваших данных. Если вы посмотрите на другой ответ, который я предоставил ранее, это была довольно длинная и сложная версия. Вам нужно указать тип, описывающий ваши реквизиты, и передать его соответствующему компоненту.

Ответ 2

Typescript должен знать форму props и state передаваемое компоненту. Если вы действительно хотите, чтобы остановить машинопись от применения типизации в компоненте (который, кстати, побеждает всю цель использования машинописи), а затем, компонент, который необходим доступ к props или state переданного он должен указать тип или форму так говорить, как any. То есть ваш компонент будет выглядеть примерно так

export class Home extends React.Component<any, any>

вместо

export class Home extends React.Component

который, кстати, является неправильным способом расширения класса, если этот класс ожидает props и/или state.

Передача any типа для props и state означает, что рассматриваемый компонент должен принимать любую форму (тип) как для props и для state.

Попробуй это

import * as React from "react";
import * as ReactDOM from 'react-dom';

export class Home extends React.Component<any, any> {
  render() {
    console.log(this.props)
    return (
      <div>Working</div>
    )
  }
}

class App extends React.Component{
  render() {
    return (
      <Home value="abc" />
    )
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

и все должно работать так, как ожидалось, потому что вы избавились от Typescript с точки зрения проверки типов.

Вы также можете посмотреть демо здесь

Если вы действительно хотите применить форму (тип) props и/или state вам нужно будет определить эти формы, как правило, с помощью interface или встроенной аннотации типа. Вот пример того же кода выше, который применяет форму реквизита с помощью предыдущего метода:

import * as React from "react";
import { render } from "react-dom";

interface Props {
  value:string,
  name:string
}

export default class Home extends React.Component<Props>{
  render() {
    console.log(this.props)
    return (
      <div>Working. The props values are: {this.props.value} {this.props.name}</div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <Home value="abc" name="def"/>
    )
  }
}

render(<App />, document.getElementById("root"));

Теперь здесь вы никогда не сможете добавить какую-либо другую prop к компоненту Home которая не определена в интерфейсе Props. Например, делать что-то вроде:

<Home value="abc" name="DEF" somethin="else"/>

не будет компилироваться, потому somethin что- somethin не определено в interface который используется компонентом Home.

Чтобы реализовать форму state вам нужно сделать то же самое, что и для props, то есть определить контракт (интерфейс). Кроме того, обратите внимание, что вам все еще нужно получить доступ к своим props через this НЕ Props как это просто определение типа структуры, а не владельцев самих значений.

Вы можете посмотреть демо для этой альтернативы здесь

Ответ 3

В наборе файлов tsconfig.json

"allowSyntheticDefaultImports": true

Пример:

{
   "compilerOptions": {
     ...
     "allowSyntheticDefaultImports": true
   }
}