Question

我正在尝试让打字稿类型查询在类中工作。

通常，类型查询的工作方式如下：

const user = { name: "Patrick", age: 17 };
let typeofUser: typeof user;

在上面的示例中，“ typeofUser”的类型为：

{ name: string, age: number }

到目前为止，一切都很好。但是我试图让类型查询与类一起工作。例如：

class App {
  states = {
    menu: {
      login() {
        console.log("Menu.login");
      }
    },
    game: {
      update() {
        console.log("Game.update");
      }
    }
  };

  constructor() {
    // FAILS => Cannot find name "states"
    const typeofStates: typeof states = {};

    // FAILS => Cannot find name "states"
    const keyofStates: keyof states = "game";
  }
}

我的问题是：如何访问类成员进行类型查询，用“ typeof”还是“ keyof”运算符？

Typescript playground sample

Answer 1

感谢@cartant的评论。我自己回答了这个问题，因为他没有发表评论作为答案。

要类型查询类成员的类型，可以使用以下几种方法：

访问原型：
```
App.prototype.states
```
通过索引器访问它
```
App["states"]
```
要注意的重要一点是，当成员为私有或静态成员时，此方法和上面的方法可能不起作用。
这种类型的多态性

在Javascript中具有this的所有内容在typescript中均具有“ this type”。可以像其他所有索引类型一样查询此“ this”类型。
```
this["states"]
```
注意：尝试在其他上下文中调用函数时，使用此技术时可能会遇到问题。另外，您不能使用点运算符！您必须改为使用对象索引运算符

此类型查询与类继承结合使用非常有用

例如，如果要对Statemachine进行编程，则可以有一个抽象的“ Statemachine”类，并使用this-type-query获取子类中属性的类型

这可能看起来像这样：

abstract class Statemachine {
  /* The typescript compiler won't actually infer "object" but 
    {
       menu: { 
         login() => void
       },
       game: {
         update() => void 
       }
    }

    > In case of the example below! 
  */
  abstract states: object

  getState<K extends keyof this["states"]>(name: K): T[K] {
    return this.states[name];
  }
}

class Game extends Statemachine {
  private states = {
     menu: {
       login() {
         console.log("Menu.login")
       }
     },
     game: {
       update() {
         console.log("Game.update") }
      }
   }
}

const game = new Game()

// Compiler error
game.getState("not a key of game.states")

// Works and intellisense for login()
game.getState("menu")

参考：https://www.typescriptlang.org/docs/handbook/advanced-types.html 寻找多态的。

我希望代码实际上可以在假期中使用Im，并且没有机会对其进行检查...

类中的Typescript类型查询

1 个答案: