typescript - 如何访问可选属性的 "type"属性？

Question

请参阅下面的代码片段:

interface MyObj {
  myOptionalProp: MyOptionalPropObj;  // NOT OPTIONAL
} 

interface MyOptionalPropObj {
  myProp1: SomeType;
  myProp2?: SomeType;
}

type Test1 = MyObj['myOptionalProp']['myProp1'];  // Works
type Test2 = MyObj['myOptionalProp']['myProp2'];  // Works

访问 MyObj 中的嵌套属性将分配给 Test1和 Test2如果 myOptionalProp 可以正常工作不是可选的。

然而。一次 myOptionalProp是可选的:

interface MyObj {
  myOptionalProp?: MyOptionalPropObj; // OPTIONAL
} 

interface MyOptionalPropObj {
  myProp1: SomeType;
  myProp2?: SomeType;
}

type Test1 = MyObj['myOptionalProp']['myProp1'];  // Doesn't work
type Test2 = MyObj['myOptionalProp']['myProp2'];  // Doesn't work

TypeScript 抛出此错误:

Property 'myProp1' does not exist on type 'MyOptionalPropObj | undefined'.ts(2339)

访问类型时有没有办法断言？相当于

myObj.myOptionalProp!.myProp1

但是对于 type年代？
MyObj此示例中的类型是在我们的情况下自动生成的，特别是 GraphQL 代码生成器，我们无法控制它的结构。我们可以简单地使用类型 SomeType直接，但目前这不是一个选择。

自动生成的类型示例是:

export type TestQuery = (
  { __typename?: 'Query' }
  & { profile: Maybe<(
    { __typename?: 'Profile' }
    & Pick<Profile, 'id' | 'name' | 'updatedAt' | 'createdAt'>
    & { owner: Maybe<(
      { __typename?: 'User' }
      & Pick<User, 'id' | 'displayName'>
    )>, users: Maybe<Array<(
      { __typename?: 'User' }
      & Pick<User, 'id' | 'displayName'>
    )>> }
  )> }
);

在此示例中，我们无法访问 owner profile 的属性(property)因为所有者可以是未定义的。

TestQuery['profile']['owner'] // Doesn't work

Answer 1

如果一个属性是可选的，它的类型是 undefined 的 union-ed，并且由于只有 union 的公共(public)属性是可访问的，原始类型的所有属性都变得不可访问。

您需要删除 undefined来自工会。预定义的条件类型Exclude会成功的:

interface MyObj {
    myOptionalProp?: MyOptionalPropObj; // OPTIONAL
}

interface MyOptionalPropObj {
    myProp1: string;
    myProp2?: number;
}

type Test1 = Exclude<MyObj['myOptionalProp'], undefined>['myProp1']; //ok
type Test2 = Exclude<MyObj['myOptionalProp'], undefined>['myProp2'];  // ok

Playground Link