How to fix Generic type 'X<T>' requires 1 type argument(s) in TypeScript

// WRONG - missing type argument
const numbers: Array = [1, 2, 3];  // Error: Generic type 'Array<T>' requires 1 type argument(s)

// CORRECT - add type argument
const numbers: Array<number> = [1, 2, 3];

// Other common built-in generics:
const promise: Promise<string> = Promise.resolve("hello");
const map: Map<string, number> = new Map();
const set: Set<boolean> = new Set();
const record: Record<string, number> = { count: 42 };

// For React components with props:
const Component: React.FC<Props> = ({ title }) => <div>{title}</div>;

// Generic interface definition
interface Response<T> {
  data: T;
  status: number;
}

// WRONG - missing type argument
const response: Response = { data: "hello", status: 200 };  // Error

// CORRECT - specify type argument
const response: Response<string> = { data: "hello", status: 200 };

// Generic class example
class Container<T> {
  constructor(public value: T) {}
}

// WRONG
const container: Container = new Container("test");  // Error

// CORRECT
const container: Container<string> = new Container("test");

// Multiple type parameters
interface Pair<K, V> {
  key: K;
  value: V;
}

// WRONG - needs 2 type arguments
const pair: Pair = { key: "id", value: 123 };  // Error

// CORRECT
const pair: Pair<string, number> = { key: "id", value: 123 };

// Let TypeScript infer the type
const numbers = [1, 2, 3];  // Inferred as number[]
const promise = Promise.resolve("hello");  // Inferred as Promise<string>

// For functions, inference works on parameters and return types
function identity<T>(value: T): T {
  return value;
}

// TypeScript infers T as string
const result = identity("test");  // result is string

// With arrays, provide initial values for inference
// WRONG - empty array, can't infer type
const items = [];  // Inferred as any[], but better to specify

// CORRECT options:
const items: string[] = [];  // Explicit type
const items = [] as string[];  // Type assertion
const items: Array<string> = [];  // Generic syntax

// For React useState with generics:
const [count, setCount] = useState<number>(0);  // Explicit
const [count, setCount] = useState(0);  // Inferred as number

// Example with axios
import axios from 'axios';

// WRONG - missing type argument for AxiosResponse
const response: AxiosResponse = await axios.get('/api/data');

// CORRECT - specify the data type
const response: AxiosResponse<User> = await axios.get('/api/data');

// Example with Redux Toolkit
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface CounterState {
  value: number;
}

// WRONG - missing type argument for createSlice
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
  },
});

// CORRECT - specify state type
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 } as CounterState,
  reducers: {
    increment: (state) => { state.value += 1; },
  },
});

// For PayloadAction generic:
reducers: {
  incrementBy: (state, action: PayloadAction<number>) => {
    state.value += action.payload;
  },
}

// Generic with constraint
interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

// Must satisfy the constraint
loggingIdentity({ length: 10, value: 3 });  // OK
loggingIdentity(3);  // Error: number doesn't have .length

// Generic with default type parameter
interface Container<T = string> {
  value: T;
}

// Can use default
const container1: Container = { value: "hello" };  // T defaults to string

// Or override it
const container2: Container<number> = { value: 42 };

// React example with default props
interface Props {
  title: string;
  count?: number;
}

const Component: React.FC<Props> = ({ title, count = 0 }) => (
  <div>{title}: {count}</div>
);

// Using Partial<T> utility type
const update: Partial<Props> = { title: "New Title" };

// 1. Use type parameters in function declarations
function firstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

// 2. Generic type aliases
type Nullable<T> = T | null;
const value: Nullable<string> = "hello";

// 3. Mapped types
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

// 4. Conditional types
type IsString<T> = T extends string ? true : false;

// 5. Fixing React component generics
interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return <div>{items.map(renderItem)}</div>;
}

// Usage - TypeScript infers T from items
<List items={[1, 2, 3]} renderItem={(num) => <span>{num}</span>} />

// 6. Using keyof and indexed access
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const person = { name: "Alice", age: 30 };
const name = getProperty(person, "name");  // string
const age = getProperty(person, "age");    // number