提供几个不同的例子,展示这种 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 提供类型安全,防止传入错误类型的值。
- 简洁优雅:将参数定义和类型声明结合在一起,代码更紧凑。