六个 TypeScript 实用函数-51CTO.COM

TypeScript 是 JavaScript 的超集，它为该语言添加了静态类型和其他功能。TypeScript 最强大的功能之一是它对实用函数的支持，它允许开发人员以强大的方式操作类型。

在本文中，我们将分享6个开发者必须知道的 TypeScript 实用函数，并为每个函数提供示例和解释。

01、Partial<T>

Partial函数允许您通过将原始类型 T 的所有属性设为可选来创建新类型。当您有一个具有许多属性的复杂类型时，这会很有用，但您只需要在特定的上下文中提供其中的一些。

例如，假设您有一个具有多个必需属性的 Person 接口：

interface Person {
  firstName: string;
  lastName: string;
  age: number;
  address: Address;
}


interface Address {
  street: string;
  city: string;
  state: string;
  zip: string;
}

如果你想创建一个新类型，它具有与 Person 相同的属性，但所有属性都是可选的，你可以像这样使用 Partial 效用函数：

type PartialPerson = Partial<Person>;

现在您可以创建一个 PartialPerson 类型的变量，并且只提供您需要的属性：

const partialPerson: PartialPerson = {
  firstName: 'John',
  lastName: 'Doe'
};

02、Required<T>

Required 实用程序函数通过使原始类型 T 的所有属性成为必需来创建新类型。当您有一个带有可选属性的类型，但您希望确保在特定上下文中提供所有属性时，这可能很有用。

继续前面示例中的 Person 接口，假设您要创建一个新类型，该类型具有 Person 所需的所有属性。您可以像这样使用 Required 实用程序函数：

type RequiredPerson = Required<Person>;

现在您可以创建 RequiredPerson 类型的变量并确保提供所有属性：

const requiredPerson: RequiredPerson = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  }
};

03、Readonly<T>

Readonly 实用程序函数通过将原始类型 T 的所有属性设置为只读来创建新类型。当您有一个在创建后不应修改的类型时，这会很有用。

例如，假设您有一个具有多个属性的用户界面：

interface User {
  id: number;
  username: string;
  email: string;
  password: string;
}

如果你想创建一个新类型，它具有与 User 相同的属性，但所有属性都是只读的，你可以像这样使用 Readonly 实用函数：

type ReadonlyUser = Readonly<User>;

现在你可以创建一个 ReadonlyUser 类型的变量，并确保它的任何属性都不能被修改：

const user: ReadonlyUser = {
  id: 1,
  username: 'johndoe',
  email: 'john.doe@example.com',
  password: 'password123'
};


user.id = 2; // Error: Cannot assign to 'id' because it is a read-only property.

04、Record<K, T>

Record 实用程序函数通过将类型 K 的键映射到类型 T 的值来创建新类型。当您要创建表示具有特定键的一组值的类型时，这会很有用。

例如，假设您有一组要表示为对象的错误代码，其中键是错误代码，值是错误消息：

type ErrorCode = 'E001' | 'E002' | 'E003';


type ErrorMessages = Record<ErrorCode, string>;


const errorMessages: ErrorMessages = {
  E001: 'An error occurred.',
  E002: 'Another error occurred.',
  E003: 'Yet another error occurred.'
};

现在您可以通过相应的错误代码访问错误消息：

const errorMessage = errorMessages['E001']; // 'An error occurred.'

05、Exclude<T, U>

Exclude 实用程序函数通过从类型 T 中排除联合 U 中的所有类型来创建新类型。这在您想要定义仅包含某些类型的类型时非常有用。

例如，假设您的 Color 类型包含多个可能的颜色值：

type Color = 'red' | 'green' | 'blue' | 'yellow';

如果你想定义一个排除某些颜色值的类型，你可以像这样使用 Exclude 实用函数：

type PrimaryColor = Exclude<Color, 'green' | 'purple'>;

现在您可以创建一个 PrimaryColor 类型的变量并确保它只包含原色：

const primaryColor: PrimaryColor = 'red'; // OK
const secondaryColor: PrimaryColor = 'green'; // Error: Type 'green' is not assignable to type 'PrimaryColor'.

06、Omit<T, K>

Omit 实用程序函数通过从原始类型 T 中省略指定的属性 K 来创建新类型。当您有一个具有许多属性的类型，但您想创建一个没有某些属性的新类型时，这会很有用。

例如，假设您有一个具有多个属性的用户界面：

interface User {
  id: number;
  username: string;
  email: string;
  password: string;
}

如果你想创建一个新的类型，它具有除密码之外的用户的所有属性，你可以使用 Omit 实用函数，如下所示：

type UserWithoutPassword = Omit<User, 'password'>;

现在您可以创建一个 UserWithoutPassword 类型的变量，而无需提供密码属性：

const userWithoutPassword: UserWithoutPassword = {
  id: 1,
  username: 'johndoe',
  email: 'john.doe@example.com',
};

总之，TypeScript 实用程序函数是开发人员的强大工具，允许更灵活和可重用的代码。

通过有效地理解和使用这些实用函数，开发人员可以创建更健壮和可维护的 TypeScript 代码。这些功能只是 TypeScript 语言的一小部分，但它们会对您的代码质量和开发团队的工作效率产生重大影响。