Typescript type binding issue

Question

I have a component in Typescript which uses react-jss and classes object for styles. I'm receiving the following error: Binding element 'classes' implicitly has an 'any' type., and can't figure out how to fix it.

App.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>
  );
}

CaseStudyCard.tsx

import WithStyles, {createUseStyles } from 'react-jss';

const useStyles = createUseStyles({
    card: {
        width: 280,
        display: 'block',
        margin: '60px auto',
        boxShadow: '0px 0px 2px 0px #000',
        transition: '.25s',
        '&:hover': {
          boxShadow: '0px 0px 4px 0px #000',
          transform: 'translateY(5px)'
        }
      },
      cardHeader: {
        height: 150,
        padding: 15,
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        color: '#fff',
        '& h4':{
            textTransform: 'uppercase',
            margin: 0,
        }
      },
      cardBody: {
        backgroundColor: '#fff'
      },
      date: {
        fontSize: 11,
        fontWeight: 600,
        color: 'grey',
      },
      bodyContent: {
        paddingBottom: 40,
        fontSize: 13,
        lineHeight: 1.8,
      },
      buttonPrimary: {
        border: '1px solid #000',
        padding: 10,
        fontFamily: 'inherit',
        backgroundColor: '#fff',
        color: '#000',
        fontSize: 15,
        transition: '.25s',
        margin: '0 0 20px',
        borderRadius: 3,
        cursor: 'pointer',
        bottom: 20,
        position: 'relative',
        textDecoration: 'none'
      },
      designerLink: {
        color: '#fff',
        textAlign: 'center',
        fonSize: 12,
        textDecoration: 'none',
        display: 'block',
      }
    });

    type ClassesType = {
      buttonPrimary?: string,
      bodyContent: string,
      cardHeader: string,
      cardBody: string,
      date: string
    }


    interface CardHeaderType extends WithStyles(classes) {
      classes?: ClassesType,
      image: string;
     }
    const CardHeader = ({classes, image}: CardHeaderType) => {
          const style = { 
              backgroundImage: `url(${image})`,
          };
          return (
            <header style={style} className={classes.cardHeader}>
              <h4>News</h4>
            </header>
          )
      }

      interface ButtonType {
        classes?: ClassesType,
        link: string
      }
      const Button = ({classes, link}: ButtonType) => (
            <a href={link} className={classes.buttonPrimary}>
              Find out more
            </a>   
      )
      
      interface CardBodyType {
        classes?: ClassesType,
        date: Date,
        title: string,
        text: string,
        link: string
      }
      const CardBody = ({classes, date, title, text, link}: CardBodyType) => {
          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
      }
      
     interface CaseStudyCardProps {
       image: string,
       classes?: ClassesType,
       title: string,
       date: string,
       location: string,
       industry: string,
       link: string,
       text: string
     } 
      export default function CaseStudyCard (props: CaseStudyCardProps) {
        console.log(props)
        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>
          )
      }

WilsonPena · Accepted Answer · 2021-03-24 16:46:06Z

1

Its most likely because you haven't defined types on this line:

const CardHeader = ({classes, image})

You probably have typescript configured to not allow implicit any typing.

You can fix it by defining types for this parameter something like this:

interface IParameterType {
 classes: ClassesType;
 image: ImageType;
}
...
const CardHeader = ({classes, image}: IParameterType)

And probably other lines also, but you can use this as an example to fix it.

There are others with implicit any typing as well, this for example:

  const Button = ({classes, link}) => (

same case as the first one.

UPDATE

You would also have to create the types ImageType and ClassesType I placed it just as an example.

UPDATE 2

To create the types like this, for example for the classes parameter:

type ClassesType = {
 cardHeader: string;
 date: Date;
 buttonPrimary?: string;
}

You use the ? in front of the property name to make it so that it can be undefined.

You can also make properties nullable like this:

type ClassesType = {
 cardHeader: string | null;
 date: Date;
 buttonPrimary?: string;
}

The cardHeader: string | null means that the property cardHeader can be a string or null.

The buttonPrimary?: string; means that the property buttonPrimary can be a string or null or undefined.

You can read more about it here:

https://www.typescriptlang.org/docs/handbook/interfaces.html

and learn more about types and interfaces on typescript with this playground:

https://www.typescriptlang.org/play#example/types-vs-interfaces

edited Mar 24, 2021 at 16:46

answered Mar 24, 2021 at 15:59

WilsonPena

1,5912 gold badges23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

30 Comments

Matt Over a year ago

I tried implementing your updates, but I get the error Cannot find name 'ClassesType'

WilsonPena Over a year ago

this type you have to create also

WilsonPena Over a year ago

I updated the answer: you would also need to create (or use existing) types for the objects. The types of classes and image probably already exist inside the library. If they don't you also have to define them

Matt Over a year ago

How do you create types for the objects? Sorry, I'm new to TypeScript.

WilsonPena Over a year ago

I edited the post with an update with an example and sources to playground and docs

|

Collectives™ on Stack Overflow

Typescript type binding issue

1 Answer 1

30 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

30 Comments

Your Answer

Sign up or log in

Post as a guest

Related