打字稿说我的对象缺少属性，因为它并不缺少

Question

我正在研究一个具有以下模式的项目：

interface IAuthProvider {
  middleware: () => void
  getInput: () => void
}

class Password implements IAuthProvider {
  middleware = () => {}
  getInput = () => {}
}

class Email implements IAuthProvider {
  middleware = () => {}
  getInput = () => {}
}

const providerNames = ['Email', 'Password']

type AuthProviderNamespace = { [K in typeof providerNames[number]]: IAuthProvider }

// error: Type 'typeof Password' is missing the following properties from type 'IAuthProvider': middleware, getInput
const providers: AuthProviderNamespace = { Email, Password }

这种对象将在模块中导入并直接传递到将遍历它的函数：

import * as AuthProviders from './providers/index.ts'

const providers = instantiateProviders(AuthProviders)

我需要使用authprovidernamespace，因为 我需要键入authProviders。但是我做错了一些事情，因此Typescript无法将电子邮件和密码识别为IAUTHPROVIDER的实施者。我可以解决这个问题吗？

游乐场： https://tsplay.dev/wqv7jn

Answer 1

错误是正确的。值{电子邮件：电子邮件，密码：密码}是一个对象，其属性为iauthprovider对象的每个构造函数。但是类型{email：iauthprovider，密码：iauthprovider}对应于emaim> email> email和password properties的对象iauthprovider 实例，而不是此类实例的构造函数。类构造函数电子邮件没有getInput属性，因此它不能是iauthprovider：

Email.getInput; // <-- error, Property 'getInput' does not exist on type 'typeof Email'

假设您使用提供者是使用其属性来构建iauthprovider的新实例，如下：

const provider = new providers.Email(); // note, assuming a no-arg constructor
provider.getInput(); // okay
provider.middleware(); // okay

然后，您需要更改authprovidernamespace type type，以便其属性是iauthprovider 实例。您可以使用构造签名{new（）：iauthprovider} 或喜欢new（）=＆gt; IAuthProvider:

type AuthProviderNamespace = {
  [K in typeof providerNames[number]]: new () => IAuthProvider
}

And then everything works as desired:

const providers: AuthProviderNamespace = { Email, Password }