javascript - 将默认道具的类型定义添加到组件的所有子项

Question

我有一个名为ThemeProvider.js 的根组件，它允许它的任何子组件（甚至是 html 标签）使用一些 cssHelpers 进行样式设置；例如：

<ThemeProvider>
  <div _padding='sm' _color='priamry' > some text </div>
</ThemeProvider>

任何深度的孩子都可以使用它们，而且效果很好；

挑战：

现在我们希望为ThemeProvider.

我的尝试：

• 我曾尝试编写 vscode 扩展 -> 失败（似乎也不是一个好的解决方案）

• 试图在 vscode 中制作用户定义的片段（听起来也不对）

• 试图在文件 (.d.ts) 旁边添加正确的类型定义，以将那些预先存在的道具列表合并到组件的子级 ->没有足够的 Typescript 知识。我最好的尝试：

interface ThemeProviderHelper {
 _padding : 'sm' | 'lg' | 'xs';
 _color: 'primary' | 'secondary';
 // ... list goes on
}

export ThemeProvider<P> (Component: React.ComponentType) {
  return (props: P) => <Component {...ThemeProviderHelper} {...props} />
}

那是非常错误的，所以也不起作用问题是如何将这种类型附加（合并）到类型定义文件中该ThemeProviderHelper类型的子项的道具中ThemeProvider，以便它们在键入时出现在自动完成中？

此外，如果在输入子组件时有任何其他方法可以使这些道具出现在 vscode Intellisense 中，我将不胜感激；先感谢您。

标签： javascripttypescriptvisual-studio-codeautocompleteintellisense