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

Question

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

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

只有当 class 定义了一个函数时才会出现错误。如果 class 有一个函数表达式变量，展开运算符工作正常。我相信它与 class 上的属性枚举有关。因此，我使用装饰器将函数标记为不可枚举，但仍然出现相同的错误。下面是代码：

Message 是 class 我试图传播到 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 组件 who's 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，传播运算符失败并显示类似消息：

Type '{ msg: string; init2: (msg: string) => Message; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNod...'. Type '{ msg: string; init2: (msg: string) => Message; }' is not assignable to type 'Readonly'. Property 'init' is missing in type '{ msg: string; init2: (msg: string) => Message; }'.

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

Answer 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.

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

How to make spread operator enumerate through non-function properties only?

javascript

typescript

reactjs

spread-syntax

typescript-decorator

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