javascript - 流类型 - 声明预期键/值类型的索引签名在 GenericType 中丢失

Question

我在使用通用类型动态访问对象属性时遇到问题。这是代码:

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] ^ Cannot get formValues[fieldName] because an index signature declaring the expected key / value type is missing in FormValues [1]. References: 4: const [formValues, setFormValues] = useState(initialValues) ^ [1]

这是试用流程链接: https://flow.org/try/#0JYWwDg9gTgLgBAJQKYEMDGMA0cDecCuAzkgMowoxJwC+cAZlBCHAORSoYsBQXd+AdhmAR+BYgDFoIADySoIAGooANviSEAfAApg-YDGAqlq9QC44cxSrWEAlLi4BINCMLwA2nSnGb2YjEsfdQBdOABeMVJySllva3VtXX1DZSC7LjhMuAysvkEDETgAcyQYIK06YCRlABMAORQQJHM3KF0i+xwczMd2GHwoUS95NM8q2oam4O6aLmogA

感谢您的帮助。

Answer 1

让我们简化问题:

我。 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];
}

我们有the same error

因为 Generic 类型没有键/值签名，例如它可以是 number 或 null - 我们需要添加 constraints关于通用:

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]
    }
}