如何从Typescript中的对象数组推断属性值?

lsmepo6l  于 2022-12-05  发布在  TypeScript
关注(0)|答案(2)|浏览(204)

我希望TypeScript编译器能够推断出对象的属性名称,以便以后更容易调用相应的函数。但是,尽管考虑了调用函数,TypeScript并没有给予我可以调用的函数的任何智能。
考虑以下示例:

interface InputBase {
  alias: string;
}

const input: Array<InputBase> = [
  { alias: 'getNotes' },
  { alias: 'getComments' },
];

const client = input.reduce((acc, curr: InputBase) => {
  return {
    ...acc,
    [curr.alias]: () => {
      return curr.alias + ' call';
    },
  };
}, {});

client.getNotes();

我的问题实际上是客户端变量中缺少推理,因为当前的数据类型是{},尽管出现在终端{getNotes: ƒ, getComments: ƒ}中。
如何解决此问题?

wpcxdonn

wpcxdonn1#

解决此问题的一种方法是使用类型Assert告诉TypeScript编译器,client变量的类型实际上是一个与InputBase接口具有相同属性的对象。
您可以使用as保留字或<>语法来执行此动作。
例如,您可以使用as保留字,如下所示:

const client = input.reduce((acc, curr: InputBase) => {
  return {
    ...acc,
    [curr.alias]: () => {
      return curr.alias + ' call';
    },
  } as { [key in InputBase['alias']]: () => string };
}, {});

现在,当您键入client.时,您将看到与InputBase.alias属性的值匹配的自动完成选项。

guicsvcw

guicsvcw2#

在TypeScript中,范例中客户端变数的型别会推断为{},因为您是使用reduce方法建立具有动态属性名称的对象。
为了提供客户端变量的类型信息,可以使用TypeScript中的Record类型。此类型允许您使用一组已知键定义对象类型,并且值可以具有特定类型。
以下示例说明如何使用Record类型为客户端变量提供类型信息:

interface InputBase {
  alias: string;
}

const input: Array<InputBase> = [
  { alias: 'getNotes' },
  { alias: 'getComments' },
];

// Define the type of the client variable as a Record with string keys and
// values that are functions that return a string.
const client: Record<string, () => string> = input.reduce((acc, curr: InputBase) => {
  return {
    ...acc,
    [curr.alias]: () => {
      return curr.alias + ' call';
    },
  };
}, {});

// Now TypeScript will provide intellisense for the client variable,
// and you can see the list of available methods when you type `client.`
client.getNotes();

或者,您可以使用类型Assert显式指定客户端变量的类型。这允许您为客户端变量提供类型,而无需使用Record类型。以下是一个示例:

interface InputBase {
  alias: string;
}

const input: Array<InputBase> = [
  { alias: 'getNotes' },
  { alias: 'getComments' },
];

// Use a type assertion to explicitly specify the type of the client variable
const client = input.reduce((acc, curr: InputBase) => {
  return {
    ...acc,
    [curr.alias]: () => {
      return curr.alias + ' call';
    },
  };
}, {}) as { [key: string]: () => string };

// Now TypeScript will provide intellisense for the client variable,
// and you can see the list of available methods when you type `client.`
client.getNotes();

我希望这对你有帮助!如果你有任何其他问题,请告诉我。

相关问题