TypeScript中for-of循环如何为API返回数组项声明类型？

你的问题根源在于：给mapToMoviesXML函数的参数设置了最终转换后的Movie[]类型，但API返回的数组项本身是包含movie和details属性的对象，和Movie的结构完全不一致，所以TypeScript会报错提示属性不存在。

具体解决步骤 #

1. 声明API返回的原始数据类型
   针对API返回的每个数组项，定义匹配实际返回结构的类型，示例如下：

   // 请根据API实际返回的字段调整movie和details的内部结构
   type ApiMovieResponseItem = {
     movie: {
       title: string;
       director: string;
     };
     details: {
       year: string;
     };
   };
   

2. 修改函数参数类型
   将mapToMoviesXML的参数类型从Movie[]改为ApiMovieResponseItem[]，这样遍历访问item.movie和item.details就不会触发类型错误：

   export type Movie = {
     title: string;
     director: string;
     year: string;
   };
   
   type ApiMovieResponseItem = {
     movie: { title: string; director: string };
     details: { year: string };
   };
   
   function mapToMoviesXML(apiData: ApiMovieResponseItem[]): string {
     let xmlContent = '<movies>';
     for (const item of apiData) {
       // 从原始数据提取字段，转换为Movie类型
       const convertedMovie: Movie = {
         title: item.movie.title,
         director: item.movie.director,
         year: item.details.year
       };
       // 拼接XML内容
       xmlContent += `
         <movie>
           <title>${convertedMovie.title}</title>
           <director>${convertedMovie.director}</director>
           <year>${convertedMovie.year}</year>
         </movie>
       `;
     }
     xmlContent += '</movies>';
     return xmlContent;
   }
   

3. 临时过渡方案（不推荐长期使用）
   如果暂时不确定API返回的完整结构，可以用unknown类型临时规避报错，后续再补充准确类型：

   function mapToMoviesXML(apiData: Array<{ movie: unknown; details: unknown }>): string {
     let xmlContent = '<movies>';
     for (const item of apiData) {
       // 通过类型断言访问属性
       const movieData = item.movie as { title: string; director: string };
       const detailData = item.details as { year: string };
       const convertedMovie: Movie = {
         title: movieData.title,
         director: movieData.director,
         year: detailData.year
       };
       // 后续XML处理逻辑
       xmlContent += `
         <movie>
           <title>${convertedMovie.title}</title>
           <director>${convertedMovie.director}</director>
           <year>${convertedMovie.year}</year>
         </movie>
       `;
     }
     xmlContent += '</movies>';
     return xmlContent;
   }
   

关键提醒 #

TypeScript的类型检查针对的是当前变量的结构，而非最终转换后的结果。即使你能从原始数据中提取出Movie类型的数据，也必须给函数参数设置原始输入数据的准确类型，才能通过类型检查。

内容的提问来源于stack exchange，提问作者user6248190