1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// ✅ 泛型箭头函数：注意 <T,> 的逗号（避免与 JSX 语法冲突）
interface ListProps<T> {
  items: readonly T[];
  renderItem: (item: T, index: number) => ReactNode;
  keyOf: (item: T) => string | number;
}

function List<T>({ items, renderItem, keyOf }: ListProps<T>) {
  return (
    <ul>
      {items.map((item, i) => (
        <li key={keyOf(item)}>{renderItem(item, i)}</li>
      ))}
    </ul>
  );
}

// 使用：T 自动推断 ✅
<List
  items={users}
  keyOf={(u) => u.id}
  renderItem={(u) => <span>{u.name}</span>}   // ✅ u 是 User
/>;

1
2
3
4
5
6
7
8
9

// 🛑 .tsx 里这会被当成 JSX 标签
const List = <T>(props: ListProps<T>) => <ul />;
//         ~ error TS17008: JSX element 'T' has no corresponding closing tag.

// ✅ 加一个逗号
const List2 = <T,>(props: ListProps<T>) => <ul />;

// ✅ 或加约束（有 extends 时不需要逗号）
const List3 = <T extends object>(props: ListProps<T>) => <ul />;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import type { ComponentProps, ElementType } from "react";

type PolymorphicProps<E extends ElementType, P = object> = P & {
  as?: E;
} & Omit<ComponentProps<E>, keyof P | "as">;

function Text<E extends ElementType = "span">({
  as,
  ...rest
}: PolymorphicProps<E, { size?: "sm" | "lg" }>) {
  const Tag = as ?? "span";
  return <Tag {...rest} />;
}

// 使用：不同标签有各自的正确属性 ✅
<Text as="a" href="/x">链接</Text>;      // ✅ href 合法
<Text as="button" onClick={() => {}} />; // ✅ onClick 合法
<Text as="a" onClick={() => {}} />;      // ✅ a 也支持 onClick
<Text as="a" disabled />;                // ❌ disabled 不在 a 上

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import type { ReactNode, PropsWithChildren } from "react";

// 显式声明 children（推荐）
function Panel({ title, children }: { title: string; children: ReactNode }) {
  return <section><h2>{title}</h2>{children}</section>;
}

// PropsWithChildren 是语法糖
type PanelProps2 = PropsWithChildren<{ title: string }>;
// 等价于 { title: string; children?: ReactNode }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

interface DataLoaderProps<T> {
  url: string;
  children: (state: { data: T | null; loading: boolean }) => ReactNode;
}

function DataLoader<T>({ url, children }: DataLoaderProps<T>) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  // ... 加载逻辑
  return <>{children({ data, loading })}</>;
}

// 使用：T 从 users 推断 ✅
<DataLoader<{ id: number; name: string }> url="/api">
  {({ data, loading }) => (loading ? <Spinner /> : <div>{data?.name}</div>)}
</DataLoader>;

1
2

// ✅ 函数式 children 要显式声明
type Props = { children: (x: number) => ReactNode };

1
2
3
4
5
6
7
8

function Bad({ onClick }: { onClick: (e: React.MouseEvent<HTMLButtonElement>) => void }) {
  const handler = (e: React.MouseEvent<HTMLButtonElement>) => {
    // 🛑 target 是 EventTarget，没有 disabled
    e.target.disabled;
    //       ~~~~~~~~ error TS2339: Property 'disabled' does not exist on type 'EventTarget'.
  };
  return <button onClick={handler} />;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// ✅ 用 currentTarget
const handler = (e: React.MouseEvent<HTMLButtonElement>) => {
  e.currentTarget.disabled;   // ✅ 类型精确
};

// ✅ 或收窄 target（当确实需要触发元素时）
const handler2 = (e: React.MouseEvent<HTMLButtonElement>) => {
  if (e.target instanceof HTMLButtonElement) {
    e.target.disabled;        // ✅ 收窄后可用
  }
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 委托场景：确实需要 target
function List({ items }: { items: string[] }) {
  const onClick = (e: React.MouseEvent<HTMLUListElement>) => {
    // target 才是被点的那个 li，currentTarget 永远是 ul
    if (e.target instanceof HTMLLIElement) {
      console.log(e.target.dataset.id);   // ✅ 收窄后安全
    }
  };
  return <ul onClick={onClick}>{/* ... */}</ul>;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// ✅ 受控组件：推荐用 currentTarget
<input value={name} onChange={(e) => setName(e.currentTarget.value)} />

// ✅ 非受控：用 FormData
function onSubmit(e: FormEvent<HTMLFormElement>) {
  e.preventDefault();
  const data = new FormData(e.currentTarget);   // ✅ currentTarget 是 form
  const email = data.get("email");              // FormDataEntryValue | null
  if (typeof email === "string") { /* ... */ }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import type { MouseEventHandler, ChangeEventHandler, ReactNode } from "react";

interface ButtonProps {
  onClick?: MouseEventHandler<HTMLButtonElement>;   // ✅ 比手写函数类型简洁
  children: ReactNode;
}

// 等价于
interface ButtonProps2 {
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// 🛑 把 DOM 事件泄漏到组件 API 里
interface BadSelectProps {
  onSelect: (e: React.MouseEvent<HTMLLIElement>) => void;
}

// ✅ 组件内部消化事件，对外暴露语义化回调
interface SelectProps<T> {
  options: readonly T[];
  onSelect: (value: T) => void;
  getLabel: (value: T) => string;
}

function Select<T>({ options, onSelect, getLabel }: SelectProps<T>) {
  return (
    <ul>
      {options.map((o) => (
        <li key={getLabel(o)} onClick={() => onSelect(o)}>{getLabel(o)}</li>
      ))}
    </ul>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// 形态 1：可变容器（存任意值，不参与渲染）
const renderCount = useRef(0);
renderCount.current += 1;              // ✅ 可写

// 形态 2：DOM 引用（初始 null）
const inputRef = useRef<HTMLInputElement>(null);
// inputRef.current 类型：HTMLInputElement | null
<input ref={inputRef} />;
inputRef.current?.focus();             // ✅ 必须判空 🔥

// 形态 3：定时器 id
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
timerRef.current = setTimeout(() => {}, 1000);

1
2
3
4
5

const el = useRef<HTMLDivElement>(null);
useEffect(() => {
  el.current.scrollIntoView();
  //       ~~~~~~~~~ ❌ TS18047: 'el.current' is possibly 'null'.
}, []);

1
2
3
4
5

useEffect(() => {
  el.current?.scrollIntoView();        // ✅ 可选链
  // 或者
  if (el.current) el.current.scrollIntoView();
}, []);

1
2
3
4
5

// ✅ 想「跨渲染保持可变值」→ 初始值给具体值
const cache = useRef(new Map<string, number>());
cache.current.set("a", 1);             // ✅ 不用判空

// ⚠️ 如果写成 useRef<Map<...>>(null)，每次都要判空，很烦

1
2
3
4
5
6
7

// ✅ 返回类型自动推断
const sorted = useMemo(() => [...items].sort(cmp), [items]);
// sorted: Item[]

// ✅ 回调类型自动推断
const handleClick = useCallback((id: string) => { /* ... */ }, []);
// handleClick: (id: string) => void

1
2
3
4
5

// 🛑 手写泛型反而可能引入错误
const sorted = useMemo<Item[]>(() => [...items].sort(cmp), [items]);

// ✅ 让 TS 推断，只在推断失败时才标注
const sorted = useMemo(() => [...items].sort(cmp), [items]);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

useEffect(() => {
  const timer = setInterval(tick, 1000);
  // ✅ 返回清理函数（返回 void 或 () => void 都可以）
  return () => clearInterval(timer);
}, []);

// ⚠️ 不要在 effect 里返回非函数
useEffect(() => {
  return 42;
  // ❌ TS2322: Type 'number' is not assignable to type 'void | Destructor'.
}, []);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import { useState, useEffect } from "react";

function useDebounced<T>(value: T, delayMs: number): T {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delayMs);
    return () => clearTimeout(timer);
  }, [value, delayMs]);

  return debounced;      // ✅ 返回类型 T，泛型正确传递
}

// 使用：类型自动保留
const q = useDebounced(searchText, 300);   // q: string

1
2
3
4
5
6
7
8
9

function useToggle(initial = false) {
  const [on, setOn] = useState(initial);
  const toggle = useCallback(() => setOn((v) => !v), []);
  const set = useCallback((v: boolean) => setOn(v), []);

  return [on, { toggle, set }] as const;   // ✅ as const 保证是元组
}

const [isOpen, { toggle }] = useToggle();  // ✅ 解构类型正确