The types and interfaces used in Pages are documented in the PagesJS GitHub repo. Check it out here.

We strongly recommend you familiarize yourself with these interfaces. Knowing them will help you write clean code that leverages TypeScript's type system.

Generating TypeScript Interfaces

Note: You must be on Yext CLI version 0.1_342 or higher to use this command. Refer to our installation guide for more information.

TypeScript makes useful patterns from typed object-oriented programming available to JavaScript developers.

For Pages development, the Yext CLI offers a command that automatically generates interfaces for your project based on Stream objects in your templates.

To utilize this feature, run the following command from the root of your project:

yext types generate pages

Note: You need to run npm run dev before you can generate types, and again after you make edits to the TemplateConfig of any of your templates. This is because the Yext CLI looks at JSON files in the dist folder to generate types, which are created/refreshed each time you restart the development server.

Once you have run the command, a file containing your generated interfaces will be automatically written to src/types/autogen.ts. From there, you can easily import these interfaces into your components.

Using Generated Types in Your Templates

Given the following TemplateConfig:

// src/templates/locations.tsx

export const config: TemplateConfig = {
  stream: {
    $id: "locations",
    fields: ["id", "name", "slug", "address"],
    filter: {
      entityTypes: ["location"],
    },
    localization: {
      locales: ["en"],
    },
  },
};

The following type will be generated after running yext types generate pages:

// src/types/autogen.ts

export interface Locations {
  id: string,
  name: string,
  slug: string,
  address: Address,
}

When using the generated Locations type, type your template function as Template<TemplateRenderProps<Locations>> to ensure it receives the correct structure of props, including the document object shaped as Locations:

// src/templates/locations.tsx

const LocationsTemplate: Template<TemplateRenderProps<Locations>> = ({ document }) => {
  const { id, name, address } = document;

  return (
    <>
      {/* render Location fields here */}
    </>
  );
};

Limitations

This command only supports one level of nesting for entity references. Given the following stream definition:

export const config: TemplateConfig = {
  stream: {
    $id: "Example Stream",
    filter: {...},
    fields: [
      "c_entityList.field1",
      "c_entityList.field2",
      "c_entityList.c_entityList2.field1",
      "c_entityList.c_entityList2.field2"
    ],
    localization: {...},
  },
};

The resulting interfaces will look like this — note that c_entityList2 is omitted because it exceeds one level of nested depth:

export interface ExampleStream {
  c_entityList: C_relatedMenuItems[],
}

export interface C_entityList {
  field1?: string,
  field2?: string,
}