Generic vs any.
Why preserves what any throws away.

// ─── Version 1: with any ────────────────────
function identityAny(x: any): any {
return x;
}

const a = identityAny('hello'); // a: any — type lost
const b = identityAny(42); // b: any
const c = identityAny({ name: 'x' }); // c: any

// No autocomplete, no type checking:
a.toUpperCase(); // ✅ compiles ❌ would crash if a were a number
b.toUpperCase(); // ✅ compiles ❌ crashes at runtime

// ─── Version 2: with  ─────────────────────
function identity(x: T): T {
return x;
}

const s = identity('hello'); // s: string
const n = identity(42); // n: number
const u = identity({ name: 'x' }); // u: { name: string }

// Autocomplete and checking work:
s.toUpperCase(); // ✅ string method available
// n.toUpperCase(); // ❌ Property 'toUpperCase' does not exist on 'number'
// u.toUpperCase(); // ❌ Property 'toUpperCase' does not exist on '{ name: string }'

// ─── Explicit type argument ──────────────────
const explicit = identity<string>('x'); // same as inferred

// ─── Why this matters ────────────────────────
//
// With any:
// identity('hello') → any → every downstream
// operation is unchecked. Bugs compile.
//
// With :
// identity('hello') → string → methods are
// type-checked. Wrong methods are compile errors.
//
// One line of code. Full type preservation.

console.log(a, b, c, s, n, u, explicit);

// ─── first: any vs  ──────────────────────
function firstAny(arr: any[]): any {
return arr[0];
}

function first(arr: T[]): T | undefined {
return arr[0];
}

interface User { id: string; name: string }
const users: User[] = [{ id: '1', name: 'Alice' }];

const uAny = firstAny(users); // any
const u = first(users); // User | undefined

// uAny.name — any, no checking
// u?.name — ✅ User | undefined, narrowed access

// ─── map: preserve input → output relation ───
function mapAny(arr: any[], fn: (x: any) => any): any[] {
return arr.map(fn);
}

function mapArr(arr: T[], fn: (x: T) => U): U[] {
return arr.map(fn);
}

const lengthsAny = mapAny(users, u => u.name.length); // any[]
const lengths = mapArr(users, u => u.name.length); // number[]

// ─── pluck: keyof preservation ───────────────
function pluckAny(arr: any[], key: string): any[] {
return arr.map(x => x[key]);
}

function pluckextends keyof T>(arr: T[], key: K): T[K][] {
return arr.map(x => x[key]);
}

const namesAny = pluckAny(users, 'name'); // any[]
const names = pluck(users, 'name'); // string[]
const ids = pluck(users, 'id'); // string[]
// pluck(users, 'foo'); // ❌ 'foo' not a key

// ─── Generic composition ─────────────────────
// Generics chain — first + pluck compose:
const firstNameChar = first(pluck(users, 'name')); // string | undefined

// With any, you'd have to cast at every step.
// With generics, types flow automatically.

console.log(uAny, u, lengthsAny, lengths, namesAny, names, ids, firstNameChar);

// ─── With any — loses item type ──────────────
function BadList({ items, render }: {
items: any[];
render: (item: any) => any;
}) {
return 
{items.map((item, i) => 
{render(item)}
)}
;
}
// Caller: no autocomplete on item
//  u.name} />
// ↑ any — u.nmae also compiles

// ─── With  — preserves item type ──────────
interface ListProps {
items: T[];
render: (item: T, index: number) => React.ReactNode;
keyExtractor?: (item: T) => string | number;
}

function List({ items, render, keyExtractor }: ListProps) {
return (

{items.map((item, i) => (
keyExtractor(item) : i}>
{render(item, i)}

))}

);
}

// ─── Usage with full type safety ─────────────
interface User { id: string; name: string; email: string }
interface Product { sku: string; title: string; price: number }

function App() {
const users: User[] = [{ id: '1', name: 'Alice', email: 'a@x.com' }];
const products: Product[] = [{ sku: 'X', title: 'Book', price: 10 }];

return (

{/* T = User — item is User */}
 u.id}
render={(u) => {u.name} ({u.email})}
/>

{/* T = Product — item is Product */}
 p.sku}
render={(p) => {p.title} — $`{p.price}}
/>

{/* ❌ Typos caught at compile time: /}
{/ render={(u) => u.nmae} — 'nmae' does not exist on User /}
{/ render={(u) => u.price} — 'price' does not exist on User */}

);
}

// ─── The pattern behind libraries ────────────
//
// TanStack Table: useReactTable()
// React Hook Form: useForm()
// react-select:  />
// Ant Design:  columns={...} />
//
// Every typed data component uses .
// Any component that would use any[] for its
// items can be improved with a generic.

export default App;