设置函数对象参数的键的默认值

Question

我需要将一些道具转移到我的组件中。

 type Props = { icon: number, onChangeText: Function, onEndEditing: Function, placeholder: string, secureTextEntry?: boolean }; export default function LRInput( props: Props = { ...props, secureTextEntry: false } // I've tried to do it in this way, but it hasn't worked ) { /*function body*/ } 

您可以看到secureTextEntry是一个可选参数。 所以，我想为这个道具定义一些默认值。 我怎样才能做到这一点？

Answer 1

不幸的是，你必须在解构时做到这一点（或者是偶然的？）

 type Props = { icon: number, onChangeText: Function, onEndEditing: Function, placeholder: string, secureTextEntry?: boolean }; function LRInput( { secureTextEntry = false, ...props }: Props ) { console.log(secureTextEntry) } LRInput({ icon: 5 }) LRInput({ icon: 5, secureTextEntry: true }) 

编辑

为了解决您对其余道具之后的默认值的关注，设置为目标es5的打字稿不是问题，因为其余语法被转换为如下所示，

function LRInput(_a) { 
    var _b = _a.secureTextEntry;
    var secureTextEntry = _b === void 0 ? false : _b; 

    /* code to handle rest omitted */

    console.log(secureTextEntry); 
}

如您所见，通过上述转换，传播的顺序无关紧要，因此我的代码段行为正确。 但是，由于在其他键之前捕获键的“其余”没有逻辑意义，因此ES2018标准和Typescript要求您将它放在析构化键{ secureTextEntry = false, ...rest } 。

（我第一次错过了这个，因为我复制了编辑你的代码，它运行正常，因为这个网站上的打字稿编译器设置为发出即使它检测到“编译错误”，因为我实际上并没有使用...props内部函数，我没有意识到其余的参数转换不能正常工作。你应该自己看看转换的运行情况 。）

Answer 2

我根本不会使用destructuring，而是将可选属性放在一个新对象上：

export default function LRInput(props: Props) {
     const defaultedProps: Props = { secureTextEntry: false, ...props };
    /* function body */
}