TypeScript中接口差异及类型赋值相关问题咨询

嘿，我来帮你理清这两个接口的差异，还有你代码里需要留意的细节～先把你给出的代码清晰列出来：

// 基础接口定义
interface ISubstitution {
  id: number;
  name: string;
  date: string;
  subject: number;
  new: string;
  group: number;
  form: boolean;
}

// 你提到这个接口继承自ISubstitution，但当前代码里并没有用extends实现继承
interface ISubstitutionHot {
  new: string;
  group: number;
  form: boolean;
}

// 任意类型变量的断言赋值
public a: any;
a = <ISubstitution> { 
  id: 1, 
  name:"O", 
  date: "2018-01-1", 
  subject: "M", // 这里要注意：ISubstitution里subject是number类型，但你赋值了字符串，类型断言会掩盖这个问题
  new: "A", 
  group: 1, 
  form: true 
}

接下来分点拆解核心问题：

1. 接口属性的本质差异 #

按照你当前的代码写法（未继承），两个接口的属性范围完全不同：

• ISubstitution是全量属性接口，包含7个字段：id, name, date, subject, new, group, form
• ISubstitutionHot是子集属性接口，只包含3个和ISubstitution重叠的字段：new, group, form

如果你的本意是让ISubstitutionHot继承ISubstitution的所有属性，正确的写法应该是这样：

// 用extends实现继承，ISubstitutionHot会拥有ISubstitution的所有属性
interface ISubstitutionHot extends ISubstitution {
  // 这里可以添加ISubstitutionHot独有的属性，比如priority: number;
}

2. 类型断言里的隐藏坑 #

你用<ISubstitution>把对象断言后赋值给any类型的a，这里有个明显的类型不匹配：ISubstitution的subject定义的是number类型，但你赋值了字符串"M"。虽然类型断言会让TypeScript暂时不报错，但后续如果把a当作ISubstitution类型使用时，subject实际是字符串，很可能会引发逻辑错误，建议修正这个赋值类型。

3. 接口的兼容性规则 #

在TypeScript的结构类型系统里：

• 如果ISubstitutionHot不继承ISubstitution，那么**ISubstitution类型的对象可以直接赋值给ISubstitutionHot类型变量**（因为前者包含后者所有必需属性），但反过来不行。
• 如果ISubstitutionHot继承了ISubstitution，那么**ISubstitutionHot类型的对象可以赋值给ISubstitution类型变量**（子类兼容父类），反之则需要类型断言。

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