React与TypeScript #

npm install -D typescript @types/react @types/react-dom

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

import { ReactNode } from 'react';

// 基本组件
function Button({ children }: { children: ReactNode }) {
  return <button>{children}</button>;
}

// 使用接口定义Props
interface ButtonProps {
  children: ReactNode;
  variant?: 'primary' | 'secondary';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  onClick?: () => void;
}

function Button({
  children,
  variant = 'primary',
  size = 'medium',
  disabled = false,
  onClick
}: ButtonProps) {
  return (
    <button
      className={`btn btn-${variant} btn-${size}`}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

export default Button;

import { FC, ReactNode } from 'react';

interface CardProps {
  title: string;
  children: ReactNode;
}

const Card: FC<CardProps> = ({ title, children }) => {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </div>
  );
};

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => ReactNode;
  keyExtractor: (item: T) => string | number;
}

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

// 使用
<List
  items={users}
  renderItem={(user) => <span>{user.name}</span>}
  keyExtractor={(user) => user.id}
/>

import {
  ReactNode,
  ReactElement,
  JSXElementConstructor,
  FunctionComponent,
  Component,
  ComponentProps,
  RefObject,
  MutableRefObject
} from 'react';

// ReactNode - 可以渲染的内容
type ReactNode = 
  | ReactElement 
  | string 
  | number 
  | ReactFragment 
  | ReactPortal 
  | boolean 
  | null 
  | undefined;

// ReactElement - React元素
interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
  type: T;
  props: P;
  key: Key | null;
}

import {
  ChangeEvent,
  FormEvent,
  MouseEvent,
  KeyboardEvent,
  FocusEvent,
  DragEvent
} from 'react';

function Form() {
  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
  };

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  };

  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
    console.log(e.clientX, e.clientY);
  };

  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      console.log('Enter pressed');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input onChange={handleChange} onKeyDown={handleKeyDown} />
      <button onClick={handleClick}>Submit</button>
    </form>
  );
}

import { useRef, RefObject, MutableRefObject } from 'react';

function Input() {
  // 只读ref
  const inputRef: RefObject<HTMLInputElement> = useRef(null);
  
  // 可变ref
  const timerRef: MutableRefObject<NodeJS.Timeout | null> = useRef(null);

  const focus = () => {
    inputRef.current?.focus();
  };

  return <input ref={inputRef} />;
}

// 基本类型
const [count, setCount] = useState<number>(0);
const [name, setName] = useState<string>('');
const [isActive, setIsActive] = useState<boolean>(false);

// 对象类型
interface User {
  id: number;
  name: string;
  email: string;
}

const [user, setUser] = useState<User | null>(null);

// 数组类型
const [items, setItems] = useState<string[]>([]);
const [users, setUsers] = useState<User[]>([]);

// 惰性初始化
const [state, setState] = useState<User>(() => {
  const saved = localStorage.getItem('user');
  return saved ? JSON.parse(saved) : defaultUser;
});

useEffect(() => {
  // 副作用逻辑
  const timer = setInterval(() => {
    console.log('tick');
  }, 1000);

  return () => {
    clearInterval(timer);
  };
}, []);

// DOM引用
const inputRef = useRef<HTMLInputElement>(null);
const divRef = useRef<HTMLDivElement>(null);

// 任意值引用
const timerRef = useRef<NodeJS.Timeout | null>(null);
const countRef = useRef<number>(0);

const memoizedValue = useMemo<string>(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

const memoizedCallback = useCallback(
  (id: number, name: string) => {
    doSomething(id, name);
  },
  [dependency]
);

interface ThemeContextType {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return context;
}

interface State {
  count: number;
}

type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'set'; payload: number };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'set':
      return { count: action.payload };
    default:
      return state;
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 });

interface UserCardProps {
  user: User | null;
}

function UserCard({ user }: UserCardProps) {
  if (!user) {
    return <div>No user data</div>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

interface UserListProps {
  users: User[];
  onUserClick: (user: User) => void;
}

function UserList({ users, onUserClick }: UserListProps) {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id} onClick={() => onUserClick(user)}>
          {user.name}
        </li>
      ))}
    </ul>
  );
}

interface FormData {
  email: string;
  password: string;
}

function LoginForm() {
  const [formData, setFormData] = useState<FormData>({
    email: '',
    password: ''
  });

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="email"
        type="email"
        value={formData.email}
        onChange={handleChange}
      />
      <input
        name="password"
        type="password"
        value={formData.password}
        onChange={handleChange}
      />
      <button type="submit">Login</button>
    </form>
  );
}

// 基础Props
type BaseProps = {
  className?: string;
  style?: React.CSSProperties;
  children?: ReactNode;
};

// 按钮Props
type ButtonProps = BaseProps & {
  variant?: 'primary' | 'secondary';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
};

// 输入框Props
type InputProps = BaseProps & {
  value: string;
  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
  placeholder?: string;
  type?: 'text' | 'password' | 'email';
};

import { ComponentProps } from 'react';

// 获取HTML元素Props
type ButtonProps = ComponentProps<'button'>;
type InputProps = ComponentProps<'input'>;

// 获取组件Props
type MyButtonProps = ComponentProps<typeof Button>;

type Status = 'idle' | 'loading' | 'success' | 'error';

interface State {
  status: Status;
  data: User | null;
  error: string | null;
}

function UserView({ state }: { state: State }) {
  switch (state.status) {
    case 'idle':
      return <div>Click to load</div>;
    case 'loading':
      return <div>Loading...</div>;
    case 'success':
      return <div>{state.data?.name}</div>;
    case 'error':
      return <div>Error: {state.error}</div>;
  }
}

// types/global.d.ts
declare global {
  interface Window {
    customProperty: string;
  }
}

export {};

// types/user.d.ts
export interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'guest';
}

export interface UserResponse {
  data: User;
  message: string;
}

// types/styled.d.ts
declare module 'styled-components' {
  export interface DefaultTheme {
    colors: {
      primary: string;
      secondary: string;
      background: string;
      text: string;
    };
    fonts: {
      main: string;
      code: string;
    };
  }
}

// 小型组件：类型定义在组件文件内
interface ButtonProps {
  children: ReactNode;
}

export function Button({ children }: ButtonProps) {
  return <button>{children}</button>;
}

// 大型组件/共享类型：类型定义在单独文件
// types/user.ts
export interface User { /* ... */ }

// components/UserCard.tsx
import { User } from '@/types/user';

// ❌ 使用any
const handleData = (data: any) => {
  console.log(data.name);
};

// ✅ 使用具体类型
interface Data {
  name: string;
  age: number;
}

const handleData = (data: Data) => {
  console.log(data.name);
};

// ✅ 使用unknown进行类型守卫
const handleUnknown = (data: unknown) => {
  if (typeof data === 'object' && data !== null && 'name' in data) {
    console.log((data as { name: string }).name);
  }
};

// ✅ 让TypeScript推断
const [count, setCount] = useState(0);

// ✅ 复杂类型显式声明
const [user, setUser] = useState<User | null>(null);