如何将“| null”添加到界面的每个字段？

Question

我有一个这样的界面：

interface TrainingSession {
  date: string;
  topic: string;
}

我想创建一个表单，它将向我的 API 发送 /createTrainingSession 请求。在这种形式中，我想使用上面的接口来输入保存用户输入的数据结构。 喜欢：

const initialFormInput : TrainingSession = {
  date: null,
  topic: null
}

问题是，由于初始界面需要在两个字段中都有一个字符串，所以我无法在那里传递

null

。我想到的一种解决方案是使用

null

扩展接口，如下所示：

interface FormTrainingSession extends TrainingSession {
  date: string | null;
  topic: string | null;
}

但这有点烦人 - 从头开始重写接口只是为了添加 null？

我喜欢

Partial<TrainingSession>

的工作方式，但显然 Partial 将

| undefined

添加到每个字段，而不是我想要的 -

| null

。是否有一个相当于 Partial 的东西，它只是添加 |空？

Answer 1

有趣的是，如果您在 VS Code 中按住 CTRL 键并单击

Partial

（TS 本身包含的实用程序类型），您将看到以下内容：

/**
 * Make all properties in T optional
 */
type Partial<T> = {
    [P in keyof T]?: T[P];
};

受到上述启发......
要创建一个将

| null

添加到每个字段的泛型类型，只需执行以下操作：

export type PartialNull<T> = {
    [P in keyof T]: T[P] | null;
};

两者的区别是：

• ?

  中缺少

  PartialNull

  -

  ?

  将

  | undefiend

  附加到现有类型，从而使该字段成为可选 - 添加

  | null

  而不是

  ?

  。
• 类型名称（显然，因为 Partial 已经存在）

要使用新的 PartialNull 类型，请将其导入到要使用它的 .ts 文件中，然后写入

const formData : PartialNull<TrainingSession> = {
  date: null,
  name: null
}

Answer 2

我想我更喜欢 Nick Scialli 的这篇文章：

type Nullable<T> = { [K in keyof T]: T[K] | null };