首页 > 解决方案 > Typescript 接口通用属性名称

问题描述

假设我们有两个变量

const x='property1' const y='property2'

我们有功能

function foo<key extends keyof MapInterface>(name: key, props: (MapInterface[key]))

这个界面应该看起来像

interface MapInterface{
'property1':any;
'property2':any;
}

是否可以像通过调用变量 x,y 一样通用地创建接口

interface MapInterface{
x:any; //return 'property1':any;
y:any; //return 'property2':any;
}

标签: typescriptinterfacepropertiestypescript-typings

解决方案


是的,从 TypeScript 2.7 开始,您可以使用在拉取请求Microsoft/TypeScript#15473中引入的常量命名属性来执行此操作。您唯一缺少的是您需要使用计算属性语法(属性名称必须用括号括起来):

const x = 'property1'
const y = 'property2';

interface MapInterface {
  [x]: any;
  [y]: any;
} 

declare const mapInt: MapInterface;
mapInt[x]; // works      
mapInt[y]; // works
mapInt.property1; // also works
mapInt.property2; // also works

希望有帮助。祝你好运!


推荐阅读