Test Enterprise-Class Web CMS Scrivito Free for 30 Days
Test Scrivito Free for 30 Days

Getting Started with TypeScript

New in 1.25.0 [BETA]

Getting Started with TypeScript

The Scrivito SDK includes type definitions for the building blocks of Scrivito-related entities such as CMS objects and widgets.

If you are new to TypeScript, you might first want to check out typescriptlang.org or the many other resources on the web (e.g., What is TypeScript and why would I use it in place of JavaScript?) before diving straight in here.

To try out the Scrivito SDK’s TypeScript beta, just install the latest version of the SDK:

npm install scrivito@latest

As an example, here’s how the “BlogOverviewWidget” component from the Scrivito Example Application would look like in TypeScript:

src/Widgets/BlogOverviewWidget/BlogOverviewWidgetComponent.tsx
import * as React from "react"; import * as Scrivito from "scrivito"; import BlogPostPreviewList from "../../Components/BlogPost/BlogPostPreviewList"; Scrivito.provideComponent( "BlogOverviewWidget", ({ widget }: Scrivito.WidgetComponentProps) => { let { tag }: { tag?: string | string[] } = Scrivito.currentPageParams(); const tags = widget.get<"stringlist">("tags"); if (!tag && tags.length) tag = tags; return ( <BlogPostPreviewList maxItems={widget.get<"integer">("maxItems")} author={widget.get<"reference">("author")} tag={tag} /> ); } );

As you can see, the type Scrivito.WidgetComponentProps informs TypeScript that widget is a Scrivito.Widget, and hence, get can be called on it.

To also inform TypeScript about the data type of the attribute value get returns, you can provide a corresponding hint to this type, e.g. "stringlist". This can be seen above from  widget.get<"stringlist">("tags"), which defines that const tags is of type string[]. Such a hint to an attribute’s type is needed because attributes are only declared in the respective Scrivito-application-specific object and widget class definitions.

Please be aware that definitions may be renamed or adjusted during the beta phase.