Integration with TypeScript

This tutorial will help you integrate Flexmonster with TypeScript.

Prerequisites

Node.js
Flexmonster CLI
Install it with the following command:
```
npm install -g flexmonster-cli
```

Run the sample project from GitHub

Download the sample project with the flexmonster create command. You can choose a TypeScript or TypeScript + webpack project:

TypeScript + webpack

flexmonster create typescript webpack -r

This command downloads the TypeScript + webpack project from GitHub and launches it in the browser. To shut down the project from the console, press Ctrl + C (Control + C on macOS).

The sample project is located inside the flexmonster-typescript-webpack-project/ folder in your current working directory.

TypeScript

flexmonster create typescript -r

This command downloads the TypeScript project from GitHub and launches it in the browser. To shut down the project from the console, press Ctrl + C (Control + C on macOS).

The sample project is located inside the flexmonster-typescript-project/ folder in your current working directory.

If you change the contents of the main.ts file, recompile the main.js file using the following command:

npx tsc

Integrate Flexmonster into a TypeScript application

Step 1. For integration with TypeScript, we will need Flexmonster type definitions, which can be found in the flexmonster npm package. Download the package by running the following command inside your project:

flexmonster add js-flexmonster

The command downloads flexmonster to the node_modules/ folder and adds it as an npm dependency to the package.json file.

Step 2. Add Flexmonster to the types array in the tsconfig.json file:

{
  "compilerOptions": {
    "types": ["flexmonster"],
    // ...
  },
  // ...
}

Step 3. Follow the steps from the Embed Flexmonster section to add Flexmonster to your project. Note that you need instructions from the Flexmonster CLI or npm tab.

Step 4. Run your project to see the result.

Example

Here is an example of how Flexmonster integration with TypeScript can be done when the Vite bundler is used:

index.html

<!DOCTYPE html>
<html>
  <body>
    <!-- Create a div container to insert the component -->
    <div id="pivotContainer"></div>

    <!-- Include main.ts -->
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

main.ts

import Flexmonster from "flexmonster";
import "flexmonster/flexmonster.min.css";

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true
});

tsconfig.json

{
  "compilerOptions": {
    "types": ["flexmonster"],
    // Other configs
  },
  // ...
}

Troubleshooting

If you run into any issues during the integration, visit our troubleshooting page.