babel转换不支持装饰器和泛型同时使用

[AlexStacker]

问题描述
自己增加了redux的typescript的类型定义文件，包含了装饰器和泛型，但是编译时报错，调试了一下应该是babel 无法解析的原因。

@connect<PageStateProps, PageDispatchProps, PageOwnProps>(({ counter }) => ({
  counter
}), (dispatch) => ({
  add() {
    dispatch(add());
  },
  dec() {
    dispatch(minus());
  },
  asyncAdd() {
    // @ts-ignore
    dispatch(asyncAdd());
  }
}))
class Index extends Component<PageOwnProps, PageState> {
}

报错信息

{ SyntaxError: unknown: Leading decorators must be attached to a class declaration (31:8)

  29 | type IProps = PageStateProps & PageDispatchProps & PageOwnProps;
  30 |
> 31 | @connect<PageStateProps, PageDispatchProps, PageOwnProps>(({ counter }) => ({
     |         ^
  32 |   counter
  33 | }), (dispatch) => ({
  34 |   add() {
    at _class.raise (D:\Project\taro-redux-typescript-sample\node_modules\@babel\parser\lib\index.js:3898:15)
    at _class.parseDecorators (D:\Project\taro-redux-typescript-sample\node_modules\@babel\parser\lib\index.js:7282:12)
    at _class.parseStatement (D:\Project\taro-redux-typescript-sample\node_modules\@babel\parser\lib\index.js:7117:12)
    at _class.parseBlockOrModuleBlockBody (D:\Project\taro-redux-typescript-sample\node_modules\@babel\parser\lib\index.js:7671:23)
    at _class.parseBlockBody (D:\Project\taro-redux-typescript-sample\node_modules\@babel\parser\lib\index.js:7658:10)
    at _class.parseTopLevel (D:\Project\taro-redux-typescript-sample\node_modules\@babel\parser\lib\index.js:7085:10)
    at _class.parse (D:\Project\taro-redux-typescript-sample\node_modules\@babel\parser\lib\index.js:8471:17)
    at parse (D:\Project\taro-redux-typescript-sample\node_modules\@babel\parser\lib\index.js:10404:38)
    at parser (D:\Project\taro-redux-typescript-sample\node_modules\@babel\core\lib\transformation\normalize-file.js:154:34)
    at normalizeFile (D:\Project\taro-redux-typescript-sample\node_modules\@babel\core\lib\transformation\normalize-file.js:126:11)
  pos: 556,
  loc: Position { line: 31, column: 8 },
  code: 'BABEL_PARSE_ERROR' }

期望行为
能正常编译

系统信息

• 操作系统: Windows 7
• Taro 版本 v.0.0.73
• Node.js 版本 v8.10.3

补充信息
调试的结果是taro-transformer-wx插件里babel的transform没有正常转换ts代码，如果在使用babel转换之前用ts.transpileModule转换一下，把类型定义给去掉的话倒是可以编译通过，但是不知道是不是这样的过程。我把代码放到了了这里，可以拉取下来运行调试一下。

[yuche]

这似乎是 babel-typescript-plugin 的问题。

ts.transpile 能解决这个问题但有新的问题：

1. ts.transpile一定会把装饰器编译成一个函数，并且该行为无法更改。原因在于ECMAScript 装饰器提案还不稳定，和 TypeScript 的装饰器行为有些不一致（ref：Add compiler options to disable decorator transform microsoft/TypeScript#16882 ）。而我们希望他不编译装饰器，保持 connect 函数原有的样子 taro-redux 才能跑起来。
2. 一些情况无法解析正确 JSX。

还得再想想怎么做。

[AlexStacker]

能不能通过写typescript的插件来实现不让Typescript转换装饰器。

不过感觉现在Taro的思路是自己先用babel转换了一次，注入部分代码，然后又用webpack打包一次，是不是必须这样这样的原理呢？

[AlexStacker]

@yuche 1.0.0-beta.5解决了类型报错问题但是编译的结果出问题了

应该是经过ts编译器后pages字段隐藏到constructor里的原因：

[yuche]

@AlexStacker page 的 config 之外还有啥问题吗

[AlexStacker]

暂时没发现，我尝试改了一下，提交了一个PR 在我这边可以顺利编译跑起来。
babel是现学现用的，可能考虑的不周，仅供参考。

[AlexStacker]

@yuche我那个pr实现的应该是有问题的，会把整个constructor给移除掉。