可能具有空对象类型的变量的键入属性

背景

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

似乎,当没有传递任何 props 时,React 将传递 props={} 而不是 props=nullprops=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()

请参阅 TS 操场中的代码: https://www.typescriptlang.org/play?ssl=18&ssc=4&pln=1&pc=1#code/MYewdgzgLgBAZjAvDAFABwIYCcMFsBcMA3gL4wA+xMA1odFgJZgDmMZyRNhA5AG7dsAlEgB8xAFAwpMXthghJ0gPRKYUAKbQYARhgAVAMox1WLCCyEACmbQmoATxjdqAgCYhNMMCFjqAHgxa4Gr2tk6kFFS0MPRMzADcbNwAdFLWILZYDk4uMO6e3r4BQWAhYdykKSgATADMtQCcgopSKvJIqJg4uIIA-MnUMOItMG0aWtUANF4ArgA2cwzZ41CpBnjqxqbmMBgQappQ2iNtDAgoAPIARgBW6sCr6mBQjJro2HiCyXNPzFAAFkhEMgAAzCLp4DqcaJ8AQkeInVQgDrvbp9AbDaSjVQrGC1aYvexxNTIjC8EAMVzyNBQBjgDBzGAQ3C7CAQBjMMC4J6rGDrblbMxYVkHaDHLFtUCQWAAfWZHXlvV6UR4-DYiPayDlH1wGI1wBmph5MAA7uZqABabAgGZgVwjZHIVGQva7MD2dHUEZSiAgH7fEDMFAgZokcRwFCCIA

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

我做了什么

我已经阅读了 Stack Overflow 上几乎所有类似的问题,但我没有看到好的答案。这里有一些参考。

stack overflow Typing property of a variable which possibly has empty-object type
原文答案
author avatar

接受的答案

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

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

然后执行 var o = k

或者,您可以测试 k 是否是 param 的键。这可以通过以下方式完成:

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

但它更麻烦。


答案:

作者头像
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 的任何检查

相关问题