派生的泛型类不能分配给打字稿中的基泛型类

Question

我有一张存储各种元素的地图。定义如下：

const map = new Map<string, IComponent<IBase>>();

我想用这个映射来存储IComponent<IBase>、IComponent<INumber>、IComponent<IText>等的实例。

基本接口定义如下：

// base interface
interface IBase {}
// base component type
export type IComponent<T extends IBase> = React.FC<T>;

现在我想添加一个NumberComponent

// derived interface
interface INumber extends IBase {
    someNumber: number;
}
// some component
const NumberComponent: IComponent<INumber> = (props) => {
    return (
        <div>{props.someNumber}</div>
    );
}

我使用map.set('number', NumberComponent) 将其存储到地图中，但我得到了

Argument of type 'FC<INumber>' is not assignable to parameter of type 'FC<IBase>'.
  Types of parameters 'props' and 'props' are incompatible.
    Type 'PropsWithChildren<IBase>' is not assignable to type 'PropsWithChildren<INumber>'.
      Property 'someNumber' is missing in type 'PropsWithChildren<IBase>' but required in type 'INumber'.

我知道我可以使用map.set('number', NumberComponent as IComponent<IBase>) 来转换类型。但是，我不想使用as。有没有其他方法可以解决这个问题？

demo on ts playground

Answer 1

这是可以做到的。你只需要超载你的Map

import React from 'react'

interface IBase { }

export type IComponent<T extends IBase> = React.FC<T>;

interface INumber extends IBase {
  someNumber: number;
}


type MapOverloads = Map<string, IComponent<IBase>> & Map<string, IComponent<INumber>>
const map:MapOverloads  = new Map<string, IComponent<IBase>>();


const NumberComponent: IComponent<INumber> = (props) => {
  return (
    <div>{props.someNumber}</div>
  );
}

const BaseComponent: IComponent<IBase> = (props) => {
  return null
}

map.set('number', NumberComponent)

map.set('base', BaseComponent)

Playground

主要思想被@jcalz的this answer无耻窃取

但是，因为map 是可变的，并且我假设您希望它是可变的，所以getter 存在问题。

const expectNumber = map.get('number') // IComponent<IBase> | undefined

附：由于逆变，您无法将IComponent<INumber> 分配给IComponent<IBase>