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>

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

1 个答案: