Using TypeScript in Frontastic components

Frontastic has support for TypeScript built-in. We're using babel-TypeScript for compilation so that asset resolving will behave exactly the same as in your JSX components. The TypeScript compiler is still used for type checking during the test-static phase or by running yarn run check-typescript.

An example for a TypeScript Frontastic component could look like this:

import React, { FunctionComponent } from 'react'

import { Tastic } from '@frontastic/catwalk/src/js/types/frontend'

export interface Props {
    tastic: Tastic,

export const Newsletter: FunctionComponent<Props> = ({ tastic }: Props) => {
    return <h1>Newsletter</h1>

The file name must end in .tsx so it's compiled as TypeScript.

You'll notice the any type we specify for the Frontastic component data in this example, which isn't the way to go. We'll be providing types for all Frontastic domain objects soon.

Type Definitions

Since version 1.1.10 of @frontastic/catwalk and @frontastic/common you'll also find basic type definitions for the most common types under @frontastic/catwalk/src/js/types and @frontastic/common/src/js/types.