小程序 typescript 构建问题

[tommytroylin]

问题描述
项目中使用 typescript 语法。编译不通过。

复现步骤
[或者可以直接贴源代码，能贴文字就不要截图]

const responseHandler = <Output>({ data }: Taro.request.Promised<any>): Output => {
  if (data.success) {
    return data.content;
  } else {
    throw new Error(`${data.errors || '未知错误'}`);
  }
};

期望行为
正常编译不报错

报错信息

系统信息

  Taro CLI 1.2.23 environment info:
    System:
      OS: macOS 10.14.2
      Shell: 5.7 - /usr/local/bin/zsh
    Binaries:
      Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
      Yarn: 1.13.0 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v10.15.0/bin/npm
    npmPackages:
      @tarojs/cli: 1.2.23 => 1.2.23 
      @tarojs/components: 1.2.23 => 1.2.23 
      @tarojs/plugin-babel: 1.2.23 => 1.2.23 
      @tarojs/plugin-csso: 1.2.23 => 1.2.23 
      @tarojs/plugin-less: 1.2.23 => 1.2.23 
      @tarojs/plugin-uglifyjs: 1.2.23 => 1.2.23 
      @tarojs/redux: 1.2.23 => 1.2.23 
      @tarojs/redux-h5: 1.2.23 => 1.2.23 
      @tarojs/router: 1.2.23 => 1.2.23 
      @tarojs/taro: 1.2.23 => 1.2.23 
      @tarojs/taro-alipay: 1.2.23 => 1.2.23 
      @tarojs/taro-h5: 1.2.23 => 1.2.23 
      @tarojs/taro-swan: 1.2.23 => 1.2.23 
      @tarojs/taro-tt: 1.2.23 => 1.2.23 
      @tarojs/taro-weapp: 1.2.23 => 1.2.23 
      @tarojs/webpack-runner: 1.2.23 => 1.2.23 
      eslint-config-taro: 1.2.23 => 1.2.23 
      eslint-plugin-taro: 1.2.23 => 1.2.23 
      nervjs: ^1.3.13 => 1.3.13 
    npmGlobalPackages:
      typescript: 3.2.2

另外本地的 typescript 版本为 3.4.2。vscode 下此段代码无错误

补充信息
大概是因为 Babylon 的 typescript 插件在 transform 的时候出现了问题。导致后续编译不通过。

目前改成这样写法绕过了：

function responseHandler<Output>({ data }: Taro.request.Promised<any>) {
  if (data.success) {
    return data.content as Output;
  } else {
    throw new Error(`${data.errors || '未知错误'}`);
  }
}

感觉有 2 个解决方案

• 升级解析、构建方式到 babel 7 (但估计 transform 那一层改动很大。。)
• ts 文件不直接走 babylon, 先过一遍依赖里的 ts，transform 成 esnext 产物之后再给 babylon

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[yuche]

这个跟 babel 无关，是你的语法问题。简单来说就是像 TypeScript Deep Dive 推荐的一样: use as for for consistency。

参考：
https://basarat.gitbooks.io/typescript/docs/types/type-assertion.html
#1851

[tommytroylin]

@yuche 这个是泛型啊。。。

[yuche]

看 #1851

[tommytroylin]

看了的啊。这个地方根本就不是 type cast。不是 所谓的<> as 之争

是泛型声明。

const responseHandler = <Output>({ data }: Taro.request.Promised<any>): Output => {
  if (data.success) {
    return data.content;
  } else {
    throw new Error(`${data.errors || '未知错误'}`);
  }
};

[tommytroylin]

看了下你的 runkit 应该是 typeScript@3.2.2 编译有问题。。。
我试下 3.3 之后的版本。

另外这个 ts的版本是由 taro 控制的吗。。我全局有个 3.2.2 但是项目依赖里有 3.4.2

[tommytroylin]

const ts = require("typescript");

const str = `
const responseHandler = <Output>({ data }: Taro.request.Promised<any>): Output => {
  if (data.success) {
    return data.content;
  } else {
  }
};
`

ts.transpileModule(str, {
  compilerOptions: { module: ts.ModuleKind.CommonJS, jsx: false, target: 'esnext', lib: ['esnext'] }
}).outputText

这样能拿到正常结果
typescript 的 tsc 对于 .ts 应该是默认禁用了 jsx 这个 compilerOptions。只有 .tsx 才支持 jsx 语法。而 transpileModule 没办法做这个判断。

这个问题应该可以通过在调用处进行文件的后缀判断来解决。
你看下能否给下对应调用的代码地址。
我抽空看下能否提个 pr 解决这几个同类问题。。

[yuche]

现在普通 .ts 文件应该也能这么写，但 .tsx 还是会受限。