All documentation
  • Introduction
  • Connecting to data source
  • Browser compatibility
  • Documentation for older versions
  • Integration with TypeScript

    This tutorial will help you integrate Flexmonster with TypeScript.

    Prerequisites

    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 inside your project:

    flexmonster add js-flexmonster

    What’s next?

    You may be interested in the following articles: