TypeScript - 你如何链接访问可选的嵌套类型属性？

Question

我有一个Client 类，用于存储应用程序需要保存在内存中的其他对象的缓存。对象缓存的结构是开发人员定义的。例如，如果我们有 Example 对象的缓存：

class Example {
    property1: string;
    property2: string;
}

开发者可能只想缓存property1。

---

import { EventEmitter } from "events";

// Constructor options for `Client`
interface ClientData {
    cacheStrategies?: CacheStrategies;
}

// How various objects should be cached
interface CacheStrategies {
    example?: ExampleCacheStrategies;
    ...
}

// Metadata for how each type of object should be cached
interface ExampleCacheStrategies {
    cacheFor?: number;
    customCache?: ExampleCustomCacheData;
}

// The custom structure of what parts of `example` objects should be cached
interface ExampleCustomCacheData {
    property1?: boolean;
    property2?: boolean;
}

// The object stored in `Client.exampleCache`, based on the custom structure defined in `ExampleCustomCacheData`
interface CustomExampleData<CachedExampleProperties extends ExampleCustomCacheData> {
    property1: CachedExampleProperties["property1"] extends true ? string /* 1 */ : undefined;
    property2: CachedExampleProperties["property2"] extends true ? string : undefined;
}

class Client<ClientOptions extends ClientData> extends EventEmitter {

    // The map's value should be based on the custom structure defined in `ExampleCustomCacheData`
    exampleCache: Map<string, CustomExampleData<ClientOptions["cacheStrategies"]["example"]["customCache"]>>;

    constructor(clientData: ClientOptions) {
        super();
        this.exampleCache = new Map();
    }
}

const client = new Client({
    cacheStrategies: {
        example: {

            /**
             * The properties of `example` objects that should be cached
             * This says that `property1` should be cached (string (1))
             */
            customCache: {
                property1: true, // (2)
                ... // (3)
            }
        }
    }
});

client.exampleCache.set("123", {
    property1: "value"
});

const exampleObject = client.exampleCache.get("123");

if (exampleObject) {

    // Should be `string` instead of `string | undefined` (2)
    console.log(exampleObject.property1);

    // `string | undefined`, as expected since it's falsey (3)
    console.log(exampleObject.property2);
}

正如console.log()s 上方的 cmets 中所解释的，目标是从缓存中拉出的对象使 property1 成为 string 而不是 string | undefined。

问题是exampleCache: Map<string, CustomExampleData<ClientOptions["cacheStrategies"]["example"]["customCache"]>>; 不起作用，因为ClientOptions["cacheStrategies"] 和ClientOptions["cacheStrategies"]["example"] 都是可选的。以下也不起作用：

exampleCache: Map<string, CustomExampleData<ClientOptions["cacheStrategies"]?.["example"]?.["customCache"]>>;

'>' expected 在?. 出现错误。我该如何解决这个问题？

Answer 1

像the optional chaining operator ?. 或non-null assertion operator ! 这样的语法只适用于值表达式，它会以某种形式传递给JavaScript。但是你需要一些与类型表达式一起工作的东西，它只存在于静态类型系统中并且在转译时是erased。

有一个NonNullable<T> utility type，它是非空断言运算符的类型系统模拟。给定一个union 类型T，NonNullable<T> 类型将与T 相同，但没有任何null 或undefined 类型的联合成员：

type Foo = string | number | undefined;
type NonNullableFoo = NonNullable<Foo>;
// type NonNullableFoo = string | number

事实上，编译器实际上使用它来表示应用了非空断言运算符的表达式的类型：

function nonNullAssertion<T>(x: T) {
    const nonNullX = x!;
    // const nonNullX: NonNullable<T>
}

所以，无论你有一个类型 T，其中包括 null 或 undefined，并且你想删除它，你都可以使用 NonNullable<T>。在您的代码中，您将需要多次执行此操作。为了简洁（代码，不是我的解释），让我们使用更短的别名：

type NN<T> = NonNullable<T>;

然后

class Client<C extends ClientData> extends EventEmitter {

  exampleCache: Map<string, CustomExampleData<
      NN<NN<NN<C["cacheStrategies"]>["example"]>["customCache"]>>
  >;

}

这编译没有错误，并且表现出我认为你想要的样子：

console.log(exampleObject.property1.toUpperCase()); // string
console.log(exampleObject.property2); // undefined

Playground link to code