Allow trailing commas after non-rest elements in destructuring

[bakkot]

Fixes #24628.

cc @andy-ms for the original change in #22262.

[msftclas]

All CLA requirements met.

[mhegazy]

thanks @bakkot!

[swar30]

Will this be in 2.9.3 ?

[mhegazy]

No. TS 3.0, should be out next week.

[JeromeLin]

This problem still exists in the 3.0.1

[ghost]

@jerome The example from #24628 works for me with typescript@3.0.1, could you share example code that doesn't work for you?

[JeromeLin]

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

[bakkot]

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

[JeromeLin]

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