Angular 2 Provider返回数组报错求助：计算属性名类型错误

刚接触Angular踩TypeScript的类型坑太正常啦，我帮你一步步排查解决这个问题！

先看你贴的代码片段，问题根源就在states:{};这一行的类型声明上——你说想要返回数组，但这里把states声明成了空对象类型，后续只要你尝试对它做数组相关的操作（比如用数字索引访问、赋值数组），TypeScript就会抛出这个"计算属性名类型不匹配"的错误。

下面是具体的修复方案和完整示例：

1. 修正states的类型定义 #

既然目标是存储数组，直接明确数组类型就好：

• 如果是字符串数组：

  states: string[] = [];
  

• 如果是自定义的州信息对象数组，建议先定义接口再声明（更规范，TypeScript能帮你做类型校验）：

  // 定义州的结构接口
  interface State {
    id: number;
    name: string;
    // 其他你需要的字段
  }
  
  states: State[] = [];
  

2. 补全Provider的完整逻辑（示例） #

给你写一个完整的Provider示例，包含从HTTP加载数据并返回数组的逻辑：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

// 自定义州数据的接口
interface State {
  id: number;
  name: string;
}

@Injectable()
export class StatesProvider {
  // 明确声明为数组类型，初始化为空数组
  private states: State[] = [];

  constructor(public http: Http) {
    console.log('StatesProvider initialized');
    // 初始化时加载州数据
    this.loadStates();
  }

  // 从API加载数据
  private loadStates() {
    return this.http.get('你的API地址/states')
      .map(response => response.json())
      .subscribe((data: State[]) => {
        this.states = data;
      });
  }

  // 给外部提供获取数组的方法
  getStates(): State[] {
    return [...this.states]; // 返回数组副本，避免外部直接修改内部状态
  }
}

错误原因说明 #

当你把states声明为{}（空对象类型）时，TypeScript会认为它只能拥有字符串、数字或符号类型的键。但数组的索引是数字，而且数组本身的类型和对象类型不兼容，所以当你尝试把数组赋值给它，或者用数组的方式访问时，TypeScript就会判定这是"计算属性名"的类型不匹配，抛出你看到的错误。

小提示 #

• 尽量避免使用模糊的{}或者any类型，明确类型不仅能提前发现错误，还能让代码更易维护
• 如果你的Angular版本是4.3及以上，推荐使用HttpClient替代旧的Http，它会自动解析JSON响应，不用手动写map(response => response.json())

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