TypeScript 参数解构和类型注解的用法

提供几个不同的例子，展示这种 TypeScript 参数解构和类型注解的用法。

这种写法在 TypeScript 中非常灵活，适用于任何需要从对象参数中解构出属性并指定类型的场景。以下是几个例子：

示例 1：处理用户信息的函数

场景：一个函数接收用户信息对象，解构出 name 和 age，并返回格式化的字符串。

function formatUserInfo({ name, age }: { name: string; age: number }) {
  return `${name} is ${age} years old`;
}

// 使用
console.log(formatUserInfo({ name: "Alice", age: 25 })); // 输出: "Alice is 25 years old"

• { name, age }：解构出 name 和 age。
• { name: string; age: number }：指定类型，确保 name 是字符串，age 是数字。

---

示例 2：React 按钮组件

场景：一个 React 按钮组件，接收 label 和 onClick 属性。

import React from 'react';

function CustomButton({ label, onClick }: { label: string; onClick: () => void }) {
  return <button onClick={onClick}>{label}</button>;
}

// 使用
function App() {
  return (
    <CustomButton
      label="Click Me"
      onClick={() => console.log("Button clicked!")}
    />
  );
}

• { label, onClick }：解构出 label 和 onClick。
• { label: string; onClick: () => void }：label 是字符串，onClick 是一个无返回值函数。

---

示例 3：处理配置对象的工具函数

场景：一个工具函数接收配置对象，解构出 timeout 和 retry 属性，用于模拟网络请求。

function fetchWithConfig({ timeout, retry }: { timeout: number; retry: boolean }) {
  console.log(`Fetching with timeout: ${timeout}ms, retry: ${retry}`);
  // 模拟请求逻辑
  return new Promise((resolve) => setTimeout(() => resolve("Done"), timeout));
}

// 使用
fetchWithConfig({ timeout: 2000, retry: true }).then((result) =>
  console.log(result)
);

• { timeout, retry }：解构出 timeout 和 retry。
• { timeout: number; retry: boolean }：指定 timeout 为数字，retry 为布尔值。

---

示例 4：React Context 消费者组件

场景：一个组件从 Context 中接收值，解构出 theme 和 toggleTheme。

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext<{
  theme: string;
  toggleTheme: () => void;
}>({ theme: 'light', toggleTheme: () => {} });

function ThemeDisplay({ theme, toggleTheme }: { theme: string; toggleTheme: () => void }) {
  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

function App() {
  const contextValue = useContext(ThemeContext);
  return <ThemeDisplay {...contextValue} />;
}

• { theme, toggleTheme }：解构出 theme 和 toggleTheme。
• { theme: string; toggleTheme: () => void }：定义类型，theme 是字符串，toggleTheme 是函数。

---

示例 5：处理可选参数的函数

场景：一个函数接收一个对象，解构出必填的 id 和可选的 description。

function logItem({ id, description }: { id: number; description?: string }) {
  const desc = description || "No description provided";
  console.log(`Item ID: ${id}, Description: ${desc}`);
}

// 使用
logItem({ id: 1 }); // 输出: "Item ID: 1, Description: No description provided"
logItem({ id: 2, description: "A cool item" }); // 输出: "Item ID: 2, Description: A cool item"

• { id, description }：解构出 id 和 description。
• { id: number; description?: string }：id 是必填的数字，description 是可选的字符串（? 表示可选）。

为什么用这种写法？

• 解构赋值：直接从对象中提取需要的属性，避免写 props.id 或 config.timeout。
• 类型注解：通过 TypeScript 提供类型安全，防止传入错误类型的值。
• 简洁优雅：将参数定义和类型声明结合在一起，代码更紧凑。