0

给定一个接口

interface Test {
  inner: {
    value: boolean,
  }
}

和一堂课

class ContextualData<T> {
   constructor(public data: T) {}
}

我希望能够这样做：

const original: Test = {
  inner: {
    value: true,
  },
}

// Wrap the value in a ContextualData object.
original.inner.value = new ContextualData<boolean>(original.inner.value)

我试图通过声明以下类型来实现：

export type Primitive = undefined | null | boolean | string | number | Function

export type Contextuable<T> = T | ContextualData<T>

export type DeepContextuable<T> =
  T extends Primitive ? Contextuable<T> : DeepContextuableObject<T>

export type DeepContextuableObject<T> = {
  [K in keyof T]: DeepContextuable<T[K]>
}

然后DeepContextual用于转换我的Test界面：

const original: DeepContextual<Test> = {
  inner: {
    value: new ContextualData<boolean>(true),
  },
}

这工作正常。

现在，让我们向我们的ContextualData类添加另一个方法：

class ContextualData<T> {
   constructor(public data: T) {}

   public map<U>(mapFn: (current: T) => U): U {
     return mapFn(this.data)
   }
}

即使不使用新函数，我们的 Contextual 接口value: ContextualData<boolean>(true)现在也会抛出以下 TS 错误：

TS2322: Type 'ContextualData<boolean>' is not assignable to type 
'boolean | ContextualData<true> | ContextualData<false>'.

我错过了什么？这是一个错误吗？

4

1 回答 1

1

您遇到了条件类型的分配行为。这种（非常有用的）行为表明条件类型分布在裸类型参数的联合成员上。将此与 Typescript 视为booleanas的事实相结合true | false，我们得到了这一点。

DeepContextuable<boolean> = DeepContextuable<true | false>  
   = DeepContextuable<true> | DeepContextuable<false>  
   = (true | Contextuable<true>) | (false | Contextuable<false>)
   = boolean | Contextuable<true> |  Contextuable<false

此行为仅发生在裸类型参数上。要禁用它，我们可以将参数放在一个元组中，然后事情就会按照您的预期工作。

export type Primitive = undefined | null | boolean | string | number | Function

export type Contextuable<T> = T | ContextualData<T>

export type DeepContextuable<T> =
[T] extends [Primitive] ? Contextuable<T> : DeepContextuableObject<T>

export type DeepContextuableObject<T> = {
    [K in keyof T]: DeepContextuable<T[K]>
}

interface Test {
    inner: {
        value: boolean,
    }
}

class ContextualData<T> {
    constructor(public data: T) { }

    public map<U>(mapFn: (current: T) => U): U {
        return mapFn(this.data)
    }
}

const original: DeepContextuable<Test> = {
    inner: {
        value: new ContextualData<boolean>(true),
    },
}
于 2018-12-05T21:01:12.663 回答