存在ts类型强制转换编译出错

[MikyChow]

问题描述
引用ts类型转换时报错

复现步骤
[复现问题的步骤]

1. 初始化新得taro项目
2. 添加ts文件如下：

class Test {
  a() {
    let b = <any> {
      "NN": 12
    }
  }
}

3. 引用并实例化'Test' 对象并编译报错
   期望行为
   正常编译

报错信息

{ SyntaxError: unknown: Unexpected token (7:10)
   5 |   }
   6 | }
>  7 |         </>;
     |           ^
   8 |     }
   9 | }
  10 |
    at Parser.pp$5.raise (C:\Users\56403\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babylon\lib\index.js:4454:13)
    at Parser.pp.unexpected (C:\Users\56403\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babylon\lib\index.js:1761:8)
    at Parser.pp$9.jsxParseIdentifier (C:\Users\56403\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babylon\lib\index.js:7029:10)
    at Parser.pp$9.jsxParseNamespacedName (C:\Users\56403\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babylon\lib\index.js:7040:19)
    at Parser.pp$9.jsxParseElementName (C:\Users\56403\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babylon\lib\index.js:7055:19)
    at Parser.pp$9.jsxParseClosingElementAt (C:\Users\56403\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babylon\lib\index.js:7158:20)
    at Parser.pp$9.jsxParseElementAt (C:\Users\56403\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babylon\lib\index.js:7179:35)
    at Parser.pp$9.jsxParseElement (C:\Users\56403\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babylon\lib\index.js:7224:15)
    at Parser.parseExprAtom (C:\Users\56403\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babylon\lib\index.js:7236:21)
    at Parser.pp$3.parseExprSubscripts (C:\Users\56403\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babylon\lib\index.js:3494:19)
  pos: 79,
  loc: Position { line: 7, column: 10 },
  _babel: true,
  codeFrame: '\u001b[0m \u001b[90m  5 | \u001b[39m  }\n \u001b[90m  6 | \u001b[39m}\n\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m  7 | \u001b[39m        \u001b[33m<\u001b[39m\u001b[33m/\u001b[39m\u001b[33m>\u001b[39m\u001b[33m;\u001b[39m\n \u001b[90m    | \u001b[39m          \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\n \u001b[90m  8 | \u001b[39m    }\n \u001b[90m  9 | \u001b[39m}\n \u001b[90m 10 | \u001b[39m\u001b[0m' }

系统信息

Taro v1.2 及以上版本已添加 taro info 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。

• 操作系统: [Windows 10]
• Taro 版本 [1.2.13]
• Node.js 版本 [8.11.3]
• 报错平台 [h5, weapp]

补充信息
[可选]
[根据你的调查研究，出现这个问题的原因可能在哪里？]
强制转换时将<>解析成了jsx导致错误

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[yuche]

你这个语法有错误，参考：

#1851 (comment)

正确的写法是：

class Test {
  a() {
    let b =  {
      "NN": 12
    } as any
  }
}

[taro-bot]

Hello~

您的问题楼上已经提供了解决方案，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[MikyChow]

@yuche 你好、谢谢您的耐心解答，以下为我翻看ts文档的内容
新的 .tsx 文件扩展名和 as 运算符 TypeScript 1.6 引入了新的 .tsx 文件扩展名. 这一扩展名一方面允许 TypeScript 文件中的 JSX 语法, 一方面将 as 运算符作为默认的类型转换方式 (避免 JSX 表达式和 TypeScript 前置类型转换运算符之间的歧义).

这里的确说了tsx中会影响歧义、但是我的文件扩展名为ts呢？
由于我在使用一些自动代码生成器会自动生成这一类代码，所以如果能区分ts/tsx就应该能解决了。

[yuche]

目前 taro 的 ts 编译会一定选择 JSX 模式进行编译。
我觉得这个违法的写法不应该进入你的代码库，如果我是你就会修改自动代码生成器禁止这样的写法。

[MikyChow]

你好，谢谢你的关注。根据以上官方文档、只有在jsx中才只允许as风格的写法，但是在ts中时相同的语义。
由于我这边是对其他部门的接口进行第三方调用、在这中间会有很多代码自动生成ts、比如后台的dto、接口等强类型的类。

[yuche]

你好，原文并没有说 只有 TSX 才能使用 as 语法，而是说 TSX 只能 使用 as 语法。

相反在 TypeScript Deep Dive 推荐一直使用 as 语法：https://basarat.gitbooks.io/typescript/docs/types/type-assertion.html