Turn your content types into strongly typed models

  • typescript icon
    TypeScript
  • dot-net icon
    .NET
  • java icon
    Java
calendar icon
user iconJan Cerman
clock icon10 minutes
bullseye iconDelivery API
arrow-down-line iconDownload PDF
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.
  • Develop with Kontent.ai
  • Manage API keys
  • Hello World
  • Hello Web Spotlight
  • Try sample apps
  • Build apps
  • Decide navigation and URLs
  • Environments
  • Get Developer Certification
light-bulb icon
Sign in
  • desktop-alt icon
  • Cheat sheets
  • Documentation
  • API reference
  • Product updates
Kontent.ai Learn
  • Plan
  • Set up
  • Model
  • Develop
  • Create
  • Generate models
  • Resolve rich text
  • Resolve linked content
  • Build your first app
Copyright © 2024 Kontent.aiarrow-right-top-square icon. All rights reserved.
  • Webarrow-right-top-square icon
  • Privacy policyarrow-right-top-square icon
  • Cookies policy
  • Consent settingsarrow-right-top-square icon
  • Securityarrow-right-top-square icon
  • GDPRarrow-right-top-square icon
Sign in with your Kontent.ai credentials or sign up for free to unlock the full lesson, track your progress, and access exclusive expert insights and tips!
  • TypeScript
  • Shell
  • TypeScript
We recommend that you generate the models using the TypeScript model generatorarrow-right-top-square icon.
  • Sign in
    • 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 { IContentItem, Elements } from '@kontent-ai/delivery-sdk';

/**
 * Generated by '@kontent-ai/model-generator@5.2.0'
 * Note: Element comments were omitted for brevity.
 */
export type Homepage = IContentItem<{
  headline: Elements.TextElement;
  body_text: 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;
    The Homepage content type for Hello World
  • Life without strongly typed models
  • Use strongly typed models
  • Generate models
  • Get strongly typed content
    • Homepage content type.