liskov-abuse.tsx

interface User {
  name: string;
  age: number;
}

interface AuthorizedUser extends User {
  token: string;
}

type UserDisplayProps = { user: User };

function UserDisplay(props: UserDisplayProps) {
  return (
    <span>
      {props.user.name} ({props.user.age} anos)
    </span>
  );
}

export default function App() {
  const me: AuthorizedUser = {
    name: "Marcell",
    age: 23,
    token: "abc42abc9-3/4"
  };

  const friend1: User = {
    name: "Lisa",
    age: 23
  };

  const friend2: User = {
    name: "Bob",
    age: 68
  };

  return (
    <div className="App">
      <p>
        Contatos de <UserDisplay user={me} />:
      </p>
      <ul>
        <li>
          <UserDisplay user={friend1} />
        </li>
        <li>
          <UserDisplay user={friend2} />
        </li>
      </ul>
    </div>
  );
}