Question

我需要改进React DOM元素的一些功能。在d.ts中有一个DOM元素列表，如

interface ReactDOM {
    // HTML
    a: HTMLFactory;
    abbr: HTMLFactory;
    address: HTMLFactory;
    area: HTMLFactory;
    article: HTMLFactory;
    aside: HTMLFactory;
    ...

但在我的JS中，每个元素都是React的函数包装器。我需要这样的东西：

type MyHTMLFactory = DOMFactory<HTMLProps<HTMLElement> & SMTH>;

问题是如何告诉TypeSript我的对象具有相同的键但具有不同类型MyHTMLFactory

Answer 1

您可以声明具有泛型类型的接口（ T ）

interface IReactDom<T> {
   a: T;
   abbr: T;
   address: T;
   area: T;
   article: T;
   aside: T;
}

let myObj: IReactDom<HTMLFactory> = ...
myObj.a // HTMLFactory

注意：Doc - generics

*编辑*

我可以扩展和添加新元素但是如何更改基本元素的类型？

正如我所知道的那样，没有官方 - 干净这样做的方法......但你可以创建一个小黑客来解决这个问题。
> 我们假设有一个interface（在本例中来自React）您无法修改，请将其称为IBaseType，例如

interface IBaseType {
    a: string
    b: string
    c: string
    n: number
    m: number   
}

我们的目标是定义自定义类型IGoalType，不仅可以扩展IBaseType，还可以更改a，b＆amp;的类型。 c到Object（例如）。为了做到这一点，我们需要第三个（是的，这不是一个干净的解决方案）界面，以充当＆＃34;桥梁＆＃34;

interace IBridge extends IBaseType {
  a: any
  b: any
  c: any
}

interface IGoalType extends IBridge {
  a: Object
  b: Object
  c: Object
}

现在，测试一下：

let o: IGoalType
o.a // Object
o.a // Object
o.a // Object
o.n // number
o.m // number

打字稿：改变对象成员的类型

1 个答案: