如何使扩展运算符仅通过非函数属性枚举？

Posted 2023-02-22

【中文标题】如何使扩展运算符仅通过非函数属性枚举？

【英文标题】：How to make spread operator enumerate through non-function properties only?

【发布时间】：2018-12-12 09:37:13

【问题描述】：

堆栈：ReactJS 16.x、Typescript 2.8.1、create-react-app 项目。

我在使用扩展运算符将 props 从 TypeScript 类传递到 React 组件时遇到类型错误。

仅当类定义了函数时才会发生错误。如果该类具有函数表达式变量，则展开运算符可以正常工作。我相信这与类上的属性枚举有关。因此，我使用装饰器将函数标记为不可枚举，但仍然遇到相同的错误。下面是代码：

Message 是我试图传播到 React 组件中的类。

export class Message 
  constructor() 
    this.init2 = (msg: string) => 
      this.msg = 'init2';
      return this;
    
  

  public msg: string;

  // This works with spread operator
  public init2: (msg: string) => Message;

  // This will cause the spread operator to fail
  public init(msg: string): Message 
    this.msg = msg;
    return this;
  

  // Even with decorator to turn off enumeration, spread operator fails
  @enumerable(false)
  public initNoEnum(msg: string): Message 
      this.msg = msg;
      return this;
  

ReactJS 组件的 prop 定义为 Message:

export class MessageComponent extends React.Component<Message, any>
  render() 
    return (<div>this.props.msg</div>);
  

使用MessageComponent的渲染方法：

  public render() 
    const msg = new Message().init('hello world!');
    return <MessageComponent ...msg /> // The spread here fails
  

enumerable 装饰器函数：

  export function enumerable(value: boolean): any 
      return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) 
      descriptor.enumerable = value;
    ;
  

tsconfig：

"compilerOptions": 
  "outDir": "./build",
  "module": "esnext",
  "target": "es5",
  "lib": [ "es6", "dom" ],
  "sourceMap": true,
  "allowJs": true,
  "jsx": "react",
  "moduleResolution": "node",
  "rootDir": "src",
  "forceConsistentCasingInFileNames": true,
  "noImplicitReturns": true,
  "noImplicitThis": true,
  "noImplicitAny": true,
  "strictNullChecks": true,
  "suppressImplicitAnyIndexErrors": true,
  "noUnusedLocals": true,
  "experimentalDecorators": true
,

如果我注释掉 init 和 initNoEnum 并保留 init2，则扩展运算符有效。对于 init 和 initNoEnum，展开运算符失败并显示类似消息：

类型'味精：字符串； init2: (msg: string) => 消息； ' 不能分配给类型 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly 消息； ' 不可分配给类型“只读”。 ' msg: string; 类型中缺少属性 'init' init2: (msg: string) => 消息； '。

我做错了什么？如何使扩展运算符仅通过属性而不是函数进行枚举？

【问题讨论】：

你不能，函数是属性，因此总是由扩展运算符传播。

【参考方案1】：

既然你可以自己删除函数，为什么还要使用装饰器

默认情况下，您不能使用扩展运算符仅获取非函数属性，因为函数是属性，但也许使用您的 tsconfig 魔法它应该可以工作，但是，您可以修改传递给扩展运算符的对象首先代替。

要使用扩展语法仅获取非函数属性而不使用 tsconfig 魔法，我建议使用函数过滤掉函数属性，然后使用扩展运算符，如下所示：

const filterOutFunctions = object => 
  return Object.keys(object)
    .filter(key => typeof(object[key]) !== 'function')
    .reduce((filteredObj, currentItem) => 
      filteredObj[currentItem] = object[currentItem]
      return filteredObj
    , )


const objectWithFunctions = 
  aFunction() ,
  aProperty: 'A good ol string'


// Now you can do spread operator stuff with a filtered version like so:
...filterOutFunctions(objectWithFunctions)
// returns:  aProperty: 'A good ol string' 

其工作方式是使用.filter 迭代object 的keys 以过滤掉指向函数的键。然后我们通过将所有剩余的属性分配给一个新的、空的、.reduce 的对象来收集它们。

【讨论】：

谢谢。我希望有一些不同的东西，但这很有效。