Typings: “reference” example

When you set up Typings, you’ll need to run the following commands to get React to work:

typings init
typings install 'dt!react' --ambient --save
npm install react --save

This installs React type bindings, and the library. Note these are really separate things, NPM installs the actual code for React, and typings handles the type bindings, which enforce constraints.

If you do this without ‘ambient’ you get the error below:

typings/main/definitions/react/index.d.ts(2322,5): error TS2666: Exports and export assignments are not permitted in module augmentations.

If you mess this up, you can edit the typings.json to fix it, delete the typings folder, and run typings init again.

To actually reference the files Typings has installed, you can do this:

/// 
'use strict';

import * as React from 'react';

interface IMessage {
  msg: String;
}

class TestApp extends React.Component {
  public render(): Element {
    return 
test
;
  }
}

The “main.d.ts” file pulls in type bindings for all libraries you’ve installed. If you want to reference them directly (e.g. to avoid conflicts) you can also do that.

Alternately, you can create a tsconfig.json, and by writting this out you can remove the “reference” comment entirely:

{
    "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "dist"
    },
    "exclude": [
      "node_modules",
      "dist",
      "node_modules",
      "typings"
    ],
    "files": [
      "./app/index.tsx",
      "./typings/main.d.ts"
    ]
}