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.
Updated over 2 years ago