内容丰富的 SDK，扩展通用 object Typescript 类型

Question

I am writing an app using the Contentful App SDK, but I'm running into an issue with Typescript typings. I'm passing a parameter to a dialog like so:

sdk.dialogs.openCurrentApp({title: "Edit Layout", parameters:{id}});

But when I try to access the property in the dialog component I find that when I try to access the attribute under "invocations" as described in the documentation, I get an error: "Property 'id' does not exist on type 'Object'."

const layoutId = sdk.parameters?.invocation?.id;

I tried using hasOwnProperty to check that the object indeed contains id to harden my code, but it does not help with the Typescript typing error:

const layoutId = sdk.parameters?.invocation?.hasOwnProperty("id") && sdk.parameters.invocation.id;

I had a quick look in the source of the SDK and found that the Parameter indeed uses a generic object type.

I tried making a custom type with id added and casting to that, but that does not quite work:

type ParameterInvocationWithId = {
  id: string;
} & ParametersAPI;

...

const layoutId = sdk.parameters?.invocation?.hasOwnProperty("id") && sdk.parameters.invocation.id as ParameterInvocationWithId;

What would be the best way to deal with this?

Answer 1

I figured it out. I needed to specify a type to show the shape of the object on invocation :

interface InvocationParams {
  id?: string;
}

Then, instead of using hasOwnProperty or trying to access id directly I had to do it in two steps, so I would create a new const from the invocation object and cast it to my params type and then pluck the id off that object:

const params = sdk.dialog.parameters?.invocation as InvocationParams;
let layoutId = params.id;