typescript 属性 'XYZ' 不存在于类型 'Readonly<{ children?: ReactNode; }> 和只读<{}>'

Property 'XYZ' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'

提问by LoopBoi

FIXED: I uninstalled VScode, typescript and eslint globally. Once I reinstalled VScode everything was working magically again.

修正：我全局卸载了 VScode、typescript 和 eslint。一旦我重新安装了 VScode，一切又神奇地工作了。

UPDATE: After installing the @types/react library I still get a similar error only for both RecipeList.js and Recipe.jsas mentioned in Property 'props' does not exist on type 'Home'or TypeScript Property 'props' does not exist:

更新：安装@types/react 库后，我仍然收到类似的错误，仅适用于 RecipeList.js 和 Recipe.js，如 属性 'props' 在类型 'Home' 上不存在或TypeScript 属性 'props' 不存在：

Property 'recipes' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'.

'Readonly<{children?: ReactNode; 类型上不存在属性'食谱' }> 和只读<{}>'。

ORIGINAL: So I am new to React and for some reason on VSCode, I get a syntax error when trying to access .props for the both the RecipeList.js and Recipe.js.

原文：所以我是 React 的新手，出于某种原因，我在 VSCode 上尝试访问 RecipeList.js 和 Recipe.js 的 .props 时出现语法错误。

Here is a code sample for Recipe.js:

这是 Recipe.js 的代码示例：

import React, {Component} from 'react';
import "./Recipe.css";

class Recipe extends Component {

    // props: any; uncommenting this will fix the bug

    render() {
        // don't have to use return and parentheses for arrow with JSX
        const ingredients = this.props.ingredients.map((ing, ind) => (
            <li key={ind}>{ing}</li>
        ));
        const {title, img, instructions} = this.props

        return (
            <div className="recipe-card">
                <div className="recipe-card-img">
                    <img src={img} alt={title}/>
                </div>
                <div className="recipe-card-content">
                    <h3 className="recipe-title">
                        {title}
                    </h3>
                    <h4>
                        Ingredients:
                    </h4>
                    <ul>
                        {ingredients}
                    </ul>
                    <h4>
                        Instructions:
                    </h4>
                    <p>
                        {instructions}
                    </p>
                </div>
            </div>
        )
    }
}

Screenshot of .props error

.props 错误截图

However, the project throws no compile-time errors and the website works perfectly fine.

但是，该项目不会引发任何编译时错误，并且该网站运行良好。

Screenshot of app working fine with no chrome console or terminal errors

应用程序运行良好且没有 chrome 控制台或终端错误的屏幕截图

I'm thinking this less has to do with my code and more so with TypeScript or some sort of preset config with Javascript for VScode having trouble identifying the .props property for each component because I get similar problems when I built the React Tutorial Projectinto my editor (I even copy pasted the final index.js code from the site just to be sure), despite the app working fine with no compile-time errors.

我想这少了我的代码，更因此与打字稿或某种预设配置使用Javascript有麻烦识别.props属性为每个组件，因为我有类似的问题，当我建立VScode做阵营教程项目进我的编辑器（为了确定起见，我什至从站点复制粘贴了最终的 index.js 代码），尽管该应用程序运行良好，没有编译时错误。

Screenshot of the same .prop errors after following React Tutorial

遵循 React 教程后相同 .prop 错误的屏幕截图

The only way to solve this problem is if I actually hardcode and create a props property for each class and set it to any like so:

解决这个问题的唯一方法是，如果我真的硬编码并为每个类创建一个 props 属性并将其设置为任何像这样：

Screenshot of only solution to the syntax error

仅解决语法错误的截图

Any ideas are appreciated! Thank you so much! Even though the app works I'm having a bit of OCD over this meaningless error popping up in the editor.

任何想法表示赞赏！太感谢了！尽管该应用程序可以运行，但我对编辑器中弹出的这个毫无意义的错误感到有点强迫症。

PS: Here are my updated dependencies

PS：这是我更新的依赖项

"dependencies": {
  "@types/react": "^16.4.13",
  "prop-types": "^15.6.2",
  "react": "^16.5.0",
  "react-dom": "^16.5.0",
  "react-scripts": "1.1.5",
  "typescript": "^3.0.3"
 }

回答by klugjo

You need to define what your props and state will look like using an interfaceand TypeScript's generic implementation of React.Component

您需要使用接口和 TypeScript 的 React.Component 通用实现来定义道具和状态的外观

import React, {Component} from 'react';
import "./Recipe.css";

interface IRecipeProps {
  ingredients?: string[];
  title?: string;
  img?: string;
  instructions?: string;
}

interface IRecipeState {
}

class Recipe extends Component<IRecipeProps, IRecipeState> {
    render() {
        const ingredients = this.props.ingredients.map((ing, ind) => (
            <li key={ind}>{ing}</li>
        ));
        const {title, img, instructions} = this.props

        return (
            <div className="recipe-card">
                Your render code here
            </div>
        )
    }
}

• I would change the file extension to .tsxto indicate that it is a React file using TypeScript -> Recipe.tsx
• Please adjust the types (strings) to fit your data.
• Use IRecipeStateto define the structure of your Component state (this.state.fooBar). It is ok to leave it empty for now, since you don't make use of the state.
• Make sure you do the same for your other Component that throws an error (RecipeList.js)

• 我会将文件扩展名更改为.tsx使用 TypeScript ->Recipe.tsx
• 请调整类型（字符串）以适合您的数据。
• 使用IRecipeState来定义你的组件状态的结构（this.state.fooBar）。现在可以将其留空，因为您不使用状态。
• 确保您对其他引发错误的组件执行相同操作 ( RecipeList.js)

回答by Briantical

Basing on Klugjosanswer. You could do the same with React's functional component (FC) and use the useState Hook to manage the state.

基于Klugjos 的回答。您可以对 React 的功能组件 (FC) 执行相同操作，并使用 useState Hook 来管理状态。

import React, {FC} from 'react';
import "./Recipe.css";

interface IRecipeProps {
  ingredients?: string[];
  title?: string;
  img?: string;
  instructions?: string;
}

interface IRecipeState {
}

const Recipe:FC<IRecipeProps> = (props) => {

    const { ingredients, title, img, instructions} = props;

    ingredients.map(( ingredient, index) => (
        <li key={index}>
          { ingredient}
        </li>
    ));

    return (
        <div className="recipe-card">
            Your render code here
        </div>
    )
}