如何在Vue模板中为来自Apollo的数据启用Typescript键入（VS代码）

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']
  

Code on GitHub