TS7053：元素隱式具有“任何”類型，因為類型“字符串”的表達式不能用於索引類型“對象”

Question

我嘗試直接使用 templateDrivenForm 發布數據並從 fireBase 獲取數據，但顯示以下類型錯誤。

我的部分代碼

//directly posts datas using submitButton from templateDrivenForm
 onCreatePosts(postDatas:{title:string, content:string}){
this.http.post('https://ng-complete-guide-b3d7f-default-rtdb.firebaseio.com/posts.json',
 postDatas)
.subscribe(
 responseData => {
  console.log(responseData);
 });
 }

 //get datas from database
   private fetchPost(){
     return this.http.get('https://ng-complete-guide-b3d7f-default-rtdb.firebaseio.com/posts.json')
   .pipe(map(responseData =>  {
     const dataArray = [];
    for(let key in responseData){
    if(responseData.hasOwnProperty(key)){
    dataArray.push({...responseData[key], id:key});
    }
  }
  return dataArray;
 }))
  .subscribe( responseData => {
  console.log(responseData)
 })
}

我的錯誤是

     Error: src/app/app.component.ts:40:28 - error TS7053: Element implicitly has an 'any' type 
      because 
     expression of type 'string' can't be used to index type 'Object'.
      No index signature with a parameter of type 'string' was found on type 'Object'.

     40         dataArray.push({...responseData[key], id:key});

Answer 1

解決方案

      private fetchPost(){
      return this.http.get('https://ng-complete-guide-b3d7f-default- 
      rtdb.firebaseio.com/posts.json')
    .pipe(map((responseData:{[data:number]:any}) =>  {
     const dataArray = [];
     for(let key in responseData){
  if(responseData.hasOwnProperty(key)){
    dataArray.push({...responseData[key], id:key});
  }
  }
    return dataArray;
  }))
 .subscribe( responseData => {
  console.log(responseData)
 })
 }

 .pipe(map((responseData:{[data:number]:any}) //object type

Answer 2

Firebase嵌套object可以在map function中轉換為這種數據類型：
響應數據：{[key:string]:any}

private fetchPosts() {
   this.http
     .get('https://ng-complete-guide-b3d7f-default- 
     rtdb.firebaseio.com/posts.json')
     .pipe(map(
       (responseData:{[key:string]:any}) => {
       const dataArray = [];
       for (const key in responseData) {
         if(responseData.hasOwnProperty(key)){
           dataArray.push({ ...responseData[key], id:key})
         }
       }
       return dataArray;
     }))
     .subscribe(posts => {
       console.log(posts);
     });
 }

我同意我們應該盡可能避免使用“any”。 如果您發現更准確的類型可與最新的 Angular 版本編譯，請分享！