React Native与TypeScript中该解构赋值语法的含义是什么?
代码语法含义解释
这是TypeScript环境下的箭头函数写法,两处data属于完全不同的语法逻辑,不存在冗余:
- 第一处
{ data }是ES6标准的对象解构赋值语法:函数接收的第一个入参是一个对象,这段语法的作用是直接从入参对象里提取出名为data的属性,作为当前函数作用域内可以直接调用的变量,不用再写xxx.data的层级调用。 - 第二处位于类型标注中的
data: interfaceModel是TypeScript的静态类型约束:明确规定了函数第一个入参的类型是「包含data属性、且data属性类型为interfaceModel的对象」,不符合这个结构的参数传入时会触发TS的类型报错。
你可以对比下面的等价常规写法,就能明显看出两者的分工:
// 和你给出的代码完全等价 var = (param: { data: interfaceModel }) => { // 这行就是解构语法的原始实现,对应你代码里的第一个data const data = param.data // data is used here }
如果你的入参对象有多个属性要提取,解构语法的优势会更明显,比如:
// 同时提取多个属性 var = ({ data, name, id }: { data: interfaceModel, name: string, id: number }) => { // 可直接使用data、name、id三个变量 }
内容的提问来源于stack exchange,提问作者John Escobia
相关产品推荐
相关产品推荐

