首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >基于变量的条件类型

基于变量的条件类型
EN

Stack Overflow用户
提问于 2020-01-07 01:36:37
回答 1查看 59关注 0票数 0

我希望能够通过将一些变量传递给组件属性来从“类型映射”之类的东西中选择正确的类型。我将其称为“条件类型”,但我在typescript文档的相应页面上没有找到解决方案。

下面是一个简化的示例:

代码语言:javascript
运行
复制
type Queue1 = {};
type Queue2 = {};
type Queue3 = {};
// ... another possible type

type QueueTypes = {
    'Queue1': Queue1,
    'Queue2': Queue2,
    'Queue2': Queue3
    // ...
}

interface Props {
    queueType: keyof QueueTypes;
}

let props: Props = {queue: 'Queue2'}

// Type 'any' cannot be used as an index type
type rightQueueType = QueueType[props.queue]

在谷歌搜索了一个小时后,我一直没有找到正确的解决方案。也许我以某种方式错误地使用了typescript?我很乐意得到任何帮助。

链接到playground

更新:我有一个可重用的通用react组件(表),它可以处理不同类型的资源(Queue1、Queue2等)。我不能显式提供资源类型,因为它是动态的。所以我所拥有的只是一个字符串形式的资源类型,我需要以某种方式将其转换/转换为现有的typescript类型。根据我最初的体验,它可能类似于: /> (React组件)

我最终采用了这种方法(感谢@jcalz):

代码语言:javascript
运行
复制
interface Queue1 { q: 1 }
interface Queue2 { q: 2 }
interface Queue3 { q: 3 }
type QueueTypes = {
    'Queue1': Queue1,
    'Queue2': Queue2,
    'Queue3': Queue3
}

type Props = { [K in keyof QueueTypes]: { queueType: K } }[keyof QueueTypes]
let props: Props = { queueType: 'Queue2' }

// <ResourceTable<QueueTypes[typeof props.queueType]>>
EN

回答 1

Stack Overflow用户

发布于 2020-01-07 02:29:19

可以使用的记录是属性键为K且属性值为T的对象类型。也就是说,keyof Record等同于K,RecordK等同于T。

代码语言:javascript
运行
复制
type QueueTypes: Record<string, Queue1 | Queue2 | Queue3> = {
    'Queue1': Queue1,
    'Queue2': Queue2,
    'Queue2': Queue3
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59616543

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档