Allow trailing commas after non-rest elements in destructuring

[Kevin Gibbons (bakkot)]

Fixes #24628.

cc Andy (Andrewkraft) (@Andy-MS) for the original change in #22262.

[Microsoft Contribution License Agreements (msftclas)]

All CLA requirements met.

[Mohamed Hegazy (mhegazy)]

thanks Kevin Gibbons (@bakkot)!

[Alex Shnayder (swar30)]

Will this be in 2.9.3 ?

[Mohamed Hegazy (mhegazy)]

No. TS 3.0, should be out next week.

[Jerome (JeromeLin)]

This problem still exists in the 3.0.1

[Deleted user (ghost)]

Jérôme Lipowicz (@jerome) The example from #24628 works for me with typescript@3.0.1, could you share example code that doesn't work for you?

[Jerome (JeromeLin)]

Andy (Andrewkraft) (@Andy-MS) in React component

import React, { PureComponent } from 'react';

export interface ButtonProps {
  size?: 'large' | 'normal' | 'small';
}

export default class Button extends PureComponent<ButtonProps, {}> {
  render() {
    const {
      size,
      children,
      ...others,     // error line
    } = this.props;
    return <a {...others}>{children}</a>;
  }
}

[Kevin Gibbons (bakkot)]

Jerome (@JeromeLin), that's not syntactically valid JavaScript or (as of #22262) TypeScript. You can't have a trailing comma after a rest element (...something) in a destructuring binding or assignment. This PR is specifically about commas after trailing non-rest elements.

TypeScript's behavior is correct; you should remove that comma.

[Jerome (JeromeLin)]

Kevin Gibbons (@bakkot) thanks. this problem has been solved.
I remove that comma，and add esSpecCompliant option in tslint config.