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

Question

堆栈: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;
  }
}

Prop 的 ReactJS 组件被定义为 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
  }

可枚举装饰器函数:

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

配置:

"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 将它们分配给一个新的空对象来收集所有剩余的属性。