To handle the complexity of your specific type, it is recommended to define a separate interface to clarify the structure:
interface CustomType {
id: HTMLElement['id'],
style: Partial<HTMLElement['style']>
}
function customFunction(customArg: CustomType) { }
customFunction({id: "id", style: {
zIndex: "1"
}})
The usage of lookup types emphasizes the relationship between the id and style properties with those of HTMLElement. Alternatively, you could utilize simpler types like string and
Partial<CSSStyleDeclaration>
.
If you require a more dynamic approach like Pick for partial subproperties, you can create a mapped type. However, the necessity for this depends on your specific requirements.
UPDATE
If programmatically generating the type is essential (even for a small number of properties), you can define a PickPartial type to select from Partial properties instead of the properties directly. This assumes non-recursion for subproperties to be Partial:
type PickPartial<T, K extends keyof T> = {[P in K]: Partial<T[P]>};
function customFunction(customArg: PickPartial<HTMLElement, 'id'|'style'>) { }
customFunction({id: "1", style: {
zIndex: "1"
}})
It's important to note that although id is technically typed as Partial<string>, mapped types do not alter primitives, so Partial<string> is equivalent to string. This maintains consistency with the CustomType interface defined earlier.
Hopefully, this clarifies the process for you. Best of luck with your implementation!