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 componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. 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 componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. 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.


Did this page help you?