Typescript 根据同一对象中的属性推断函数的对象键

Question

编辑：重新编写问题以使其更加清晰，并添加了一些额外的示例。

我想创建一个大对象（这是底层系统的要求），我想将该对象的两个元素之间的一种关系建模为由 TypeScript 引擎自动推断的 TypeScript 接口/类型。

我的对象如下所示：

{
  selection: {
    name: "",
    email: ""
  },
  handler: (values) => {
    // Do something
  }
}

我想要定义一个类型，以便将selection 对象中定义的键（在此示例中为name 和email，但可能更多）被推断为values 上的键对象。

例如：

{
  selection: {
    name: "",
    email: ""
  },
  handler: (values) => {
    values.name // Valid
    values.email // Valid
    values.foobar // Not valid
  }
}

// or

{
  selection: {{
    name: "",
    email: ""
    address: "",
    role: ""
  },
  handler: (values) => {
    values.name // Valid
    values.email // Valid
    values.address // Valid
    values.role // Valid
    values.foobar // Not valid
  }
}

使用这种类型：

interface HandlerObject<TSelection extends { [key: string]: string }> {
  selection: TSelection
  handler?: (selection: { [key in keyof TSelection]: any }) => any
}

只要我先明确设置通用TSelection，我就可以键入对象：

interface Selection {
  name: string
  email: string
}

const obj: HandlerObject<Selection> = {
  selection: {
    name: "",
    email: ""
  },
  handler: (values) => {
    values.name // Valid
    values.email // Valid
    values.foobar // Not valid
  }
}

然而，对我来说，似乎 TypeScript 应该能够根据我在selection 属性中键入的内容推断出TSelection 本身。虽然我当然可能是错的。我推测我应该能够做到这一点：

const obj: InferredHandlerObject = {
  selection: {
    name: "",
    email: ""
  },
  handler: (values) => {
    values.name // Valid
    values.email // Valid
    values.foobar // Not valid
  }
}

并且仍然以某种方式获得name 和email 的正确类型推断。这是可能的还是我需要明确输入选择？

---

原始问题

// SomeType is just a placeholder. This is where I want the proper type to go.
const obj: AType = {
  selection: {
    name: "something", // The value here is irrelevant. The key is important
    email: "something elese" // The value here is irrelevant. The key is important
  },
  handler: (selection) => {
    selection.name // selection only contains keys from the selection object defined above
  }
}

有没有一种方法可以使用 Typescript 以这样的方式键入此内容，即选择 argument 始终包含与 selection 属性中定义的键相同的键？参数中键的值也不应该相同。

我试过了：

interface HandlerObject<TSelection extends { [key: string]: string }> {
    selection: TSelection
    handler?: (selection: { [key in keyof TSelection]: any }) => any
}

但它需要我明确指定泛型。

我希望它根据selection 属性自动推断TSelection。

Answer 1

您曾说过SomeType 是“属性类型应放在的位置的占位符”。如果obj 是一次性的，则根本不需要类型； TypeScript 将从对象初始化器中推断出它。但是我们需要将它拆分一下，否则你会试图从它自己的初始化程序中引用它，而 TypeScript 不会让你这样做。你得到 "'obj' 隐含类型 'any' 因为它没有类型注释并且在其自己的初始化程序中直接或间接引用。(7022)" (playground link)。

下面是我们如何在类型声明中使用 typeof 来做到这一点，方法是分开一点：

const initialSelection = {
    name: "select.name",
    email: "select.email"
};
const obj = {
    selection: initialSelection,
    handler: (selection: typeof initialSelection) => {
        selection.name // This works
    }
};

Playground Link

如果您想避免在该范围内出现initialSelection，您可以将其包装在一个函数中：

const obj = (() => {
    const initialSelection = {
        name: "select.name",
        email: "select.email"
    };
    return {
        selection: initialSelection,
        handler: (selection: typeof initialSelection) => {
            selection.name // This works
        }
    };
});

Playground Link

Answer 2

如果您坚持将所有内容都放在一个对象中，则需要像这样定义SomeType：

interface SomeType {
  selection: {
    name: string;
    email: string;
  },
  handler: (selection: SomeType['selection']) => void;
}

const obj: SomeType = {
  selection: {
    name: "select.name",
    email: "select.email"
  },
  handler: (param) => {
    param.name;
    param.email;
  }
}

Playground

Answer 3

不完全确定您追求的是什么，但我假设您知道“选择”将进入什么内容，并且可能会因情况而异，您希望确保处理程序仅使用现有属性。

interface SomeType<T> {
    selection: T,
    handler: (selection: T) => void
}

type User {
    name: string;
    email: string;
}


const obj: SomeType<User> = {
  selection: {
    name: "select.name",
    email: "select.email"
  },
  handler: (selection) => {
    selection.name // selection only contains keys from the selection object defined above
  }
}

Answer 4

无论出于何种原因，泛型类型推断对函数的操作与对类型的操作不同。

解决办法如下：

function isObj<O>(obj: { selection: O; handler: (selection: { [key in keyof O]: any }) => any }) {
  return obj;
}

const obj = isObj({
  selection: {
    name: '',
    email: '',
  },
  handler(values) {
    values.name; // Valid
    values.email; // Valid
    values.foobar; // Not valid
  },
});
obj;