使用xstate createMachine时出现TypeScript编译错误求助

我通过npx create-react-app my-app --template typescript创建了React TypeScript项目，接着使用npm install xstate --save安装了XState。在导入import { createMachine } from "xstate";后，出现了编译错误，代码和错误信息如下：

我的代码 #

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { createMachine } from "xstate";

function App() {
  return (
    <div>Hello</div>
  );
}

export default App;

编译错误信息 #

ERROR in node_modules/xstate/dist/declarations/src/setup.d.ts:54:21
TS1139: Type parameter declaration expected.
    52 |     [K in RequiredSetupKeys<TChildrenMap>]: unknown;
    53 | }): {
  > 54 |     createMachine: <const TConfig extends MachineConfig<TContext, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>>(config: TConfig) => StateMachine<TContext, TEvent, Cast<ToChildren<ToProvidedActor<TChildrenMap, TActors>>, Record<string, AnyActorRef | undefined>>, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, ToStateValue<TConfig>, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>;
       |                     ^^^^^
    55 | };
    56 | export {};
    57 |

ERROR in node_modules/xstate/dist/declarations/src/setup.d.ts:54:27
TS1005: ';' expected.
    52 |     [K in RequiredSetupKeys<TChildrenMap>]: unknown;
    53 | }): {
  > 54 |     createMachine: <const TConfig extends MachineConfig<TContext, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>>(config: TConfig) => StateMachine<TContext, TEvent, Cast<ToChildren<ToProvidedActor<TChildrenMap, TActors>>, Record<string, AnyActorRef | undefined>>, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, ToStateValue<TConfig>, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>;
       |                           ^^^^^^^
    55 | };
    56 | export {};
    57 |

ERROR in node_modules/xstate/dist/declarations/src/setup.d.ts:54:35
TS1128: Declaration or statement expected.
    52 |     [K in RequiredSetupKeys<TChildrenMap>]: unknown;
    53 | }): {
  > 54 |     createMachine: <const TConfig extends MachineConfig<TContext, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>>(config: TConfig) => StateMachine<TContext, TEvent, Cast<ToChildren<ToProvidedActor<TChildrenMap, TActors>>, Record<string, AnyActorRef | undefined>>, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, ToStateValue<TConfig>, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>;
       |                                   ^^^^^^^
    55 | };
    56 | export {};
    57 |

ERROR in node_modules/xstate/dist/declarations/src/setup.d.ts:54:402
TS1005: ')' expected.
    52 |     [K in RequiredSetupKeys<TChildrenMap>]: unknown;
    53 | }): {
  > 54 |     createMachine: <const TConfig extends MachineConfig<TContext, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>>(config: TConfig) => StateMachine<TContext, TEvent, Cast<ToChildren<ToProvidedActor<TChildrenMap, TActors>>, Record<string, AnyActorRef | undefined>>, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, ToStateValue<TConfig>, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>;
       |

                                                                                                                                    ^      
    55 | };
    56 | export {};
    57 |

ERROR in node_modules/xstate/dist/declarations/src/setup.d.ts:54:404
TS1434: Unexpected keyword or identifier.
    52 |     [K in RequiredSetupKeys<TChildrenMap>]: unknown;
    53 | }): {
  > 54 |     createMachine: <const TConfig extends MachineConfig<TContext, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>>(config: TConfig) => StateMachine<TContext, TEvent, Cast<ToChildren<ToProvidedActor<TChildrenMap, TActors>>, Record<string, AnyActorRef | undefined>>, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, ToStateValue<TConfig>, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>;
       |

                                                                                                                                      ^^^^^^^
    55 | };
    56 | export {};
    57 |

ERROR in node_modules/xstate/dist/declarations/src/setup.d.ts:54:411
TS1128: Declaration or statement expected.
    52 |     [K in RequiredSetupKeys<TChildrenMap>]: unknown;
    53 | }): {
  > 54 |     createMachine: <const TConfig extends MachineConfig<TContext, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>>(config: TConfig) => StateMachine<TContext, TEvent, Cast<ToChildren<ToProvidedActor<TChildrenMap, TActors>>, Record<string, AnyActorRef | undefined>>, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, ToStateValue<TConfig>, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>;
       |


  ^
    55 | };
    56 | export {};
    57 |

ERROR in node_modules/xstate/dist/declarations/src/setup.d.ts:54:413
TS1128: Declaration or statement expected.
    52 |     [K in RequiredSetupKeys<TChildrenMap>]: unknown;
    53 | }): {
  > 54 |     createMachine: <const TConfig extends MachineConfig<TContext, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>>(config: TConfig) => StateMachine<TContext, TEvent, Cast<ToChildren<ToProvidedActor<TChildrenMap, TActors>>, Record<string, AnyActorRef | undefined>>, Toe<TConfig>, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TAce<TConfig>, TTag,tors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>;                         rizedObject<TActi


                                                       ^^
    55 | };
    56 | export {};
    57 |

ERROR in node_modules/xstate/dist/declarations/src/setup.d.ts:55:1
TS1128: Declaration or statement expected.
    53 | }): {
    54 |     createMachine: <const TConfig extends MachineConfig<TContext, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmit<TGuards>, TDelay, TTag, TEmitted>>>(config: TConfig) => StateMachine<TContext, TEvent, Cast<ToChildren<ToProvidedActor<T<string, AnyActorRef | undefinChildrenMap, TActors>>, Record<string, AnyActorRef | undefined>>, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedOtateValue<TConfig>, TTag, TInpbject<TActions>, ToParameterizedObject<TGuards>, TDelay, ToStateValue<TConfig>, TTag, TInput, TOutput, TEmitted, ResolveTyObject<TActions>, ToParameteripegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>;
  > 55 | };
       | ^
    56 | export {};
    57 |

解决方案 #

这些错误是因为安装的XState版本过高，和create-react-app默认集成的TypeScript版本不兼容导致的。XState v5+使用了TypeScript 5.0+的const类型参数特性，而旧版create-react-app的TypeScript版本低于5.0，无法识别该语法。

解决步骤：

• 降级XState到兼容版本（推荐）
  卸载当前版本，安装XState v4.x稳定版：

  npm uninstall xstate
  npm install xstate@4 --save
  

  该版本完全兼容create-react-app默认的TypeScript版本，不会出现类型定义错误。

• 升级项目TypeScript版本（可选）
  如果想使用XState v5+，需要将项目的TypeScript升级到5.0以上：

  1. 安装最新版TypeScript：

     npm install typescript@latest --save-dev
     

  2. 检查tsconfig.json，确保compilerOptions中没有禁用const类型参数的配置（默认开启）。
  3. 注意：升级TypeScript后可能需要同步更新@types/react等依赖，避免其他兼容性问题。

• 清除缓存重新编译
  无论选择降级还是升级，执行以下命令清除缓存确保依赖生效：

  rm -rf node_modules package-lock.json
  npm install
  npm start
  

内容的提问来源于stack exchange，提问作者ksionc111