Skip to content

In Svelte5,Components have type mismatch occurs due to TypeScript contravariance #16776

@Sincenir

Description

@Sincenir

Describe the bug

There is a function in my abstract class, and the return value of this function is a component. I define the type of this component's props as {setting: Record<string, any>}.
If my subclass implements this abstract class, for example, the return value of the function is Component<{setting: {a: string}}>
At this time, if I assign this component to another one of type Component<{setting: Record<string, any>}>, an error will be reported, telling me that 'a' is declared here.

In Svelte4,this is not a problem.

Reproduction

// ⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️ min
type CheckboxInputComponentProps = {
	setting: {
		file: string;
	};
};

type InputComponentProps<TSetting extends IRecord = IRecord> = {
	setting: TSetting;
};

const CheckboxComponent = undefined as unknown as Component<CheckboxInputComponentProps>;

// BUG: 类型
export const Comp: Component<InputComponentProps> = CheckboxComponent;

// ⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️ simple
abstract class A<T extends InputComponentProps = InputComponentProps> {
	abstract createComp(): Component<T>;
}

class B extends A<CheckboxInputComponentProps> {
	createComp() {
		return undefined as unknown as Component<CheckboxInputComponentProps>;
	}
}

export class C {
	createInput(): Record<'b', A> {
		const b = new B();
		return { b };
	}
}

Logs

System Info

Type 'Component<CheckboxInputComponentProps, {}, string>' is not assignable to type 'Component<InputComponentProps<IRecord>, {}, string>'.
  Types of parameters 'props' and 'props' are incompatible.
    Type 'InputComponentProps<IRecord>' is not assignable to type 'CheckboxInputComponentProps'.
      Types of property 'setting' are incompatible.
        Property 'file' is missing in type 'IRecord' but required in type '{ file: string; }'.ts(2322)
issues.svelte.ts(6, 3): 'file' is declared here.

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions