TypeScript 映射类型以表示具有可选 Observables 的 object（使用字符串文字映射键）

Question

我需要一个映射类型来表示一个 object，其中的属性是可选的 RxJS Observables。

实现这一目标的最简单和最简单的方法是使用这种类型：

type OptionalObservables<T> = {
   [K in keyof T]: T[K] | Observable<T[K]>
}

它可以这样使用：

const animal: OptionalObservables<Animal> = {

    species: 'dog',
    noise: of('bark')     // RxJS Observable that satisfies Observable<string>
}
  

（我有一个单独的 function 来解析 object 并订阅 observables。但这个问题并不是关于它的 RxJS 方面）。

但是...对于可观察对象，我通常更喜欢使用$后缀约定，所以我真正想要的是在选择可观察对象时，我希望在键的末尾有一个 $ 。 使用Key Remapping可以进行这样的操作。

{
    species: 'dog',
    noise$: of('bark')  
}

事实证明，让所有东西协同工作比我预期的要困难得多！

对于OptionalObservables<{ species: string, noise: string }>我最终需要的最终类型是：

// species as a string or observable
({ species: string } | { species$: Observable<string> }) &

// noise as a string or observable
({ noise: string } | { noise$: Observable<string> })

（其中 T 的每个属性 K 都是必需的，并且可以是 T[K] 或 Observable<T[K]> 类型）。

---

我最接近的基础是这样的：

type OptionalObservables<T> = 
{
   [K in keyof T]: K extends string ? 

                   // the original property name and type
                   { [P in K]: T[K] } 

                   |

                   // OR the original property name with $ suffix and Observable type
                   { [P in `${K}\$`]: Observable<T[K]> }  
                   : never
}

这增加了额外的“嵌套”级别（但可以满足我的要求）所以我最终得到了这个：

{
    species: {
        species: "cat" | "dog";
    } | 
    {
        species$: Observable<"cat" | "dog">;
    };

    noise: {
        noise: "bark" | "meow";
    } | 
    {
        noise$: Observable<"bark" | "meow">;
    };
}

我希望走到这一步可以让我使用像Unionize这样的东西来提取值并将它们合并在一起而无需额外的级别。 到目前为止，我只设法获得所有可能的属性是必需的或全部是可选的！

如果我错过了一个技巧或者这是不可能的 - 但希望能够让它发挥作用。

另一种方法可能是验证结构是否与方法兼容，而不是仅依赖于映射类型。

Answer 1

如果您只想在每个可观察属性的末尾添加$ ，则可以将此实用程序类型与键重映射一起使用：

import { Observable } from 'rxjs';

type Animal = {
    species: string;
    noise: Observable<string>;
}

type Rename<Key extends PropertyKey, Value> = Value extends Observable<any> ? `${Key & string}$` : Key

type OptionalObservables<T> = {
    [K in keyof T as Rename<K, T[K]>]: T[K]
}

// Prefix $ added to noise which is Observable
type Result = OptionalObservables<Animal>

如果你想克隆每个属性，使其成为 Observable 并添加前缀$ ，你可以这样做：

import { Observable } from 'rxjs';

type Animal = {
    species: string;
    noise: string;
}

type Rename<Key extends PropertyKey> = `${Key & string}$`

type OptionalObservables<T> = T & {
    [K in keyof T as Rename<K>]?: Observable<T[K]>
}

// type Result = {
//     species: string;
//     noise: string;
//     species$?: Observable<string> | undefined;
//     noise$?: Observable<string> | undefined;
// }
type Result = OptionalObservables<Animal>

Answer 2

你的要求真的很少见。 但这并非不可能。

我们需要在 typescript 中使用一些黑魔法。 但如你所知，不要轻易使用黑魔法。

游乐场链接

代码

在这里，我将Observable模拟为#XXX

type Observable<T extends string> = `#${T}`

type Animal = {
    species: 'species'
    noise: 'noise'
}

type Unwrap<T> = T extends [any] ? T[0] : T

type SingleOptionalObservables<K extends keyof any, V> = { [T in K]: V } | { [T in K as `${string & T}\$`]: Observable<V> }

type SingleOptionalObservablesByKey<T, K extends keyof T> = K extends any ? [SingleOptionalObservables<K, T[K]>] : never

type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never

type OptionalObservables<T> = Unwrap<UnionToIntersection<SingleOptionalObservablesByKey<T, keyof T>>>

type OOA = OptionalObservables<Animal>

const test1: OOA = {
    species: 'species',
    noise: 'noise',
}

const test2: OOA = {
    species: 'species',
    noise$: '#noise',
}

const test3: OOA = {
    species: 'species',
    noise$: 'noise', // wrong
}

const test4: OOA = {
    species: '#species', // wrong
    noise: 'noise',
}

脚步

1. 提取类型的键
2. Map 分布式目标联合类型的密钥类型
3. 将每个部分包装为元组，以避免在下一步中对其进行更改
4. 将联合类型更改为交集类型
5. 解开元组类型，就是答案