TypeScript Integration

ECSS generates types for every .ecss file, so importing components and parameters is fully typed — with no manual type definitions.

How it works

During the build, ECSS writes declarations (.d.ts) to the service directory <project>/.ecss/types. For each block, a {Block}Params parameter interface is generated, and *.ecss imports receive the types of the exported components and the blocks object.

// Generated from @block Button { @param --variant Variant; ... }
export interface ButtonParams {
  variant: 'primary' | 'secondary';
}

tsconfig setup

For TypeScript to pick up the generated types, add the .ecss/types directory to rootDirs — this "overlays" it onto your sources, and an import of ./Button.ecss finds its types:

// tsconfig.json (or tsconfig.app.json)
{
  "compilerOptions": {
    "rootDirs": [".", "./.ecss/types"]
  }
}

rootDirs is used (rather than paths/include) because the types live "next to" the source .ecss files in a virtually overlaid directory.

.gitignore

The .ecss/ directory is recreated on every build — add it to .gitignore:

# .gitignore
.ecss

Disabling generation

Declaration generation is enabled by default. To disable it, use the generateDeclarations: false option in ecss.config.

See also

• Configuration — the generateDeclarations option
• Data Types — parameter types
• Getting started — setting up a project from scratch