Get Free Trial
  1. API reference
Connecting to Data Source
Configuring the component
  • Documentation for older versions
  • Table of contents

    Integration with TypeScript

    This tutorial will help you integrate Flexmonster with TypeScript.

    Prerequisites

    The most convenient way to work with Flexmonster Pivot is Flexmonster CLI — a command-line interface tool for Flexmonster. Install the CLI globally using npm:

    npm install -g flexmonster-cli

    Now a new flexmonster command is available in the console. Learn more about Flexmonster CLI and its commands in our documentation.

    Then choose one of the following approaches:

    1. A TypeScript application with Flexmonster Pivot
    2. A TypeScript + Webpack application with Flexmonster Pivot
    3. TypeScript type definitions for Flexmonster

    A TypeScript application with Flexmonster Pivot

    Create the sample project with the following CLI command:

    flexmonster create typescript -r

    The flexmonster create typescript command does the following:

    • Downloads a .zip archive with the sample TypeScript project from GitHub.
    • Automatically unpacks the files in the current folder — as a result, the flexmonster-typescript-project/ folder will appear in your working directory.

    The -r option, which is short for --run, completes the following tasks:

    • Installs all the npm dependencies described in package.json.
    • Launches the index.html file from a browser.

    When the contents of the main.ts file are changed, use the following command to recompile main.js:

    tsc main.ts

    A TypeScript + Webpack application with Flexmonster Pivot

    Create the sample project with the following CLI command:

    flexmonster create typescript webpack -r

    The flexmonster create typescript webpack command does the following:

    • Downloads the .zip archive with the sample TypeScript + Webpack project from GitHub.
    • Automatically unpacks the files in the current folder — as a result, the flexmonster-typescript-webpack-project/ folder will appear in your working directory.

    The -r option, which is short for --run, completes the following tasks:

    • Installs all the npm dependencies described in package.json.
    • Compiles the application and runs it in a browser.

    TypeScript type definitions for Flexmonster

    TypeScript type definitions for Flexmonster can be found inside the node_modules/flexmonster/types/flexmonster.d.ts file.

    To install the flexmonster npm package to the node_modules/ directory, run the following command from the folder containing package.json:

    flexmonster add js-flexmonster

    What’s next?

    You may be interested in the following articles: