TypeScript 如何实现值的泛型,比如根据组件自动推断 props 类型? 据我所知,目前版本的 TS 做不到,必须使用函数包裹一层,知乎上也有其他类似的问题,好奇如果后续能做到的话,会是怎么样

文章讨论了如何在TypeScript中使用泛型实现根据组件自动推断props类型,虽然当前版本需要函数包裹,但展示了通过泛型函数`defineConfig`间接推断的例子。未来可能有更直接的方法等待TypeScript更新。
摘要由CSDN通过智能技术生成

TypeScript 如何实现值的泛型,比如根据组件自动推断 props 类型?
据我所知,目前版本的 TS 做不到,必须使用函数包裹一层,知乎上也有其他类似的问题,好奇如果后续能做到的话,会是怎么样的形式?

import React, { FC, ComponentProps } from ‘react’

interface TestProps {
test: string;
}

const Test: FC = () => {
return null;
}

const config1 = {
component: Test,
props: {} // 如何自动推断为 TestProps ?
}

function defineConfig(config: { component: T, props: ComponentProps }) {
return config;
}

const config2 = defineConfig({
component: Test,
props: {
test: ‘test’
}
})
在目前的 TypeScript 版本中,无法直接根据组件自动推断 props 的类型。你提到的使用函数包裹一层的方式是目前较常用的解决方案之一。这种方式可以通过函数的参数类型来推断出组件的 props 类型。
对于你的示例代码,通过使用泛型函数来包裹 defineConfig 函数,可以实现自动推断 props 类型的效果。使用泛型可以让 TypeScript 推断出 props 的类型,然后将其传递给 ComponentProps 类型。这样就能够将 props 的类型自动推断为 TestProps
例如:

import React, { FC, ComponentProps } from 'react'
interface TestProps {
    test: string;
}
const Test: FC<TestProps> = () => {
    return null;
}
const config1 = {
    component: Test,
    props: {} // 此时会自动推断为 TestProps 类型
}
function defineConfig<T>(config: { component: T, props: ComponentProps<T> }) {
    return config;
}
const config2 = defineConfig<TestProps>({
    component: Test,
    props: {
        test: 'test'
    }
})

上述代码中,defineConfig 函数的泛型参数 T 被用于推断 component 的类型,然后通过 ComponentProps<T> 推断出 props 的类型。
如果未来的 TypeScript 版本支持更高级的类型系统或改进推断算法,可能会有更直接的方式来实现根据组件自动推断 props 的类型,但具体形式还需要根据 TypeScript 的发展来确定。

  • 6
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值