Using generic props

In this section, we’ll take some time to understand how to create our own generic types and also learn about the keyof TypeScript feature, which is useful for generic types. We will use this knowledge to build the first iteration of the checklist component with a generic type for its props.

Understanding generics

We have used generics throughout this book. For example, the useState hook has an optional generic parameter for the type of state variable:

const [visible, setVisible] = useState<boolean>()

Generic parameters in a function allow that function to be reusable with different types and be strongly typed. The following function returns the first element in an array, or null if the array is empty. However, the function only works with a string array:

function first(array: Array<string>): string | null {
  return array.length === 0 ? null : array[0];
}

Generics allows us to make this function usable with any type...