TypeScript基于输入类型定义通用输出类型

对于我的React原生项目，我正试图获得尽可能多的自动完成和类型验证。挑战之一是为我使用的样式表库配置类型

扩展样式表如下所示：

const styles=createStyles({
变量1:100，
变量2：“10rem”，
标题：{
宽度：“100%”，
身高：40，
内容：“中心”，
flex:“$flexAll”，
保证金：$gapMD
}
})

定义样式时，每个样式值不仅应接受其原始类型，还应接受

字符串

、

函数

等

当库处理完样式表后，结果是一个常规的React本机样式表。因此，函数的结果应包含与函数的输入相同的属性，但属性应映射到原始样式类型

例如

flex

应该是

number

，而不是

number | string | function |等。

以下是我到目前为止得到的信息：

从“react native”导入{ImageStyle，TextStyle，ViewStyle}
从“react native extended stylesheet”导入EStyleSheet
类型函数=（）=>K
键入AllStyles=ImageStyle&TextStyle&ViewStyle
类型StyleSet={[P in keyof T]：AllStyles}
类型EValue=T | string&{}
类型EVariable=EValue |函数
类型EStyle={[P in keyof T]：EVariable}
类型EAnyStyle=EStyle | EStyle | EStyle
键入EStyleSet={[P in keyof T]：number | string | EAnyStyle | EStyleSet}
导出常量createStyles=（样式：EStyleSet）=>
创建（样式）作为样式集

不幸的是，autocomplete不能完全工作，我觉得我的定义变得有点太复杂了。结果类型也不完全正确

我真的希望有一个TypeScript向导可以帮助我完成这项工作。

我已经设置了一个沙箱，可以用来测试某些类型：

---

如果方向正确，请告诉我：

从“/react native”导入{FlexStyle、ImageStyle、TextStyle、ViewStyle}；
///////////////////////////////////////////////////////
//嘲弄
const EStyleSheet={create:obj=>obj}；
///////////////////////////////////////////////////////
//类型
//谢谢你。
type Primitive=string | number | boolean | bigint | symbol | undefined | null；
类型Builtin=Primitive | Function | Date | Error | RegExp；
类型ExtendTypes=T扩展内置
? T|E
：T扩展地图
? 地图
：T扩展现成映射
? 现成地图
：T扩展WeakMap
? 懦夫
：T扩展集
? 设置
：T扩展只读集
? 只读集
：T扩展弱集
? 弱点
：T扩展数组
? 排列
当前位置T扩展承诺
? 允诺
：T扩展{}
? {[K in keyof T]：扩展类型}
：T；
键入AllStyles=ImageStyle&TextStyle&ViewStyle；
类型StyleSet=Pick；
常量createStyles=（样式：T）：样式集=>
创建（样式）；
///////////////////////////////////////////////////////
//试验
const styles=createStyles({
变量1:100，
变量2：“10rem”，
标题：{
宽度：“100%”，
身高：40，
alignItems：“灵活启动”，
alignSelf:“$alignSelf”，//自动完成，但也允许自定义值
flex:“$flexAll”，
保证金：“$gapMD”，
//自动完成应该可以在这里工作，但不能
//现在它起作用了
},
字体：{
尺寸：20
}
});
常量imageStyle:imageStyle={
对齐项目：“中心”
};
//有效的
console.log（“header”，styles.header）；
log（“header.fontSize”，style.font.fontSize）；
log（“imageStyle.alignItems”，imageStyle.alignItems）；
//无效：ViewStyle没有textTransform
//现在它起作用了
log（“header.textcransform”，styles.header.textcransform）；
//无效：TextStyle没有resizeMode
//现在它起作用了
log（“font.resizeMode”，style.font.resizeMode）；

嗨，我想我能帮你。你能把你想自动完成的代码部分加进去吗？还有一个你想输入和输出的类型的例子。因为目前的类型看起来太多了。谢谢！哇，那是一棵大树：）。今天晚些时候我会测试这个。那些在底部标记为无效的“测试”应该仍然无效。例如，一个TextStyle没有resizeMode属性，所以它应该失败。对，这就是我所说的“it works”，我的意思是它在你期望它失败的地方失败，而在自动完成的情况下，“it works”意味着现在你可以自动完成了。树是深度方面的，看起来很难看：）真：）但它完成了它的工作。

StyleSet

必须是动态的。它有点像CSS，你可以定义任何你需要的样式类。我不确定TypeScript是否能找到最接近的匹配项。因此，如果它有一个

fontSize

，那么它必须是

TextStyle

。我不介意它是否只接受带有autocomplete的

ViewStyle

、

TextStyle

和

ImageStyle

的所有属性。再次感谢，我为你加冕了一个TypeScript向导：）是的，这将是一个很好的功能，不幸的是，目前它不受支持，并且无法通过它的键（如

fontSize

）来检测假定的类接口。作为一个选项，您可以添加组，如

text:{[key:string]？TextStyle}，view:{[key:string]？TextStyle}

等，但我不确定它是否适合您的体系结构。创建一个只接受TextStyle、ImageStyle和ViewSty的所有属性的

AnyStyle

类型的正确方法是什么