Typescript 错误：类型中缺少属性“类”

Question

新使用 Typescript 并收到以下错误：

Property 'classes' is missing in type '{ title: string; text: string; industry: string; location: string; image: string; date: string; link: string; }' but required in type 'CaseStudyCardProps'

我正在对组件 styles 使用react-jss ，并且想知道 styles object 与传递类道具本身是否发生冲突。

应用程序.tsx

import CaseStudyCard from './components/CaseStudyCard'
function App() {
  return (
    <div className="App">
      <CaseStudyCard 
        title="Preparing organizations for the future"
        text="This is the body of the card and should wrap continuously" 
        industry="Healthcare" 
        location="Nowheresville" 
        image="https://source.unsplash.com/user/erondu/600x400"  
        date="March 22nd 2021"
        link="https://www.google.com"
      />
    </div>
  );
}

export default App;

CaseStudyCard.tsx

const CardHeader = ({classes, image}) => {
     const style = { 
              backgroundImage: `url(${image})`,
          };
          return (
            <header style={style} className={classes.cardHeader}>
              <h4 className={classes.cardHeader}>News</h4>
            </header>
          )
      }

const Button = ({classes, link}) => (
     <a href={link} className={classes.buttonPrimary}>
              Find out more
     </a>   
)
      
const CardBody = ({classes, date, title, text, link}) => {
      return (
        <div className={classes.cardBody}>
          <p className={classes.date}>{date}</p>
          <h2>{title}</h2>
          <p className={classes.bodyContent}>{text}</p>
          <Button classes={classes} link={link}/>
        </div>
      )
}

interface CaseStudyCardProps {
       image: string,
       classes: object,
       title: string,
       date: string,
       location: string,
       industry: string,
       link: string,
       text: string
     } 
      export default function CaseStudyCard (props: CaseStudyCardProps) {
        const classes = useStyles()
        return (
            <div className={classes.card}>
              <CardHeader classes={props.classes} image={props.image}/>
              <CardBody 
                classes={props.classes} 
                title={props.title} 
                date={props.date}
                location={props.location}
                industry={props.industry}
                link={props.link}
                text={props.text}
              />
            </div>
          )
      }

Answer 1

这是因为您在这里没有 classes 字段：

  <CaseStudyCard 
    title="Preparing organizations for the future"
    text="This is the body of the card and should wrap continuously" 
    industry="Healthcare" 
    location="Nowheresville" 
    image="https://source.unsplash.com/user/erondu/600x400"  
    date="March 22nd 2021"
    link="https://www.google.com"
  />

当您创建 Typescript 接口并放置字段时，如果您不包含该字段，Typescript 将抛出错误。

选项1

使类字段可选：

interface CaseStudyCardProps {
       image: string,
       classes?: object,
       title: string,
       date: string,
       location: string,
       industry: string,
       link: string,
       text: string
     } 

选项 2

从界面中删除 classes 字段。 （注意这一点，好像您的一些CaseStudyCard实例接收到一个类字段，然后 Typescript 将无法识别并抛出错误）

interface CaseStudyCardProps {
       image: string,
       title: string,
       date: string,
       location: string,
       industry: string,
       link: string,
       text: string
     } 

选项 3

为 object 提供类字段。 （如果您这样做，请确保添加准确的条件，以免潜在地获得Can not access x field of undefined ）

 <CaseStudyCard 
    title="Preparing organizations for the future"
    text="This is the body of the card and should wrap continuously" 
    industry="Healthcare" 
    location="Nowheresville" 
    image="https://source.unsplash.com/user/erondu/600x400"  
    date="March 22nd 2021"
    link="https://www.google.com"
    classes={}
  />

编辑：当您的classes对象的存在不是 100% 时，您必须相应地添加条件。 例如，您在CardBody中使用类

const CardBody = ({classes, date, title, text, link}) => {
      return (
        <div className={classes.cardBody}>
          <p className={classes.date}>{date}</p>
          <h2>{title}</h2>
          <p className={classes.bodyContent}>{text}</p>
          <Button classes={classes} link={link}/>
        </div>
      )
}

但是，您没有classes ，或者您的classes是空的。 在这种情况下，您必须添加一个 if 检查以避免出现问题：

const CardBody = ({classes, date, title, text, link}) => {
      return classes && Object.keys(classes).length > 0 ? (
        <div className={classes.cardBody}>
          <p className={classes.date}>{date}</p>
          <h2>{title}</h2>
          <p className={classes.bodyContent}>{text}</p>
          <Button classes={classes} link={link}/>
        </div>
      ) : null
}

或者，更合乎逻辑的是，当您的类 object 为空时，甚至不渲染CardBody ：

  {Object.keys(props.classes).length > 0 && <CardBody 
        classes={props.classes} 
        title={props.title} 
        date={props.date}
        location={props.location}
        industry={props.industry}
        link={props.link}
        text={props.text}
      />}

同样，在CardHeader中，您使用classes来呈现 JSX 元素。 如果您的课程为空，请不要渲染CardHeader 。 或者确保你的classes object 100%。