一文读懂TypeScript泛型工具类型-Required<T>

1. 定义

在 TypeScript 中，泛型工具类型 Required<T> 主要用于将类型T中的所有属性变为必选属性。

和泛型工具类型 Partial<T> 相反，Partial<T>是将类型 T 中的所有属性变为可选属性。

2. 源码

typescript 复制代码

type Required<T> = {
  [P in keyof T]-?: T[P];
};

实现原理：

上面这段代码中，使用 type 关键字来定义 Required<T> 类型，它接收一个类型参数 T。
然后，使用映射类型的语法 { [P in keyof T]-? } 来创建一个新的类型，这里的 keyof T 表示的是：获取类型 T 的所有属性名组成的联合类型。[P in keyof T] 表示的是：遍历 K 中的每个键，并将其作为属性名，T[P] 表示的是：获取 T 中每个键对应的类型。
最后在属性名后的 ? 前加上 -，表示去掉所有可选参数状态，将属性变为必选属性。

下面我们先看下 Required<T> 的基本用法：

typescript 复制代码

type Person = {
  name?: string;
  age?: number;
}

type RequiredPerson = Required<Person>;

上面这段代码中，我们定义了一个类型 Person，它包含了可选属性 name 和 age。通过将 Person 传递给Required<T>，我们得到了新的类型 RequiredPerson，它将 Person 类型中的所有属性都变为必选属性。

使用 Required<Person> 创建的新类型 RequiredPerson，等同于下面的这段代码：

typescript 复制代码

type RequiredPerson = {
  name: string;
  age: number;
}

那么在新类型 RequiredPerson 中，我们就需要给 name 和 age 提供有效的值。

typescript 复制代码

const person: RequiredPerson = {
  name: "Echo",
  age: 26
}

新类型中，属性的类型要与原始对象的属性类型一致，下面这种情况会报错：

3. 使用场景

3.1. 表单验证

当你需要对表单数据进行验证时，可以使用 Required<T> 来确保所有必填字段都是有效的。

typescript 复制代码

interface LoginForm {
  username?: string;
  password?: string;
}

function validateLoginForm(loginForm: Required<LoginForm>): void {
  // 在这里对表单进行验证，确保必需字段都存在有效值
  if (!loginForm.username) {
    console.log("请填写用户名");
  } else if (!loginForm.password) {
    console.log("请填写密码");
  } else {
    console.log("表单验证通过");
  }
}

// 调用 validateLoginForm
validateLoginForm({
  username: "Echo",
  password: "admin123",
});

3.2. API 请求和响应

在发送 API 请求或解析响应数据时，你可以使用 Required<T> 来指定所需的属性，并确保响应数据包含了这些属性。

typescript 复制代码

interface APIResponse {
  data?: {
    id?: number;
    name?: string;
    email?: string;
  };
  code?: number;
  message?: string;
}

// 使用 Required<T> 来指定 API 响应中必需的字段
type RequiredAPIResponse = Required<APIResponse>;

// 模拟 API 请求返回的数据
const responseData: RequiredAPIResponse = {
  data: {
    id: 1,
    name: "Echo",
    email: "[email protected]",
  },
  code: 0,
  message: "OK",
};

// 使用 API 响应对象
if (responseData.code !== 0) {
  console.log("API 请求失败");
} else {
  console.log("API 请求成功", responseData.data);
}

4. 注意事项

需要注意的是：Required<T> 只能应用于对象类型，而不能应用于基本类型。

总结

以上就是我对 TypeScript 中泛型工具类型 Required<T> 的了解，如果有不正确的地方，欢迎大家在评论区多多指正！

看完记得点个赞哦~ 谢谢！🤞🤞🤞