Kontent.ai
Copyright © 2023 Kontent.ai. All rights reserved.
  • Web
  • Privacy policy
  • Cookies policy
  • Consent settings
  • Security
  • GDPR
  • Documentation
  • API reference
  • Product updates
Kontent.ai Learn
  • Plan
  • Set up
  • Model
  • Develop
  • Create

Turn your content types into strongly typed models

Is this page helpful?
Complete and continue
  • Sign in
    • TypeScript
      TypeScript
    • .NET
      .NET
    • Java
      Java
    Jan Cerman
    10 minutes
    Delivery API
    Improve your development experience by using strongly typed models based on your Kontent.ai content types.

    Life without strongly typed models

    When getting content directly from the Delivery REST API, you receive content items as JSON objects. Your app then needs to parse the JSON to display your content. For example, to access the Headline element in a content item, you'd use a notation like this response.data.item.elements.headline.value.
    In a more complicated scenario, this approach becomes cumbersome. It forces you to remember the JSON structure of your content items and the codenames of your content elements. To make this easier, use a Delivery SDK to map the retrieved content items to their strongly typed models.

    Use strongly typed models

    This practice has several advantages:
    • type safety during compile-time
    • convenience (IntelliSense remembers content type properties for you)
    • support of type-dependent functionalities
    The models are plain classes with no attached behavior or dependency on an external framework. Each model corresponds to a content type in your Kontent.ai project.
    To create a content type’s representation in code, you need a class with properties representing the individual content elements:
    • Each property is mapped to its content element's codename either explicitly or using a naming convention. For example, codename body_text becomes property bodyText.
    • Properties are usually typed using classes provided by the SDK.
    • Depending on the SDK, simple content elements (like text and number) are sometimes represented using native types (like string and integer).
    The following example is a strongly typed model of the Homepage content type.

    Generate models

    Use the model generator to create strongly typed models from your Kontent.ai project by providing your project’s environment ID.

    Get strongly typed content

    With your models defined and added to your application, you can use them when retrieving items from Kontent.ai.
    What's next?
    Resolve rich text content
    Apart from structured and formatted text, rich text elements can also contain references to content components and content items, and links to content items.Let’s see how to deal with these references so your rich text is displayed correctly.
    • Develop with Kontent.ai
    • Hello World
    • Hello Web Spotlight
    • Run a sample app
    • Build apps
    • Decide navigation and URLs
    • Environments
    • Get Developer Certification
    We recommend that you generate the models using the TypeScript model generator.
    • Generate models
    • Resolve rich text
    • Resolve linked content
    • Build your first app
    • TypeScript
    • shell
    • TypeScript
    Here is an example of retrieving, parsing, and displaying a content item.
    Here is the Homepage content type used in the previous TypeScript code example.

    A complete example

    This code example is equivalent to the first one but maps the retrieved content item to a strongly typed model. 
    // Tip: Find more about JS/TS SDKs at https://kontent.ai/learn/javascript
import { Elements, IContentItem } from '@kontent-ai/delivery-sdk';

/**
 * Generated by '@kontent-ai/model-generator@5.0.0' at 'Thu, 14 Jul 2022 13:58:53 GMT'
 *
 * Homepage
 * Id: b0c0f9c2-ffb6-4e62-bac9-34e14172dd8c
 * Codename: homepage
 */
export type Homepage = IContentItem<{
     headline: Elements.TextElement;
     bodyText: Elements.RichTextElement;
     picture: Elements.AssetsElement;
}>;
    npm i @kontent-ai/model-generator -g

kontent-generate --environmentId=<YOUR_ENVIRONMENT_ID> --apiKey=<YOUR_MANAGEMENT_API_KEY>
    // Tip: Find more about JS/TS SDKs at https://kontent.ai/learn/javascript
import { createDeliveryClient } from '@kontent-ai/delivery-sdk';

import { Homepage } from './models/homepage';

// Initializes the Delivery client and registers your model in type resolvers
const deliveryClient = createDeliveryClient({
    environmentId: '8d20758c-d74c-4f59-ae04-ee928c0816b7',
});

var homepage: Homepage;

// Gets an item by codename from Kontent.ai and maps it to a strongly typed model
const response = await deliveryClient.item<Homepage>('hello_caas_world')
  .toPromise();

homepage = response.data.item;
  • Life without strongly typed models
  • Use strongly typed models
  • Generate models
  • Get strongly typed content