如何将 Pick 属性设为 Partial答案

【问题标题】：How to make a Pick property Partial如何将 Pick 属性设为 Partial
【发布时间】：2019-02-25 12:36:57
【问题描述】：

我有这个功能

function someThing(someArg: Pick<HTMLElement, 'id' | 'style'>) {...}

但是，我只想为someArg.style 添加一些样式，而不是CSSStyleDeclaration 中的所有样式。否则函数的输入会很大。

所以我希望有类似Pick 来自Partial<CSSStyleDeclaration> 而不是Pick 来自CSSStyleDeclaration 的东西

我该怎么做？

【问题讨论】：

所以如果 Picked 属性是对象类型，您是否希望它们是部分的？具有映射类型的条件类型可以很好地用于type PartialProps<T> = { [P in keyof T]: T[P] extends object ? Partial<T[P]> : T[P] } 并使用它PartialProps< Pick<HTMLElement, 'id' | 'style'>>
Pick<Partial<CSSStyleDeclaration>, 'color'> 不能满足您的需求吗？
非常好的方法@TitianCernicova-Dragomir。正是我想要的

标签： typescript typescript-partial

【解决方案1】：

由于您的类型比Pick现有类型的一些属性更复杂，您可能希望在其自己的界面中将其拼写出来：

interface SomeArg {
  id: HTMLElement['id'],
  style: Partial<HTMLElement['style']>
}

function someThing(someArg: SomeArg) { }

someThing({id: "id", style: {
  zIndex: "1"
}})

我使用lookup types 来表明id 和style 属性与HTMLElement 中的属性相关，但您可以只使用string 和Partial<CSSStyleDeclaration>。

如果您确实需要使用类似Pick 的东西，它允许子属性为Partial，您可以使用mapped type 来执行此操作，但我无法从您的问题中判断您是否需要程序化的东西。

更新

我猜你确实希望它是程序化的（尽管我自己不会打扰两个属性）所以这里有一种定义 PickPartial 的方法，这样你就可以从 Partial 属性而不是属性本身中进行选择.我假设你不需要它是递归的（你不需要每个子属性本身都是Partial）：

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

function someThing(someArg: PickPartial<HTMLElement, 'id'|'style'>) { }
someThing({id: "1", style: {
  zIndex: "1"
}})

请注意，虽然这在技术上使id 成为Partial<string> 类型，但这很好，因为映射类型不会修改原语。Partial<string> 只是string。所以someArg的类型和我上面说的SomeArg接口是一样的。

希望对您有所帮助。祝你好运！

【讨论】：

这是实现它的正确方法，但我不想重复 id 或 style 键。我会从@TitianCernicova-Dragomir 中选择解决方案——创建一个新类型PartialProps<T> = { [P in keyof T]: T[P] extends object ? Partial<T[P]> : T[P] }
如果您想将该版本添加到您的答案中，我不介意，我不打算添加答案
您甚至不需要区分 object 类型，因为映射类型不会修改原语（例如，Partial<string> 只是 string）。我想我会把它添加到这个答案中。
@jcalz hm 错过了这一点，猜想这是最近的工作我不确定原语但我很确定 Partial 曾经用于破坏数组类型..
是的，它曾经用于破坏数组类型（并不是说数组是原始数组），但现在可以很好地映射它们。