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

道具的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
  }

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，散布运算符失败并显示类似消息：

键入'{msg：字符串; init2：（msg：字符串）=>消息; }”不能分配给“ IntrinsicAttributes＆IntrinsicClassAttributes＆Readonly <{children ?: ReactNod ...”类型。输入'{msg：string; init2：（msg：字符串）=>消息; }”不可分配为“只读”类型。类型'{msg：string;类型中缺少属性'init'。 init2：（msg：字符串）=>消息; }'。

我在做什么错？如何使散布运算符仅枚举属性而不是函数？

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

这种工作方式是通过用keys遍历object的{{1}}来过滤出指向函数的键。然后，我们通过使用.filter将它们分配给一个新的空对象来收集所有剩余的属性。

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

1 个答案:

当您自己删除功能时为什么要使用装饰器