React/Typescript Ag-grid

Question

i'm trying to use ag-grid in my application with react and typescript. ag-grid .d.ts files are inside the project so i can't install then with typings install --save...

The problem is when i try to import it...

import { AgGridReact } from 'ag-grid-react';

I'm using VSCode... it shows me "[ts] cannot find module", while compiling same thing.

More info about the application: tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": false,
        "removeComments": false,
        "sourceMap": false,
        "target": "es5",
        "module": "system",
        "jsx": "react"
    }
}

typings.json

{
  "name": "focco-sys-jspm",
  "dependencies": {
    "react": "registry:npm/react#15.0.1+20160601175240",
    "react-addons-update": "registry:npm/react-addons-update#0.14.0+20160324044346",
    "react-dom": "registry:npm/react-dom#15.0.1+20160705210405",
    "react-router": "registry:npm/react-router#2.4.0+20160811060709"
  }
}

Finally i tried to include the references in my typings file index.d.ts

/// <reference path="modules/react-addons-update/index.d.ts" />
/// <reference path="modules/react-dom/index.d.ts" />
/// <reference path="modules/react-router/index.d.ts" />
/// <reference path="modules/react/index.d.ts" />
/// <reference path="../jspm_packages/npm/[email protected]/main.d.ts" />
/// <reference path="../jspm_packages/npm/[email protected]/main.d.ts" />

Possible duplicate of How to export a TypeScript module for SystemJS? — Paul Sweatte
I'm using ag-grid and ag-grid-react with no custom config, no typings. Is this due to an older version of TS that is now fixed in 2.4 upwards? — Ray Booysen

Arambh Gaur Arambh Gaur · Accepted Answer · 2017-09-13T20:10:37

Change your typings.json to

{
  "name": "focco-sys-jspm",
  "dependencies": {
    "react": "registry:npm/react#15.0.1+20160601175240",
    "react-addons-update": "registry:npm/react-addons-update#0.14.0+20160324044346",
    "react-dom": "registry:npm/react-dom#15.0.1+20160705210405",
    "react-router": "registry:npm/react-router#2.4.0+20160811060709",
    "ag-grid": "13.1.x",
    "ag-grid-react": "13.1.x"
  }
}

Once you have included these two dependencies go to your root package folder and open a command prompt from there. In the command prompt enter npm install. It should install the ag-grid dependencies.

React/Typescript Ag-grid

1 Answers