Component JS to TS

Card.jsx

// This is an exisiting React Component written as a Function Component using JavaScript.

import React from "react";
import { string, any } from "prop-types";

const Card = ({
  headline,
  createdAt,
  children,
}) => {
  const classes = useStyles();
  
  return (
    <div className={classes.root}>
      <h2 classname={classes.header}>{headline}</h2>
      <p>Created at: {createdAt}</p>
      
      {children}
    </div>
  );
};

Card.propTypes = {
  headline: string.isRequired,
  createdAt: string.isRequired,
  children: any,
};

export default Card;

Card.tsx

// Here is the component migrated to TypeScript using the FunctionComponent
// generic to use an interface for the props of the component which helps
// to unserstand the API of the component better and with autocomplete features.

import React, { FunctionComponent } from "react";

interface Props {
  headline: string;
  createdAt: string;
  children: any;
};

const Card: FunctionComponent<Props> = ({
  headline,
  createdAt,
  children,
}) => {
  const classes = useStyles();
  
  return (
    <div className={classes.root}>
      <h2 classname={classes.header}>{headline}</h2>
      <p>Created at: {createdAt}</p>
      
      {children}
    </div>
  );
};

export default Card;