TypeScript ts(2416)错误：类实现接口时类型不兼容如何解决

问题背景 #

先看简化后的类型与接口定义：

type MyOwnColorType = "red" | "blue";

interface Title {
  id: string;
  color: MyOwnColorType;
}

export interface Example {
  title: Title;
}

当尝试创建类实现Example接口时，会抛出ts(2416)错误：

class JustAExample implements Example {  
  title = {
    id: "value",
    color: "red",
  }
}

用单个字段的类型断言能临时解决，但会绕过部分类型检查：

class JustAExample implements Example {  
  title = {
    id: "value",
    color: "red" as MyOwnColorType,
  }
}

虽然给id传入数字时会触发类型错误（说明基础检查生效），但不清楚如何让字面量对象的color字段自动符合MyOwnColorType类型，同时不依赖这种局部断言。

解决方案 #

以下几种方法可以在保留完整类型检查的前提下解决问题：

1. 给title属性显式声明类型

直接指定title的类型为Title，TypeScript会自动校验字面量是否符合约束：

class JustAExample implements Example {  
  title: Title = {
    id: "value",
    color: "red",
  }
}

2. 给整个字面量对象指定类型

给字面量对象整体断言为Title，这种方式是明确对象的类型边界，而非绕过检查：

class JustAExample implements Example {  
  title = {
    id: "value",
    color: "red",
  } as Title;
}

3. 使用const断言保留字面量精确类型

TypeScript默认会把字符串字面量拓宽为string类型，使用const断言可以让TypeScript保留字面量的精确类型，从而匹配MyOwnColorType的联合类型约束：

class JustAExample implements Example {  
  title = {
    id: "value",
    color: "red",
  } as const;
}

原理说明 #

出现ts(2416)错误的核心原因是：TypeScript会自动将对象字面量中的字符串值"red"拓宽为string类型，而Title接口要求color是"red" | "blue"的字面量联合类型，string的范围远大于该联合类型，因此不符合接口要求。上述三种方法都是通过明确类型范围、避免自动拓宽，让字面量对象符合接口的类型约束。

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