TypeScript如何定义含特定对象属性与字符串索引类型的接口

报错原因 #

当你在接口内直接定义字符串索引签名时，TypeScript 要求接口内所有明确声明的属性值类型，必须和索引签名的返回类型兼容。你最初的写法中，索引签名要求所有字符串键的值为string，但billingAddress的值是对象类型，二者不兼容，因此抛出类型错误。

实现方案 #

方案1：严格类型推导（推荐） #

使用交叉类型合并明确属性定义和通用字符串索引，TS 会自动识别显式声明的billingAddress类型，其余键严格约束为string，访问时不需要额外做类型收窄：

// 可单独定义账单地址类型，方便复用扩展
interface BillingAddress {
  foo: string;
  // 可按需添加其他字段，比如street、city、postalCode等
}

type CustomForm = {
  billingAddress?: BillingAddress;
} & Record<string, string>;

使用时的类型校验效果：

const form: CustomForm = {
  // 正确：billingAddress符合定义的对象结构
  billingAddress: {
    foo: "bar"
  },
  // 正确：其余键值为string
  username: "test",
  phone: "13xxxxxxxxx"
};

// 报错：billingAddress不能赋值为字符串
form.billingAddress = "invalid value";
// 报错：其余键不能赋值为非string类型
form.age = 18;

// 类型推导正确：form.billingAddress 为 BillingAddress | undefined
// 类型推导正确：form.username 为 string

方案2：接口内联合类型索引（不推荐） #

直接在接口的索引签名中包含所有可能的值类型，这种写法可以通过类型校验，但访问任意自定义键时，TS 会推导值为所有类型的联合，需要手动收窄类型才能使用，开发体验较差：

interface LessStrictType {
  [key: string]: string | { foo: string } | undefined;
  billingAddress?: {
    foo: string;
  };
}

// 访问自定义键时类型为联合类型，需要手动判断
const test: LessStrictType = { otherKey: "123" };
// 报错：不能直接调用string方法，因为值可能是对象
test.otherKey.toUpperCase();
// 需要手动收窄
if (typeof test.otherKey === "string") {
  test.otherKey.toUpperCase();
}

注意事项 #

不要在同一个interface块内直接声明与索引签名类型不兼容的明确属性，这是TS接口的硬性校验规则，交叉类型的方案可以绕过这个限制，是因为TS合并交叉类型时，会优先使用显式声明的键的类型定义。

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