TypeScript 中的自引用类型

Question

我目前在 Vue.js 应用程序中有一个类似于以下内容的对象，我正在尝试将其移植到 TypeScript。请注意，此对象的结构由 Vuex library:

决定

const getters = {
  allUsers(state) {
    return state.users;
  },
  firstUser(_state, getters) {
    return getters.allUsers()[0]
  }
}

如何在 firstUser 中为此处的 getter 提供适当的类型？

const getters = {
  allUsers(state: State) {
    return state.users;
  },
  firstUser(_state: State, getters: typeof getters) {
    return getters.allUsers()[0]
  }
}

目前我收到以下错误：

[ts] 'getters' is referenced directly or indirectly in its own type annotation.

更新：@basarat 确定您可以通过重命名参数来消除该错误。

const getters = {
  allUsers(state: State) {
    return state.users;
  },
  firstUser(_state: State, theGetters: typeof getters) {
    return theGetters.allUsers()[0]
  }
}

然而，typeof getters 最终成为 any 而不是 getters 对象的类型。

Answer 1

[ts] 'getters' is referenced directly or indirectly in its own type annotation.

范围内有两个 getter。参数和变量。换一个。

固定

const getters = {
  allUsers(state: State) {
    return state.users;
  },
  firstUser(_state: State, _getters: typeof getters) { // Rename
    return _getters.allUsers()[0]
  }
}

更多

还有其他错误，但这是您需要帮助的错误。

Answer 2

我真的不明白为什么你需要getters这样做，但我假设你知道你在做什么。

这是 TypeScript 编译器的一个限制：它会意识到 getters 的类型是递归的，并赋予它一个 any 类型。解决这个问题的唯一方法是为 getters 指定一个类型名称并使用它。 class 怎么样？

class Getters {
  allUsers(state: State) {
    return state.users;
  }
  firstUser(_state: State, theGetters: Getters) {
    return theGetters.allUsers()[0]; // hey, a bug!
  }
}
const getters = new Getters();

现在输入正确，甚至向您展示了 firstUser 实现中的一个错误（我猜您是通过将 _state 传递给 allUsers() 来修复的）。

希望对您有所帮助。祝你好运。

TypeScript 中的自引用类型

Self-referential Type in TypeScript

typescript

vue.js

vuex

固定

更多