TypeScript

Greenwood provides built-in support for TypeScript, either through type-stripping (default behavior) or with the ability to fallback to using the TypeScript compiler if you're leveraging certain transformation based TypeScript features (like enums and namespaces) or JavaScript syntax like Decorators. If you need these additional capabilities, you can set the useTsc option in your Greenwood configuration file.

You can read this guide to learn more about running TypeScript with NodeJS, including the --experimental-transform-types flag. You can see an example Greenwood TypeScript repo here.

Setup

The below steps will help you get up and running with TypeScript in your Greenwood project. The general recommendation is to use type-stripping during development for faster live reload, and then run TypeScript during CI (e.g. GitHub Actions) to check and enforce all types, e.g. tsc --project tsconfig.json.

You will need to use Node >= 22.6.0 and set the --experimental-strip-types flag
Install TypeScript into your project, e.g. npm i typescript --save-dev
Create a tsconfig.json file at the root of your project with these minimum configuration settings. We recommend adding the erasableSyntaxOnly setting

{
  "compilerOptions": {
    "module": "preserve",
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": false,
    "noEmit": true
  }
}

If you're feeling adventurous, you can use >=23.x and omit the --experimental-strip-types flag. Keep an eye on this PR for when unflagged type-stripping support may come to Node LTS 22.x. 👀

Types

Configuration

In addition to being able to author your components, SSR pages, and API routes in TypeScript, you can also author your configuration file (and plugins) in TypeScript by using a greenwood.config.ts file.

import type { Config } from '@greenwood/cli';

const config: Config = {
  // ...
}

export default config;

See our reference docs on Greenwood's available types for more information on authoring with TypeScript.

Import Attributes

Currently TypeScript does not support types for standard JSON and CSS Import Attributes. You can use the below snippets as a reference for providing these types for your own project in the meantime.

declare module "*.css" {
  const sheet: CSSStyleSheet;

  export default sheet;
}

declare module "*.json" {
  const data: object;

  export default data;
}

Edit on GitHub

Introduction

Pages

Resources

Plugins

Content As Data

Reference