我可以基于 TypeScript 中的另一个接口以某种方式定义接口中的索引名称吗？

Posted 2023-03-13

【中文标题】我可以基于 TypeScript 中的另一个接口以某种方式定义接口中的索引名称吗？

【英文标题】：Can I somehow define what can be the indexed name in the interface based on another interface in TypeScript?

【发布时间】：2020-04-01 16:44:46

【问题描述】：

我有这个interface：

export interface FieldContainerInterface 
  [key: string]: FieldInterface;

我想基于另一个接口定义key 字符串。我希望使用这样的东西：

interface FieldContainerInterface<T> 
  // in here how can I pick the fields from <T>?
  [T<key>: string]: FieldInterface;


interface BanknoteInterface 
  id: number;
  deviza_id: number;
  value: string;


class Banknote implements BanknoteInterface 
  id: number;
  deviza_id: number;
  value: string;

  fieldContainer: FieldContainerInterface<BanknoteInterface> 
    // here I MUST to define id, defiza_id and value fields
  

我能否以某种方式定义FieldContainerInterface 中的key 字符串？

【参考方案1】：

您可以为此使用mapped type：

type FieldContainerInterface<T> = 
    [key in keyof T]: FieldInterface;

Playground

【参考方案2】：

不确定您想要实现的具体目标，但将键限制为某些值的一种方法是使用 keyof 运算符。 Here 是一篇关于它的好文章。示例：

import React from 'react';

interface BanknoteInterface 
  id: number;
  deviza_id: number;
  value: string;


type FieldContainerInterface<T> = 
  [key in keyof T]?: any;




class Banknote implements BanknoteInterface 
  id: number;
  deviza_id: number;
  value: string;

  fieldContainer: FieldContainerInterface<BanknoteInterface> = 
    // optionally add any key
    value: "hello",
    // id: 5,
    // deviza_id: 5
  

文档： https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html