Using generics

GenericTSInput.tsx

import * as React from "react";
import { render } from "react-dom";

// Defining types
type InputValue = string | number;
type Label = string;

// Defining an interface
interface InputProps {
  value: InputValue;
  label: Label;
}

// Using generics
interface GenericInput<T> {
  value: T;
  label: Label;
}

function GenericTSInput<T extends InputValue>(props: GenericInput<T>) {
  const { value, label } = props;
  return (
    <div className="container">
      <div className="label">{label}</div>
      <div className="typeof">
        Type: <b>{typeof value}</b>
      </div>
      <input value={value} />
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <GenericTSInput<number> value={1} label="TS generic type (number)" />
      <GenericTSInput<string> value="Value" label="TS generic type (string)" />
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);