检查泛型函数参数中的类型并返回此参数的对象字面量类型

Question

My Task

I have two interfaces.

interface ComponentOptions<Props> {
  abstract?: boolean;
  functional: boolean;
  props?: Props;
  name?: string;
  render?(props: Props): boolean;
}

interface ComponentProps {
  title: string;
  dark: boolean;
}

I need to realize a function that

• takes an interface to substitute the Props generic type
• does any checks connected with the Props type in function argument object
• returns an object literal type, based on the passed argument object
  • does not return ComponentOptions<Props> interface

strict: true compiler option required.

Actual Solution

I have implemented createComponent function that recieves two arguments:

• required options object literal
• props , treated as imaginary argument for type casting

function createComponent<
  Props,
  Options extends ComponentOptions<Props>
>(options: Options, props: Props): Options {
  props;
  return options;
}

I achieved the desired result with such an realization. But I don't really like it.

const component = createComponent({
  abstract: true,
  functional: true
}, {})

const componentWithProps = createComponent({
  functional: false,
  name: 'bar',
  props: {
    title: 'bar',
    dark: true
  },
  render(props) {
    return props.dark
  }
}, {} as ComponentProps)

The Problem

I want to get rid of props argument to left only options , and to set the type for props using a generic parameter, not casting the props argument.

It might look like this:

const component = createComponent<ComponentProps>({
  functional: true,
  props: { // Check 'title' and 'dark' types
    title: 'comp',
    dark: true
  },
  render(props) { // Pass type for the props
    return props.dark;
  }
})

// When we hover on `component` variable,
// display all defined properties in the `options`
{
  functional: true,
  props: ComponentProps,
  render(props: ComponentProps): boolean
}

How to achieve this?

Link to Playground

Answer 1

I solved my problem with this solution:

interface FunctionalComponent<Props> {
  <Options extends ComponentOptions<Props>>(opts: Options): Options
}

function createFunctionalComponent<Props = {}>() {
  return (o => o) as FunctionalComponent<Props>;
}

const component3 = createFunctionalComponent<ComponentProps>()({
  functional: false,
  name: 'bar',
  props: {
    title: 'bar',
    dark: true
  },
  render(props) {
    return props.dark
  }
});