typescript - 类型 'string[]' 不可分配给类型 '("toString"| "valueOf")[]'

Question

我在传递给函数的对象上有两个属性。我想将一个对象属性的 deps 属性限制为另一个对象的 key。

例如:

const config = {
  modules: {
    bar: {
      baz: true,
      deps: ['foo', 'notADep'],
      factory: () => Promise.resolve(() => {}),
    },
  },
  services: {
    foo: { factory: () => Promise.resolve(() => {}) },
  },
};

在上面的配置中，foo是有效的，但是notADep是无效的。

这是我的代码:

function createApp<T extends Config>(config: T) {}

export type Service<T> = {
  factory: () => Promise<() => void>;
  deps?: (keyof T & string)[] | undefined;
}

export type Services<T = any> = Partial<Record<keyof T, Service<any>>>;

export type Modules<T = any> = Record<string, {
  baz: boolean,
} & Service<keyof T>>

interface Config {
  modules: Modules;
  services: Services;
}

我在 config 参数上遇到错误

Argument of type '{ modules: { bar: { baz: boolean; deps: string[]; factory: () => Promise<() => void>; }; }; services: { foo: { factory: () => Promise<() => void>; }; }; }' is not assignable to parameter of type 'Config'.
  Types of property 'modules' are incompatible.
    Type '{ bar: { baz: boolean; deps: string[]; factory: () => Promise<() => void>; }; }' is not assignable to type 'Modules<any>'.
      Property 'bar' is incompatible with index signature.
        Type '{ baz: boolean; deps: string[]; factory: () => Promise<() => void>; }' is not assignable to type '{ baz: boolean; } & Service<string | number | symbol>'.
          Type '{ baz: boolean; deps: string[]; factory: () => Promise<() => void>; }' is not assignable to type 'Service<string | number | symbol>'.
            Types of property 'deps' are incompatible.
              Type 'string[]' is not assignable to type '("toString" | "valueOf")[]'.
                Type 'string' is not assignable to type '"toString" | "valueOf"'.

Playground

Answer 1

您可以使用 builder pattern 来实现此目的, Vue 这样做是为了推断 Prop 类型。

它依赖于推断的泛型类型来重用它们并 self 约束给定的参数。

M 和S 指给定参数的属性modules 和services

playground

export type Factory = {
  factory: () => Promise<() => void>;
}

type Service<M, S> = {
  factory: () => Promise<() => void>
  // deps are any keys of the modules or services
  deps?: (keyof S | keyof M)[]
}

type Module<M, S> = {
  baz: boolean
} & Service<M, S>

type Config<M, S> = {
  modules: {
    // For every property of M, inform it's a module with the services context (S)
    [K in keyof M]: Module<M, S>
  }
  services: {
    [K in keyof S]: Service<M, S>
  };
}

// The function will automatically infer the given types
function createApp<M, S>(config: Config<M, S>): Config<M, S> {
  return config
}

createApp({
  modules: {
    bar: {
      baz: true,
      // (property) deps?: ("bar" | "foo" | "plop")[] | undefined
      deps: ['foo', 'notADep'], // error!
      //            ^ Error is located on the string, not the whole line
      factory: () => Promise.resolve(() => { }),
    },
    plop: {
      baz: true,
      deps: ['foo', 'notADep'], // error!
      factory: () => Promise.resolve(() => { }),
    },
  },
  services: {
    foo: {
      factory: () => Promise.resolve(() => { }),
      // (property) deps?: ("bar" | "foo" | "plop")[] | undefined
      deps: [],
    },
    bar: {
      factory: () => Promise.resolve(() => { }),

    },
  },
});