Angular 2项目中为TypeScript接口添加对象数组遇错误求助

嘿，刚接触Angular 2和TypeScript的话，这种类型定义的小坑确实容易踩～先给你理清楚错误原因，再给你两种符合需求的正确写法：

错误原因分析 #

你写的[emails:{email_address:string, email_type:string, }]:any;是错误的索引签名写法。TypeScript里的索引签名要求键的类型必须是string或number，你这里把一个对象类型直接放在了索引的位置，不符合语法规则，所以才会抛出那个错误。

正确写法方案 #

根据你想要“带类型的邮箱集合”的需求，分两种常见场景给你写示例：

场景1：邮箱是数组（支持多个同类型邮箱） #

这种情况最常用，比如一个人可能有多个工作邮箱或者个人邮箱，适合用数组存储：

首先定义单个邮箱的接口，明确每个邮箱的结构：

// 单个邮箱的接口
interface EmailItem {
  email_address: string;
  // 可以用字面量类型限制类型可选值，避免任意字符串
  email_type: 'personal' | 'work' | 'school' | 'other';
}

然后在主接口里用数组类型来声明邮箱集合，同时加上电话号码等其他属性：

// 包含联系方式的主接口
interface ContactInfo {
  // 如果电话号码也需要类型，也可以类似EmailItem定义PhoneItem接口
  phoneNumbers: string[];
  // 邮箱集合：EmailItem类型的数组
  emails: EmailItem[];
  // 其他你需要的属性...
}

使用的时候就可以这样写：

const myContact: ContactInfo = {
  phoneNumbers: ['138xxxx1234', '010-xxxxxxx'],
  emails: [
    { email_address: 'me@personal.com', email_type: 'personal' },
    { email_address: 'me@company.com', email_type: 'work' }
  ]
};

场景2：邮箱是键值对（每种类型对应一个邮箱） #

如果你的需求是“每种类型只能有一个邮箱”，比如个人、工作各一个，那可以用索引签名或者Record类型：

interface ContactInfo {
  phoneNumbers: string[];
  // 用索引签名：键是邮箱类型（string），值是邮箱地址
  emails: {
    [type: string]: string;
    // 或者用Record限制可选类型：
    // Record<'personal' | 'work', string>
  };
}

使用示例：

const myContact: ContactInfo = {
  phoneNumbers: ['138xxxx1234'],
  emails: {
    personal: 'me@personal.com',
    work: 'me@company.com'
  }
};

总结 #

你原来的写法混淆了“属性声明”和“索引签名”的语法，只要明确单个数据结构，再用数组或索引对象来组织集合，就能解决这个问题啦～

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