Type generics for React components break syntax highlighting

[kaiyoma]

Prerequisites

• [x] Put an X between the brackets on this line if you have done all of the following:
  • Reproduced the problem in Safe Mode: https://flight-manual.atom.io/hacking-atom/sections/debugging/#using-safe-mode
  • Followed all applicable steps in the debugging guide: https://flight-manual.atom.io/hacking-atom/sections/debugging/
  • Checked the FAQs on the message board for common solutions: https://discuss.atom.io/c/faq
  • Checked that your issue isn't already filed: https://github.com/issues?utf8=✓&q=is%3Aissue+user%3Aatom
  • Checked that there is not already an Atom package that provides the described functionality: https://atom.io/packages

Steps to Reproduce

Enter this text and set the type to "TypeScriptReact":

// Add all the single-select stories first.
ALL_OPTIONS.forEach(({ name, options, stateKey }) => {
  storiesOf('Select', module).add(`Single value - ${name}`, () => (
    <State store={store}>
      {(state: PlainObject<string | string[]>) => (
        <Select<unknown>
          className='select-story-component'
        />
      )}
    </State>
  ));
});

// Add all the multi-select stories next.
ALL_OPTIONS.forEach(({ name, options, stateKey }) => {
  storiesOf('Select', module).add(`Multiple values - ${name}`, () => (
    <State store={store}>
      {(state: PlainObject<string | string[]>) => (
        <Select<unknown>
          className='select-story-component'
        />
      )}
    </State>
  ));
});

Actual behavior:

Reproduces how often:

100%

Versions

$ atom --version

Atom    : 1.45.0
Electron: 4.2.7
Chrome  : 69.0.3497.128
Node    : 10.11.0

[bennypowers]

I'm having a similar issue with class mixins

// highlighting works, class is underspecified
import { ApolloQuery } from '@apollo-elements/lit-apollo';
class QueryComponent extends AnalysisQueryMixin(ApolloQuery) { // No base constructor has the specified number of type arguments.
  static readonly is = 'broken-highlighting';
  render() {
    html`
      <strong>highlighting is broken here</strong>
    `
  }
}

// highlighting broken, class is typed up properly
import { ApolloQuery } from '@apollo-elements/lit-apollo';
class QueryComponent extends AnalysisQueryMixin(ApolloQuery)<Data, Variables> {
  static readonly is = 'broken-highlighting';
  render() {
    html`
      <strong>highlighting works here</strong>
    `
  }
}

this works though

const AnalysisElement = AnalysisQueryMixin(ApolloQuery)
class QueryComponent extends AnalysisElement<Data, Variables> {/*...*/}