流类型 - GenericType 中缺少声明预期键/值类型的索引签名

Question

我在使用 Generic Type 动态访问对象属性时遇到问题。这是代码：

import React, { useState } from 'react'

function useForm<FormValues>(initialValues: FormValues) {
    const [formValues, setFormValues] = useState<FormValues>(initialValues)

    function getValue(fieldName: string) {
        return formValues[fieldName]
    }
}

这是错误：

7: return formValues[fieldName] ^ 无法获取，formValues[fieldName]因为FormValues[1] 中缺少声明预期键/值类型的索引签名。参考文献：4：const [formValues, setFormValues] = useState(initialValues) ^ [1]

这里是尝试Flow链接： https://flow.org/try/#0JYWwDg9gTgLgBAJQKYEMDGMA0cDecCuAzkgMowoxJwC+cAZlBCHAORSoYsBQXd+AdhmAR+BYgDFoIADySoIAGooANviSEAfAApg-YDGAqlq9QC44cxSrWEAlLi4BINCMLwA2nSnGb2YjEsfdQBdOABeMVJySllva3VtXX1DZSC7LjhMuAysvkEDETgAcyQYIK06YCRlABMAORQQJHM3KF0i+xwczMd2GHwoUS95NM8q2oam4O6aLmogA

谢谢您的帮助。

Answer 1

让我们简化一下问题：

I.useState有以下类型：

export function useState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {}

二、对我们来说是重要的返回类型：

export function simpleUseState<S>(initialState: S): [S] {}

三、简化版：

declare var simpleUseState: <S>(initialState: S)=> [S];

function useForm<FormValues>(initialValues: FormValues, fieldName: string) {
    const [formValues] = simpleUseState<FormValues>(initialValues)

    return formValues[fieldName];
}

我们有同样的错误

因为泛型类型没有键/值签名，例如它可以是一个number或null- 我们需要在泛型上添加约束：

import React, { useState } from 'react'

function useForm<FormValues: {[string]: string}>(initialValues: FormValues) {
//                         ^ constraint
    const [formValues, setFormValues] = useState<FormValues>(initialValues)

    function getValue(fieldName: string) {
        return formValues[fieldName]
    }
}