Question

我有一个类似这样的组件：

interface Data {
  currentDirectory: string;
}

@Component({
})
export default class TileMemory extends Vue {

  public data(): Data {
    return {
      currentDirectory: '/',
    };
  }

  public clearDirectory() {
    this.$data.currentDirectory = '';
  }
}

这似乎可行，但是this.$data.currentDirectory的类型为any，而不是string，即使我注释了data()的返回类型。我已经尝试了各种方法-将data()放在@Component({})中（应该放在哪里？似乎没人知道），而是使用this.currentDirectory（不编译）。

是否有一种方法可以获取data对象的正确类型？

Answer 1

请注意，$data是Record<string, any>，因此其属性值将始终为any类型。

假设您正在使用vue-class-component（Vue CLI项目中的默认设置），则无需声明data()方法。您可以像这样简单地declare initial data as class properties：

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class TileMemory extends Vue {
  currentDirectory = '/'

  public clearDirectory() {
    this.currentDirectory = ''
  }
}

如果出于某种原因，您更喜欢在data()接口上使用Data方法，则可以使用type assertions实现类型安全：

export default class TileMemory extends Vue {
  //...

  public clearDirectory() {
    (this.$data as Data).currentDirectory = ''
  }
}

...或使用吸气剂（如果您经常使用，则很方便）：

export default class TileMemory extends Vue {
  //...

  get $$data() {
    return this.$data as Data
  }

  public clearDirectory() {
    this.$$data.currentDirectory = ''
  }
}

Answer 2

尝试将函数数据更改为计算所得的属性，如下所示：

interface Data {
  currentDirectory: string;
}

@Component({
})
export default class TileMemory extends Vue {

  get data(): Data {
    return {
      currentDirectory: '/',
    };
  }

  public clearDirectory() {
    this.data.currentDirectory = '';
  }
}

如何使用基于类的Vue组件获取键入的$ data

2 个答案: