React Typescript 项目中的 SyntaxError 但 IDE 中没有编译器错误答案

【问题标题】：SyntaxError in React Typescript Project But No Compiler Errors in IDEReact Typescript 项目中的 SyntaxError 但 IDE 中没有编译器错误
【发布时间】：2019-06-28 23:57:24
【问题描述】：

我的项目是一个使用 Typescript 和 create-react-aoo 构建的 Chrome OS 应用程序。

以下是有问题的打字稿文件：

import Keys from "./Keys";
import Volume from "./Volume"
import Block from './Block'
import EventHandler from "../utility/EventHandler"

abstract class ChromeVolume implements Volume {
    readonly error: EventHandler<Volume, Error> = new EventHandler<Volume, Error>(this);

    async abstract load<T extends Keys>(keys: T): Promise<Block>

    async abstract save<T extends object>(items: T): Promise<void>

    async abstract clear(): Promise<void>
}

export default ChromeVolume

我在尝试使用 react-scripts test 运行 Jest 测试时收到以下错误：

Test suite failed to run

    SyntaxError: ...\ChromeVolume.ts: Unexpected token, expected "(" (12:19)

      10 |     readonly error: EventHandler<Volume, Error> = new EventHandler<Volume, Error>(this);
      11 | 
    > 12 |     async abstract load<T extends Keys>(keys: T): Promise<Block>
         |                    ^
      13 | 
      14 |     async abstract save<T extends object>(items: T): Promise<void>
      15 | 

      at Object.raise (node_modules/@babel/parser/lib/index.js:6322:17)
      at Object.unexpected (node_modules/@babel/parser/lib/index.js:7638:16)
      at Object.expect (node_modules/@babel/parser/lib/index.js:7624:28)
      at Object.parseFunctionParams (node_modules/@babel/parser/lib/index.js:10495:10)
      at Object.parseFunctionParams (node_modules/@babel/parser/lib/index.js:5570:11)
      at Object.parseMethod (node_modules/@babel/parser/lib/index.js:9304:10)
      at Object.pushClassMethod (node_modules/@babel/parser/lib/index.js:10743:30)
      at Object.pushClassMethod (node_modules/@babel/parser/lib/index.js:5540:11)
      at Object.parseClassMemberWithIsStatic (node_modules/@babel/parser/lib/index.js:10687:14)
      at Object.parseClassMemberWithIsStatic (node_modules/@babel/parser/lib/index.js:5440:11)

【问题讨论】：

我之前也遇到过类似的问题，你的编译器很可能认为<T extends Keys>是一个react标签，你有没有尝试改变abstract和async关键字和泛型声明的顺序？

标签： reactjs typescript google-chrome jestjs

【解决方案1】：

我使用以下更改的文件解决了这个问题：

import Keys from "./Keys";
import Volume from "./Volume"
import Block from './Block'
import EventHandler from "../utility/EventHandler"

abstract class ChromeVolume implements Volume {
    readonly error: EventHandler<Volume, Error> = new EventHandler<Volume, Error>(this);

    abstract async load<T extends Keys>(keys: T): Promise<Block>

    abstract async save<T extends object>(items: T): Promise<void>

    abstract async clear(): Promise<void>
}

export default ChromeVolume

我不确定为什么更改 abstract 和 async 关键字的顺序很重要，但现在问题已解决。

【讨论】：