Regression: A trailing comma is not permitted after the rest element (tsx)

[rosskevin]

Prettier 1.9.1
Playground link

Input:

import * as React from 'react';
import * as PropTypes from 'prop-types';
import * as classNames from 'classnames';
import Transition from 'react-transition-group/Transition';
import { ClassNameMap } from '../styles/withStyles';
import { TransitionProps } from '../transitions/transition';

export type RippleClassKey =
  | 'root'
  | 'wrapper'
  | 'wrapperLeaving'
  | 'wrapperPulsating'
  | 'ripple'
  | 'rippleVisible'
  | 'rippleFast';

export interface RippleProps extends TransitionProps {
  classes: ClassNameMap<RippleClassKey>;
  pulsate?: boolean;
  rippleSize?: number;
  rippleX?: number;
  rippleY?: number;
}

interface State {
  rippleVisible: boolean;
  rippleLeaving: boolean;
}

/**
 * @ignore - internal component.
 */
class Ripple extends React.Component<RippleProps, State> {
  static defaultProps = {
    pulsate: false,
  };
  state: State = {
    rippleVisible: false,
    rippleLeaving: false,
  };

  handleEnter = () => {
    this.setState({
      rippleVisible: true,
    });
  };

  handleExit = () => {
    this.setState({
      rippleLeaving: true,
    });
  };

  render() {
    const {
      classes,
      className: classNameProp,
      pulsate,
      rippleX,
      rippleY,
      rippleSize,
      ...other,
    } = this.props;
    const { rippleVisible, rippleLeaving } = this.state;

    const className = classNames(
      classes.wrapper,
      {
        [classes.wrapperLeaving]: rippleLeaving,
        [classes.wrapperPulsating]: pulsate,
      },
      classNameProp,
    );

    const rippleClassName = classNames(classes.ripple, {
      [classes.rippleVisible]: rippleVisible,
      [classes.rippleFast]: pulsate,
    });

    const rippleStyles = {
      width: rippleSize,
      height: rippleSize,
      top: -(rippleSize / 2) + rippleY,
      left: -(rippleSize / 2) + rippleX,
    };

    return (
      <Transition onEnter={this.handleEnter} onExit={this.handleExit} {...other}>
        <span className={className}>
          <span className={rippleClassName} style={rippleStyles} />
        </span>
      </Transition>
    );
  }
}

(Ripple as any).propTypes = {
  /**
   * Useful to extend the style applied to components.
   */
  classes: PropTypes.object.isRequired,
  /**
   * @ignore
   */
  className: PropTypes.string,
  /**
   * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
   */
  pulsate: PropTypes.bool,
  /**
   * Diameter of the ripple.
   */
  rippleSize: PropTypes.number,
  /**
   * Horizontal position of the ripple center.
   */
  rippleX: PropTypes.number,
  /**
   * Vertical position of the ripple center.
   */
  rippleY: PropTypes.number,
};

export default Ripple;

Output:

SyntaxError: A trailing comma is not permitted after the rest element (62:15)
  60 |       rippleY,
  61 |       rippleSize,
> 62 |       ...other,
     |               ^
  63 |     } = this.props;
  64 |     const { rippleVisible, rippleLeaving } = this.state;
  65 | 

Expected behavior:
When I run prettier on a tsx file, it does not add a comma to the end or a rest element. Regression of #507 it seems, the only potential difference I see is that this is a tsx.

If I delete the comma manually then re-run prettier, it adds the comma back.

trailingCommas is currently all, but I tried with es5 and it made no difference.

[ikatyang]

You have to specify --parser typescript on the playground.

playground

Prettier 1.9.2
Playground link

--parser typescript

Input:

import * as React from 'react';
import * as PropTypes from 'prop-types';
import * as classNames from 'classnames';
import Transition from 'react-transition-group/Transition';
import { ClassNameMap } from '../styles/withStyles';
import { TransitionProps } from '../transitions/transition';

export type RippleClassKey =
  | 'root'
  | 'wrapper'
  | 'wrapperLeaving'
  | 'wrapperPulsating'
  | 'ripple'
  | 'rippleVisible'
  | 'rippleFast';

export interface RippleProps extends TransitionProps {
  classes: ClassNameMap<RippleClassKey>;
  pulsate?: boolean;
  rippleSize?: number;
  rippleX?: number;
  rippleY?: number;
}

interface State {
  rippleVisible: boolean;
  rippleLeaving: boolean;
}

/**
 * @ignore - internal component.
 */
class Ripple extends React.Component<RippleProps, State> {
  static defaultProps = {
    pulsate: false,
  };
  state: State = {
    rippleVisible: false,
    rippleLeaving: false,
  };

  handleEnter = () => {
    this.setState({
      rippleVisible: true,
    });
  };

  handleExit = () => {
    this.setState({
      rippleLeaving: true,
    });
  };

  render() {
    const {
      classes,
      className: classNameProp,
      pulsate,
      rippleX,
      rippleY,
      rippleSize,
      ...other,
    } = this.props;
    const { rippleVisible, rippleLeaving } = this.state;

    const className = classNames(
      classes.wrapper,
      {
        [classes.wrapperLeaving]: rippleLeaving,
        [classes.wrapperPulsating]: pulsate,
      },
      classNameProp,
    );

    const rippleClassName = classNames(classes.ripple, {
      [classes.rippleVisible]: rippleVisible,
      [classes.rippleFast]: pulsate,
    });

    const rippleStyles = {
      width: rippleSize,
      height: rippleSize,
      top: -(rippleSize / 2) + rippleY,
      left: -(rippleSize / 2) + rippleX,
    };

    return (
      <Transition onEnter={this.handleEnter} onExit={this.handleExit} {...other}>
        <span className={className}>
          <span className={rippleClassName} style={rippleStyles} />
        </span>
      </Transition>
    );
  }
}

(Ripple as any).propTypes = {
  /**
   * Useful to extend the style applied to components.
   */
  classes: PropTypes.object.isRequired,
  /**
   * @ignore
   */
  className: PropTypes.string,
  /**
   * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
   */
  pulsate: PropTypes.bool,
  /**
   * Diameter of the ripple.
   */
  rippleSize: PropTypes.number,
  /**
   * Horizontal position of the ripple center.
   */
  rippleX: PropTypes.number,
  /**
   * Vertical position of the ripple center.
   */
  rippleY: PropTypes.number,
};

export default Ripple;

Output:

import * as React from "react";
import * as PropTypes from "prop-types";
import * as classNames from "classnames";
import Transition from "react-transition-group/Transition";
import { ClassNameMap } from "../styles/withStyles";
import { TransitionProps } from "../transitions/transition";

export type RippleClassKey =
  | "root"
  | "wrapper"
  | "wrapperLeaving"
  | "wrapperPulsating"
  | "ripple"
  | "rippleVisible"
  | "rippleFast";

export interface RippleProps extends TransitionProps {
  classes: ClassNameMap<RippleClassKey>;
  pulsate?: boolean;
  rippleSize?: number;
  rippleX?: number;
  rippleY?: number;
}

interface State {
  rippleVisible: boolean;
  rippleLeaving: boolean;
}

/**
 * @ignore - internal component.
 */
class Ripple extends React.Component<RippleProps, State> {
  static defaultProps = {
    pulsate: false
  };
  state: State = {
    rippleVisible: false,
    rippleLeaving: false
  };

  handleEnter = () => {
    this.setState({
      rippleVisible: true
    });
  };

  handleExit = () => {
    this.setState({
      rippleLeaving: true
    });
  };

  render() {
    const {
      classes,
      className: classNameProp,
      pulsate,
      rippleX,
      rippleY,
      rippleSize,
      ...other
    } = this.props;
    const { rippleVisible, rippleLeaving } = this.state;

    const className = classNames(
      classes.wrapper,
      {
        [classes.wrapperLeaving]: rippleLeaving,
        [classes.wrapperPulsating]: pulsate
      },
      classNameProp
    );

    const rippleClassName = classNames(classes.ripple, {
      [classes.rippleVisible]: rippleVisible,
      [classes.rippleFast]: pulsate
    });

    const rippleStyles = {
      width: rippleSize,
      height: rippleSize,
      top: -(rippleSize / 2) + rippleY,
      left: -(rippleSize / 2) + rippleX
    };

    return (
      <Transition
        onEnter={this.handleEnter}
        onExit={this.handleExit}
        {...other}
      >
        <span className={className}>
          <span className={rippleClassName} style={rippleStyles} />
        </span>
      </Transition>
    );
  }
}

(Ripple as any).propTypes = {
  /**
   * Useful to extend the style applied to components.
   */
  classes: PropTypes.object.isRequired,
  /**
   * @ignore
   */
  className: PropTypes.string,
  /**
   * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
   */
  pulsate: PropTypes.bool,
  /**
   * Diameter of the ripple.
   */
  rippleSize: PropTypes.number,
  /**
   * Horizontal position of the ripple center.
   */
  rippleX: PropTypes.number,
  /**
   * Vertical position of the ripple center.
   */
  rippleY: PropTypes.number
};

export default Ripple;

[rosskevin]

Fantastic - thanks @ikatyang - we are trying to switch a codebase to typescript and still had parser: babylon.