Typescript Generics Development Tutorials, Guides & Insights

Let's see how these advanced techniques can be applied to a real-world scenario. We'll create a reusable React component that can handle different types of form fields.

import React from "react";

type FormFieldProps<T> = {
  value: T;
  onChange: (value: T) => void;
};

function FormField<T>({ value, onChange }: FormFieldProps<T>) {
  return (
    <input
      type="text"
      value={String(value)}
      onChange={(e) => onChange(e.target.value as unknown as T)}
    />
  );
}

// Usage
const App = () => {
  const [name, setName] = React.useState<string>("");
  const [age, setAge] = React.useState<number>(0);

  return (
    <div>
      <FormField value={name} onChange={setName} />
      <FormField value={age} onChange={setAge} />
    </div>
  );
};

export default App;

type IsString<T> = T extends string ? 'Yes' : 'No';

type A = IsString<string>; // 'Yes'
type B = IsString<number>; // 'No'

This type checks whether a given type is a string and returns 'Yes' or 'No' accordingly.

function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey} with`, args);
    return originalMethod.apply(this, args);
  };
}

class Calculator {
  @Log
  add(a: number, b: number): number {
    return a + b;
  }
}

const calculator = new Calculator();
calculator.add(5, 3); // Logs: Calling add with [5, 3]

TypeScript is commonly used with React to ensure type safety in components: