TypeScript

Basic Types

Type	Description	Example	Usage
string	Text data	let name: string = 'Alice';	Variable, prop, function return, etc.
number	Numeric data	let age: number = 30;	Numbers, calculations
boolean	true/false	let isActive: boolean = true;	Flags, toggles
null	Null value	let value: null = null;	Explicit nulls
undefined	Not assigned/undefined	let x: undefined;	Uninitialized variables
any	Any type (disables type checking)	let data: any = 5;	Use sparingly, for dynamic data
unknown	Safer any	let input: unknown;	Requires type checking before use
array	List of elements	let nums: number[] = [1, 2, 3];	Arrays of specific type
tuple	Fixed-length array with specific types	let point: [number, number] = [0, 0];	Coordinates or fixed data combos
enum	Enum for name-value pairs	enum Color {Red, Green, Blue};	Color options, states
object	General object	let user: { name: string; age: number }	Object shapes

React-Specific Types

Type	Description	Example	Usage
React.FC	Functional component with props	const Button: React.FC = ...;	Typing React components
React.ReactNode	Anything renderable in JSX	children?: React.ReactNode;	props.children
React.Dispatch<React.SetStateAction>	State updater function	const [count, setCount] = React.useState(0);	State management with hooks

Utility Types

Type	Description	Example	Usage
Partial	All properties optional of type T	const update: Partial = {name: 'New'};	Partial updates
Pick<T, K>	Pick specific properties from T	Pick<User, 'name' 'email'>	Pick email
Omit<T, K>	Omit specific properties from T	Omit<User, 'password'>	Exclude properties
Readonly	Make all properties of T readonly	const user: Readonly = {...};	Immutable data structures

React Event Types

Event Type	Description	Example Usage
React.ChangeEvent	Change event for input, select, textarea, etc.	Handling input value changes
React.ChangeEvent	Change event for select dropdowns	Handling select options
React.ChangeEvent	Change event for textarea	Handling textarea input
React.FormEvent	Form submission event	Handling form submit
React.MouseEvent	Mouse click or similar mouse events	Handling button clicks
React.MouseEvent	Mouse events on div, span, etc.	Handling clicks or hover events
React.KeyboardEvent	Keyboard events like keydown, keyup, keypress	Handling keyboard shortcuts
React.FocusEvent	Focus, blur events on focusable elements	Managing focus state
React.WheelEvent	Mouse wheel events	Handling scroll or zoom interactions
React.SyntheticEvent	General synthetic event (most common base class)	Generic event handler when event type is unknown or varies

Example of a Form with Types

 const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value,
    }));
  };