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 }后面。

（我第一次错过了这一点，因为我通过复制编辑了您的代码，并且运行良好，因为该站点上的打字稿编译器设置为即使检测到“编译错误”也可以发出，并且因为我实际上并未使用{{1 }}在函数内部，我没有意识到rest参数转换不能正常工作。您应该自己查看transpilation in action。）

Answer 2

我根本不会使用解构，而是将optional属性放在一个新对象上：

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

设置功能对象参数的键的默认值

2 个答案: