《TypeScript编程实战》11.1 组件 props 与泛型组件

type Props = { items: any[]; onSelect: (item: any) => void };

export function List({ items, onSelect }: Props) {
  return (
    <ul>
      {items.map((it) => (
        <li key={it.id} onClick={() => onSelect(it)}>
          {it.name}
        </li>
      ))}
    </ul>
  );
}

export type ListItem = { id: string; name: string; disabled?: boolean };

export type ListProps = {
  items: readonly ListItem[];
  onSelect: (item: ListItem) => void;
};

export function List({ items, onSelect }: ListProps) {
  return (
    <ul>
      {items.map((it) => (
        <li key={it.id} onClick={() => !it.disabled && onSelect(it)}>
          {it.name}
        </li>
      ))}
    </ul>
  );
}

type CardProps = { title: string; children: React.ReactNode };

export function Card({ title, children }: CardProps) {
  return (
    <section className="card">
      <h3>{title}</h3>
      <div className="card-body">{children}</div>
    </section>
  );
}

type DataProps<T> = {
  items: readonly T[];
  children: (item: T, index: number) => React.ReactNode;
};

// tsconfig: "exactOptionalPropertyTypes": true
type BadgeProps = { size?: 'sm' | 'lg' };
declare const size: 'sm' | 'lg' | undefined;

// TS2379: Argument of type '{ size: "sm" | "lg" | undefined; }' is not
// assignable to parameter of type 'BadgeProps' with 'exactOptionalPropertyTypes: true'.
const el = <Badge size={size} />;

type BadgeProps = { size?: 'sm' | 'lg'; tone?: 'solid' | 'outline' };

export function Badge({ size = 'sm', tone = 'solid' }: BadgeProps) {
  return <span className={`badge badge-${size} badge-${tone}`}>…</span>;
}

import type { ChangeEvent, FormEvent, MouseEvent } from 'react';

type SearchProps = {
  onQueryChange: (query: string) => void;
  onSubmit: (e: FormEvent<HTMLFormElement>) => void;
  onItemClick: (e: MouseEvent<HTMLLIElement>, id: string) => void;
};

export function Search({ onQueryChange, onSubmit, onItemClick }: SearchProps) {
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    onQueryChange(e.target.value); // e.target.value: string
  };
  return (
    <form onSubmit={onSubmit}>
      <input onChange={handleChange} />
      <ul>
        <li onClick={(e) => onItemClick(e, '1')}>第一项</li>
      </ul>
    </form>
  );
}

// 好：调用方不需要知道内部是不是 li
type ItemProps = { item: ListItem; onSelect: (item: ListItem) => void };

import type { ReactNode } from 'react';

export type SelectProps<T> = {
  options: readonly T[];
  value: T | null;
  onChange: (value: T) => void;
  getKey: (option: T) => string;
  renderOption: (option: T) => ReactNode;
  placeholder?: string;
};

export function Select<T>({
  options,
  value,
  onChange,
  getKey,
  renderOption,
  placeholder = '请选择',
}: SelectProps<T>) {
  return (
    <div className="select">
      {value === null && <span className="placeholder">{placeholder}</span>}
      <ul>
        {options.map((option) => (
          <li key={getKey(option)} onClick={() => onChange(option)}>
            {renderOption(option)}
          </li>
        ))}
      </ul>
    </div>
  );
}

type City = { code: string; label: string };
const cities: City[] = [{ code: 'SHA', label: '上海' }];

// T 被推导为 City，v.code 有提示，v.foo 报 TS2339
<Select
  options={cities}
  value={null}
  onChange={(v) => console.log(v.code)}
  getKey={(c) => c.code}
  renderOption={(c) => c.label}
/>;

<Select<City> options={cities} value={null} onChange={() => {}} getKey={(c) => c.code} renderOption={(c) => c.label} />;

// TS17008: JSX element 'T' has no corresponding closing tag.
const Select = <T>(props: SelectProps<T>) => <div />;

// 修复一：加一个逗号，告诉解析器这不是 JSX 标签
const Select = <T,>(props: SelectProps<T>) => <div />;

// 修复二：用 extends 消歧义
const Select = <T extends unknown>(props: SelectProps<T>) => <div />;

export const Select = memo(function Select<T>(props: SelectProps<T>) {
  /* … */
});
// 调用处：TS2558: Expected 0 type arguments, but got 1.
<Select<City> options={cities} value={null} onChange={() => {}} getKey={(c) => c.code} renderOption={(c) => c.label} />;

import { forwardRef, type ForwardedRef, type ReactNode } from 'react';

function SelectInner<T>(props: SelectProps<T>, ref: ForwardedRef<HTMLDivElement>) {
  return <div ref={ref} className="select" />;
}

// 断言只允许出现在这里，调用方拿到的是泛型签名
export const Select = forwardRef(SelectInner) as <T>(
  props: SelectProps<T> & { ref?: ForwardedRef<HTMLDivElement> },
) => ReactNode;

import type { ComponentPropsWithoutRef } from 'react';

type ButtonProps = ComponentPropsWithoutRef<'button'> & {
  variant?: 'primary' | 'ghost';
  loading?: boolean;
};

export function Button({ variant = 'primary', loading, children, ...rest }: ButtonProps) {
  return (
    <button {...rest} data-variant={variant} disabled={rest.disabled || loading}>
      {children}
    </button>
  );
}

// 把原生 onChange 换成领域语义的 onChange
type InputProps = Omit<ComponentPropsWithoutRef<'input'>, 'onChange'> & {
  onChange: (value: string) => void;
};

type BoxProps<C extends React.ElementType> = {
  as?: C;
  children?: ReactNode;
} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'children'>;

export function Box<C extends React.ElementType = 'div'>({ as, children, ...rest }: BoxProps<C>) {
  const Tag = (as ?? 'div') as React.ElementType;
  return <Tag {...rest}>{children}</Tag>;
}