Jux provides robust TypeScript support, automatically generating type definitions for your tokens, utilities, and screen conditions. This ensures type safety and enables autocompletion in your development environment.
Generating Type Definitions
To generate TypeScript definitions for your Jux configuration, use the following CLI command:
This command will create a types.d.ts file containing definitions based on your Jux configuration. The output directory can be customized using the definitions_directory option in your Jux configuration.
Generate types to specific directory:
Sample Jux Configuration
Generated Type Definitions
Based on this configuration, Jux would generate a types.d.ts file that looks like this:
Using the Generated Types
To use the generated types in your project, add the path to the types.d.ts file in your tsconfig.json:
Now you can use Jux with full TypeScript support in your project:
Your IDE will provide autocompletion for token names, utility names, and screen conditions, and validate their usage, helping prevent errors and improve the development experience.
The styled Function in TypeScript
Jux’s styled function is fully typed, providing TypeScript support. This enables type-safe styling, autocompletion for props and variants, and proper typing for HTML attributes.
Basic Usage
Here’s an example of using the styled function with TypeScript:
In this example:
We define a ButtonProps interface to specify the custom props for our button.
We specify the HTML element type (button)
Using the styled component
When you use the styled component in your React code, you’ll get full TypeScript support:
You’ll get:
Autocompletion for the custom props (selected, disabled, and type).
Type checking for the prop values (e.g., ensuring type is either ‘primary’ or ‘secondary’).
Autocompletion and type checking for all standard HTML button attributes.