TypeScript 的 Pick 关键字

举报
汪子熙 发表于 2025/03/01 11:00:35 2025/03/01
【摘要】 这段代码定义了一个名为 NgSetupOptions 的 TypeScript 类型。它通过组合 MoonEngineRenderOptions 和 MoonEngineOptions 两个接口的一部分来创建一个新的类型。具体来说,NgSetupOptions 通过 Pick 关键字从 MoonEngineRenderOptions 中挑选出 ‘providers’, ‘publicPath...

这段代码定义了一个名为 NgSetupOptions 的 TypeScript 类型。它通过组合 MoonEngineRenderOptionsMoonEngineOptions 两个接口的一部分来创建一个新的类型。

具体来说,NgSetupOptions 通过 Pick 关键字从 MoonEngineRenderOptions 中挑选出 ‘providers’, ‘publicPath’, 以及 ‘inlineCriticalCss’ 三个属性,并将这些属性与 MoonEngineOptions 的所有属性组合在一起。 这样定义的 NgSetupOptions 类型包含了 MoonEngineOptions 中定义的全部属性以及 MoonEngineRenderOptions 中的 ‘providers’, ‘publicPath’, 和 ‘inlineCriticalCss’ 三个属性。

export type NgSetupOptions = Pick<
  MoonEngineRenderOptions,
  'providers' | 'publicPath' | 'inlineCriticalCss'
> &
  MoonEngineOptions;

那么,定义一个新的类型时,为什么会用到 Pick 操作呢?Pick 是 TypeScript 中一种常见的内置工具类型,用于从一个类型中挑选一组指定的属性,创建一个新类型。它的定义如下:

type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

Pick 允许你选择类型 T 中的子集,这样可以使代码更加清晰和精确。例如,如果某一段逻辑只需要对象中的一部分属性,就可以使用 Pick 来创建一个只包含那部分属性的新类型。

为了更好地理解这段代码的意义,可以想象 MoonEngineRenderOptionsMoonEngineOptions 是某个应用的配置类型,可能长这样:

interface MoonEngineRenderOptions {
  providers: any[];  // 依赖注入的提供者数组
  publicPath: string; // 静态文件的公共路径
  inlineCriticalCss: boolean; // 是否内联关键 CSS
  otherOption1: number;
  otherOption2: string;
}

interface MoonEngineOptions {
  cache: boolean; // 是否启用缓存
  timeout: number; // 超时时间
  debug: boolean; // 是否开启调试模式
  anotherOption: string;
}

NgSetupOptions 类型将 MoonEngineOptions 的所有属性(例如,cache, timeout, debug 等)和 MoonEngineRenderOptions 中的 ‘providers’, ‘publicPath’, ‘inlineCriticalCss’ 属性结合在一起,创建一个新的类型。

考虑到这一点,NgSetupOptions 可能在某个框架的配置过程中使用。举个例子,假设有一个函数 setupEngine,它接收 NgSetupOptions 类型的参数:

function setupEngine(options: NgSetupOptions) {
  // 使用 options 启动引擎
  console.log(options.providers);
  console.log(options.publicPath);
  console.log(options.inlineCriticalCss);

  // 使用 MoonEngineOptions 的属性
  console.log(options.cache);
  console.log(options.timeout);
  console.log(options.debug);
}

你可以这样调用这个函数:

const options: NgSetupOptions = {
  providers: [{ provide: 'example', useValue: 'test' }],
  publicPath: '/assets',
  inlineCriticalCss: true,
  cache: false,
  timeout: 1000,
  debug: true,
};

setupEngine(options);

在这个例子中, setupEngine 函数接收的参数融合了两个不同的类型定义,确保了在使用 NgSetupOptions 时,既可以访问 MoonEngineRenderOptions 中挑选出的特定属性,又能访问 MoonEngineOptions 中的所有属性。

使用类型组合和选取的方式可以让代码更灵活、更易读并且方便维护。这样可以避免重复定义相似的类型,也让代码看起来结构更清晰。另外,当需要添加或更改配置时,只需要修改一处定义即可,减少了错误的可能性。

TypeScript 提供了强大的类型系统,可以让我们在编写代码的时候利用类型来确保代码的正确性。当使用 Pick, Partial, Required, Readonly, Record 等工具类型时,可以帮助我们进行类型的转换和约束,增强代码的可维护性和可读性。

对于一个复杂的应用来说,把类型分开并组合在一起使用是非常常见的做法。这不仅让代码更加模块化和可重用,还可以确保在某些地方只需使用必要的属性,而不是整个对象。这对于代码的健壮性和性能优化是非常有帮助的。

在实际编程过程中, Pick 类型可以帮助我们简化代码。例如,在 Angular 项目中,假设我们有一个巨大的配置对象,但是很多地方只需要使用其中的一部分。通过 Pick 创建仅包含需要属性的新类型,我们可以减少不必要的代码依赖,使代码更加简洁和高效:

interface FullConfig {
  apiUrl: string;
  apiKey: string;
  featureFlag: boolean;
  logLevel: string;
  retryCount: number;
  timeout: number;
}

type ApiConfig = Pick<FullConfig, 'apiUrl' | 'apiKey' | 'timeout'>;

function initializeApi(config: ApiConfig) {
  console.log(config.apiUrl);
  console.log(config.apiKey);
  console.log(config.timeout);
}

在这个例子中, initializeApi 只需要 FullConfig 中的 apiUrl, apiKeytimeout 属性,通过 Pick 创建新类型 ApiConfig 后,可以使 initializeApi 函数接口更加清晰,使用更方便。

TypeScript 的类型操作不仅帮助我们编写更可维护、更健壮的代码,还大大提升了开发效率。灵活运用各种工具类型,比如 Pick, Partial, 則可以高效、精准地表达我们的编码意图,减少错误,提高代码质量。

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。