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

半兽人 发表于: 2025-04-02   最后更新时间: 2025-04-02 10:54:23  
{{totalSubscript}} 订阅, 43 游览

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

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


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

场景:一个函数接收用户信息对象,解构出 nameage,并返回格式化的字符串。

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 }:解构出 nameage
  • { name: string; age: number }:指定类型,确保 name 是字符串,age 是数字。

示例 2:React 按钮组件

场景:一个 React 按钮组件,接收 labelonClick 属性。

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 }:解构出 labelonClick
  • { label: string; onClick: () => void }label 是字符串,onClick 是一个无返回值函数。

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

场景:一个工具函数接收配置对象,解构出 timeoutretry 属性,用于模拟网络请求。

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 }:解构出 timeoutretry
  • { timeout: number; retry: boolean }:指定 timeout 为数字,retry 为布尔值。

示例 4:React Context 消费者组件

场景:一个组件从 Context 中接收值,解构出 themetoggleTheme

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 }:解构出 themetoggleTheme
  • { 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 }:解构出 iddescription
  • { id: number; description?: string }id 是必填的数字,description 是可选的字符串(? 表示可选)。

为什么用这种写法?

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

查看TypeScript更多相关的文章或提一个关于TypeScript的问题,也可以与我们一起分享文章