使用默认值键入对象参数

Posted 2023-02-22

【中文标题】使用默认值键入对象参数

【英文标题】：Typing object param with default value

【发布时间】：2021-09-23 05:35:57

【问题描述】：

背景

我正在使用 React 和 TypeScript 并尝试向组件添加可选参数。然后我遇到了打字稿错误（ts:2339）。

似乎，当没有传递任何 props 时，React 将传递 props= 而不是 props=null 或 props=undefined。所以功能组件将收到（一个空对象），我无法更改它。

问题

我应该如何让 TypeScript 读取具有预定义值的真正可选参数？

const f = (param:  |  k: string  =  k: 'v' ) => 
    var o
    // test 1 TS error: Property 'k' does not exist on type ' |  k: string; '.  Property 'k' does not exist on type ''.(2339)
    // o = (param)?.k 

    // test 2, nullity test. Same error as test1
    // if (Object.entries(param).length === 0) param =  k: 'v' ;
    // o = (param)?.k

    // test 3, trying to avoid optional param assignment. Same error as test1
    // const _param = param ??  k: 'v' 
    // o = _param.k

    // current work-around
    o = (param as any)?.k
    console.log(o)

f()

运行代码（使用 typescriptlang.org）：https://bre.is/xtdJbPxh

在此示例中，param 变量永远不会为空，并且始终具有属性 k。但是我不能使用param?.k 或任何我能想到的东西。我知道 any 类型的工作方式类似于禁用 TypeScript 功能。那么，有没有办法让 TypeScript 读取参数的真实值呢？谢谢。

我做了什么

我在 Stack Overflow 上阅读了几乎所有类似的问题，但我没有找到好的答案。以下是一些参考资料。

测试2：How do I test for an empty javascript object? 测试3：Set default value of property of object passed on parameter to function 由于 React，我不能使用 null 代替 。 我认为这可能会有所帮助，但我在非路由组件上找不到 API：React route params with default value。 这个是类组件，但不能解决我的问题：Default property value in React component using TypeScript

【问题讨论】：

这个组件在你的模板中是如何使用的？我不确定你的意思是什么：“似乎反应会通过 props= 而不是 props=null 或 props=undefined。所以我需要的功能组件将接收 （一个空对象）”

我没有说清楚。我的意思是在“没有通过任何道具时”的情况。我根据您的建议编辑了问题。谢谢。

【参考方案1】：

您可以直接在函数签名中使用默认值destructure the parameter 以始终获取该值：

const f = ( k = 'v' :  k?: string ) => 
  ...

然后执行var o = k。

您也可以测试k 是否是param 的键。这可以通过以下方式完成：

if ('k' in param) 
  o = param.k

但是比较麻烦。

【讨论】：

谢谢你，@daylily。第一种代码风格并没有解决我描述的问题，即正确传递参数类型。此外，我们需要手动检查每个属性。第二个代码正是我想要的。我建议将其作为主要解决方案。

【参考方案2】：

import  FC  from 'react'

type Props = 
    k: string


const foo: FC<Props> = (props =  k: 'v' ) => 

    const  k  = props // string

    return null as any

由于您已经为 props 提供了默认值，因此您可以省略对 k 的任何检查