如何为带动作的状态机定义TypeScript类型并解决状态参数类型推断问题

你的问题出在原泛型约束中，state的返回值被固定为Record<string, any>，导致TypeScript无法推断出更具体的类型。以下是修正方案：

修正后的代码 #

function createMachine<S>(config: {
  state: () => S;
  actions: {
    [stateName: string]: {
      [actionName: string]: (state: S) => any;
    };
  };
}) {
  /* ... */
}

createMachine({
  state: () => ({ username: 'hello' }),
  actions: {
    IDLE: {
      login(state) {
        console.log(state.username); // 现在state类型自动推断为 { username: string }
      }
    }
  }
});

原理说明 #

1. 把state的返回类型抽成独立的顶层泛型参数S，让TypeScript能根据传入的state函数返回值自动推断S的具体类型。
2. 原代码中T extends { state: () => Record<string, any> }的约束会强制TypeScript将state的返回类型解析为宽泛的Record<string, any>，覆盖了更具体的字面量类型推断。
3. 如果之前尝试过泛型K但失败，大概率是因为没有将K作为createMachine的顶层泛型参数，而是在T内部定义，导致约束依然限制了类型推断。

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