设置函数对象参数的key的默认值答案

【问题标题】：Set the default value for the key of the function object parameter设置函数对象参数的key的默认值
【发布时间】：2019-06-17 12:11:46
【问题描述】：

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

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 是一个可选参数。所以，我想为这个道具定义一些默认值。我该怎么做？

【问题讨论】：

{ ...props, secureTextEntry = false }
谢谢，但我更改了 {secureTextEntry = false, ...props} 上的变体：道具，因为我有这个错误：“解析错误：休息元素必须是最后一个元素”和“休息属性必须是对象模式的最终属性”。我添加了 :Props，因为我得到了“Missing type annotation for destructuring”。警告。
对，rest语法一定是最后一个{secureTextEntry = false, ...props}

标签： javascript react-native ecmascript-6

【解决方案1】：

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

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

【讨论】：

谢谢）但是你能解释一下为什么它比以前的答案更好吗？
@Eugene secureTextEntry 现在是 defaultedProps 的一部分，这与使用解构时它不是其余对象的一部分不同。
或者我可以写export default function LRInput(props: Props) { props = { secureTextEntry: false, ...props }; console.log(props.secureTextEntry); }。谢谢）

【解决方案2】：

不幸的是（或幸运的是？），您将不得不在解构时这样做

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 })

编辑

为了解决您对默认值位于其余 props 之后的担忧，将 typescript 设置为目标 es5 不是问题，因为其余语法会被转换为如下所示的内容，

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

    /* code to handle rest omitted */

    console.log(secureTextEntry); 
}

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

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

【讨论】：

谢谢）如果我错了，请纠正我。如果我以这种方式调用函数，LRInput({ icon: 5 })，我有secureTextEntry = false，因为其余的（...props）中缺少此属性。但是如果我以这种方式调用函数，LRInput({ icon: 5, secureTextEntry: true })，我首先有secureTextEntry = false，但接下来我有secureTextEntry = true，因为我在其余部分有一个同名的属性(...props) 并在 true 上替换 false。
啊，是的，通常我会自然地将它放在最后，但由于我对您的原始问题进行了复制编辑，所以我错过了它。查看我的编辑。
感谢您的准确解释）