At AG Grid we use Plunker to provide an interactive playground for all of our code examples. In the latest release we have updated our template to take advantage of Plunker's Typescript support.

Improved Developer Experience

We believe that the addition of in browser Typescript support will be a massive win for our typed examples: Typescript, Angular and React. You will now get auto completion in Plunker, making it quicker to adjust config, as you do not have to know the property name exactly.

You also can now view the JsDoc annotations directly in Plunker, to help explain each property while you are using them.

Finally, if you make a mistake and use the wrong property you will be alerted to this with red squiggles. No more will you be left scratching your head wondering why a demo is not working due to a typo!

You can try this out for yourself in this Plunker.

How to enable Typescript support in Plunker?

The key to having type support in Plunker is the presence of a package.json file. If this file is present then Plunker knows where to find the types for the packages included. This works well with AG Grid as we publish our types as part of our packages.

As an example this is the package.json file for our React Hooks TS demos. We include react and react-dom so that we have typing for hooks as well as our own AG Grid apis and configuration.

{
  "name": "ag-grid-packages",
  "description": "NOTE: This package.json file is solely used by Plunker to look up type definitions.",
  "dependencies": {
    "react": "17",
    "react-dom": "17",
    "ag-grid-react": "*",
    "ag-grid-community": "*",
    "ag-grid-enterprise": "*"
  }
}

As the description says, this package.json file does not control the versions used in the demo. That is still done via our SystemJs config.

However, watch this space as we may convert our examples to use the Plunker Runtime that would enable the package.json file to configure the versions used within the app.