javascript - 通过逻辑运算符分配变量值的 typescript 仅使用后一种类型

给定以下类型

enum Modes {
  error,
  warning
}

type Notification = {
  title: string;
  text: string;
};

type CustomNotification = Notification & { mode: Modes };

interface Options {
  defaultNotification: Notification;
  customNotification?: CustomNotification;
}

我想将变量分配给customNotification（如果可用），否则分配给defaultNotification，因此我在分配中使用逻辑OR运算符，如下所示：

const notification = customNotification || notificationDefault;

那么我想根据mode的值（如果可用）有条件地执行逻辑。

if (notification.mode && notification.mode !== Modes.error) { /** code here */ }

但是，notification仅分配给类型Notification而不是CustomNotification | Notification，因此在尝试读取notification.mode值Property 'mode' does not exist on type 'Notification'.时，打字稿会引发错误。

我什至尝试将notification类型显式分配给CustomNotification | Notification，但这没有用。

我不明白为什么这行不通，我想知道是否有其他解决方法，而不是重构我的代码以使用两个变量？

最佳答案

主要问题是mode是Notification | CustomNotification联合的一个成员中不存在的字段。不允许检查mode字段中是否存在Notification对象，因为它没有这样的字段。在我的建议之下，如何处理您的问题。

解决方案一-默认模式下的类型统一

我会考虑在这里不使用双重类型，而是使用一种类型，并在Modes内引入一些中性元素，例如-default，当我们这样做时，所有类型问题都会消失，我们不需要执行任何类型断言或警卫。考虑：

enum Modes {
  error,
  warning,
  default, // neutral value
}

type Notification = {
  title: string;
  text: string;
  mode: Modes;
};

interface Options {
  defaultNotification: Notification;
  customNotification?: Notification;
}

// getting active notification helper
const getNotification = (options: Options): Notification => {
    return options.customNotification ?? options.defaultNotification;
}

// using
const notification = getNotification(options);
if (notification.mode !== Modes.error) { /** code here */ }

我们唯一需要做的就是将defaultNotification设置为mode等于Modes.defalut的对象。

解决方案二-模式为显式未定义字段

最终，如果您想使Modes保持当前形状，我们可以在mode中引入undefined字段作为defaultNotification字段。考虑以下几点：

type BaseNotification = {
  title: string;
  text: string;
};

type DefNotification = BaseNotification & { mode?: undefined } // pay attention here
type CustomNotification = BaseNotification & { mode: Modes }

type Notification = DefNotification | CustomNotification;

interface Options {
  defaultNotification: DefNotification;
  customNotification?: CustomNotification;
}

const getNotification = (options: Options): Notification => {
    return options.customNotification ?? options.defaultNotification;
}

这里的要点是{ mode?: undefined }，我们说DefNotification具有mode字段，但唯一可能的值是undefined。

关于javascript - 通过逻辑运算符分配变量值的 typescript 仅使用后一种类型，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59984200/