在这个内容列表页面组件的脚本标签上面，添加一个 lang 属性，值设置成 ts，表示脚本用的语言是 TypeScript。

在项目里新建一个文件，放在 types 目录的下面，名字是 post.type.ts，在这个文件里定义并导出几个类型，定义并导出一个类型，名字是 PostFile，表示内容相关的文件，这个类型里面添加一个 id，类型是 number。

然后再定义导出一个类型，名字是 PostUser，它是内容的作者，里面添加一个 id，类型是 number，一个 name 类型是 string。

export 一个 类型，名字是 Post，用它描述一下内容列表里的单个内容数据，里面添加一个 id，类型是 number，一个 title ，类型是 string，一个 content，类型是 string，再添加一个 file ，类型设置成 PostFile，然后是 user，类型设置成 PostUser。

最后再定义导出一个类型，名字叫 PostList 表示内容列表，它是一个 Array，也就是数组，数组项目里的类型是 Post。

useApiFetch

打开 useApiFetch，改造一下这个组合，给它添加一个类型参数，名字是 T，在这个函数里使用的这个 useFetch 也支持类型参数，把这个类型 T 交给 useFetch 的类型参数。

内容列表

回到内容列表组件，这里在使用 useApiFetch 的时候，设置一下它的类型参数，设置成 PostList，这样它返回的数据里的这个 data 的类型就会是 Ref。

把鼠标放在组件模板里的这个循环里的 post 上面，会显示它的类型是 Post ，这样在模板里使用 post 这个数据的时候，编辑器就知道它里面都有什么东西了。输入 post. 的时候，就会提示这个数据里的可用的一些属性，比如这里提示有 id，title 还有 content 这些东西。这些就是我们在 post.type 这个文件里定义的 Post 这个类型。