如何解决如何改善此Typescript问题的索引编制?
我正在尝试使工厂函数返回一个React组件。
我希望能够指定基本样式的映射,也可以指定修改器样式的映射,如果在生成的react组件上设置了修改器布尔值,这些修改器样式将合并到基本样式中。
我已经完成了这项工作,但是我不得不使用一些骇客的any
类型声明。
import React from "react";
import css from "@styled-system/css";
import _ from "lodash";
type TypeProps = {
as: string;
children: React.ReactNode;
};
type CSSMap = {
fontFamily: "heading" | "body";
fontWeight?: "regular" | "bold";
fontSize: number;
color: string;
};
type ModifierName = "disabled" | "active" | "inactive";
type ModifierList = ModifierName | undefined;
type ModifierMap<T extends ModifierList> = Record<
Exclude<T,undefined>,Partial<CSSMap>
>;
function mergeCSS(
modifiers: ModifierName[],baseCSS: CSSMap,modifierCSS: ModifierMap<ModifierName>
) {
return _.reduce(
modifiers,(result,key) => {
return { ...result,...modifierCSS[key] };
},baseCSS
);
}
type WithModifierBooleans<T,U extends ModifierList> = T &
Partial<Record<Exclude<U,boolean>>;
function hasKey<O>(obj: O,key: keyof any): key is keyof O {
return key in obj;
}
function typeFactory<T extends ModifierList = undefined>(
baseCSS: CSSMap,modifierCSS?: ModifierMap<T>
) {
function Type({
children,as,...modifiers
}: WithModifierBooleans<TypeProps,T>) {
modifiers;
const activeModifiers: any = Object.keys(modifiers as any).filter((m) => {
if (hasKey(modifiers,m)) {
return modifiers[m];
}
});
const Component = as as React.ReactType;
return (
<Component
children={children}
css={css(mergeCSS(activeModifiers,baseCSS,modifierCSS as any))}
/>
);
}
Type.defaultProps = { as: "span" } as Partial<TypeProps>;
return Type;
}
export const LongformHeading = typeFactory({
fontFamily: "heading",fontSize: 5,color: "shades.0",});
export const PhaseStep = typeFactory<"active">(
{
fontFamily: "body",fontSize: 4,color: "shades.8",},{
active: {
color: "brand.0.0",}
);
export const Button = typeFactory<"disabled">(
{
fontFamily: "heading",fontSize: 3,color: "link.0",{
disabled: {
color: "shades.8",}
);
我是Typescript的新手,所以我确定自己做的事情很差。有没有办法摆脱hasKey
? (摘自https://dev.to/kingdaro/indexing-objects-in-typescript-1cgi),并删除as any
的
当前还可以将修饰符指定为typeFactory
的通用参数,但不能在没有类型错误的情况下设置第二个参数IE typeFactory<'disabled'>({ (...baseCss) })
。如果T
未定义,我不知道如何使第二个参数成为必需。
作为Typescript初学者,针对这些问题构建良好的搜索查询非常困难,我希望专家能够为我提供帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。