typescirpt-declaration-propTypes-functional-component.js

import React from "react";

// define a Navigation Link type for our links
export type NavLinkPropType = {
  label: string;
  route: string;
};

const AppHeaderNavLink: React.FC<NavLinkPropType> = ({ label }) => {
  return <span className="nav-link">{label}</span>;
};

export default AppHeaderNavLink;

/**
 * =====================================an other example
 * **/


import React from "react";

interface Location {
  latitude: string;
  longitude: string;
  height?: number | undefined | string;
}

interface PersonProps {
  name: string;
  birthDate: Date;
  birthLocation: Location;
}

export default function Person({
  name,
  birthDate,
  birthLocation
}: PersonProps) {
  return (
    <div>
      <div>Name: {name}</div>
      <div>Birth Date: {birthDate.toISOString()}</div>
      <div>Loc Latitude: {birthLocation.latitude}</div>
      <div>Loc Longitude: {birthLocation.longitude}</div>
      <div>Loc height: {birthLocation.height}</div>
    </div>
  );
}