如何使Pick属性偏于

Question

我有这个功能

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

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

所以我希望像Pick一样的东西来自Partial<CSSStyleDeclaration>而不是来自CSSStyleDeclaration的Pick

我怎么能这么做？

Answer 1

由于您的类型比Pick从现有类型中提取一些属性要复杂得多，因此您可能需要在它自己的接口中详细说明：

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

function someThing(someArg: SomeArg) { }

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

我使用查找类型来明确表示id和style属性与来自HTMLElement的属性相关，但您可以只使用string和Partial<CSSStyleDeclaration>。

如果您确实需要使用像Pick这样的允许子属性为Partial的东西，您可以创建一个映射类型来完成它，但是我无法从您的问题中看出是否需要编程的东西。

更新

我想您确实希望它是可编程的(尽管对于两个属性，我本人不会费心)，所以这里有一种定义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接口相同。

希望这能有所帮助。祝好运!