如何在 Vue 模板中为来自 Apollo (VS Code) 的数据启用 Typescript

Question

• 使用 TS 通过 Vue Cli 创建了一个应用程序。
• 添加了 Apollo (vue-cli-plugin-apollo) 和示例（服务器和客户端）。

• 通过方案和查询它生成了一个接口

  src/graphql/types/files.ts：

  export interface files_files {
    __typename: "File";
    id: string;
    path: string;
    filename: string;
    mimetype: string;
    encoding: string;
  }
  
  export interface files {
    files: (files_files | null)[] | null;
  }
  

• src/components/ApolloExample.vue:

  <template>
  ...
    <div
      v-for="file of files"
      :key="file.id"
      class="image-item"
    >
  ...
  </template>
  ...
  <script lang="ts">
  import Vue from 'vue';
  
  import FILES from '../graphql/Files.gql';
  import { files_files as IFile, files as IFiles } from @/graphql/types/files';
  
  export default Vue.extend({
    data() {
      return {
        files: [] as IFile[] // its OK to typing {{file.id}} in template
      };
    },
  
    apollo: {
      files: () => FILES,
    }
  ...
  

  但我想设置类似的类型

   files: [] as IFiles['files']
  

GitHub 上的代码