动态获取 typescript 中 object 个键的文字类型？

Question

我想获得 object 键类型，这里我为 object 写了一个泛型，键为字符串

type GenericInput = {
  [key:string]: {value:string,type:HTMLInputTypeAttribute,placeholder:string,min?:number,max?:number,required?:boolean, error?:string}
}

function PageContent(props: { children: React.ReactNode,inputs:GenericInput,getData:(data)=>void}) {
  const [query,setQuery] = useState<GenericInput>(props.inputs)
  
  const formKeys = Object.keys(query)
getData(query)
}

但我想传递数据，以便我得到 object 键类型的文字 所以当 IDE 为键提供自动完成时。 有点想将键转换为文字类型。

我想实现这样的目标，

 type GenericInput = {
      [key:  Object.keys(query)]:{value:string,type:HTMLInputTypeAttribute,placeholder:string,min?:number,max?:number,required?:boolean, error?:string}
    }

Answer 1

Typescript Record通用类型

要使用已知密钥创建 object 接口，您可以使用Record ，要创建具有未知密钥的 object 接口，您可以使用[key: string]: TYPE 。

与Record一起工作并为您提问：

type GenericInputProperties = {
    value: string;
    type: HTMLInputTypeAttribute;
    placeholder: string;
    min?: number;
    max?: number;
    required?: boolean;
    error?: string;
};

type GenericInput<Keys> = Record<Keys, GenericInputProperties>;

参考：
Typescript Record
Typescript Generics

享受：）