how to compile typescript with react definitions

Question

I am trying to write a typescript module which make use of React.addons.update. However, I couldn't find a way to make it compile.

I have a folder with the following files:

• https://github.com/borisyankov/DefinitelyTyped/blob/master/react/react.d.ts

• test.ts containing:

  /// <reference path="react.d.ts"/>
  React.addons.update({}, {test : {$set : "foo" }});
  

I run the following commands:

node <pathtotsc>\tsc -v
=> message TS6029: Version 1.3.0.0

node <pathtotsc>\tsc react.d.ts test.ts
=> test.ts(2,1): error TS2304: Cannot find name 'React'.

What I am missing? How to reference correctly the react definition?

edit

node <pathtotsc>\tsc test.ts
test.ts(2,1): error TS2304: Cannot find name 'React'.

Answer 1

The relevant information can be found here. The trick is to "reverse" the explanation to understand how a definition file is meant to be consumed.

In this case, react.d.ts shoud be used like this:

/// <reference path="react.d.ts"/>
import React = require("react/addons");
React.addons.update({}, {$set : "foo" });

Sadly, this require the module compilation flag for tsc, which I don't want to use (I want static only compilation). The solution is to either use modules, or add a line like at the end of the definition file:

declare var React : AddonsExports

This works, but sadly the interface declaration for update is incorrect, so I cannot use it even with this modification.

Answer 2

As of Jan. 14, 2016, with React 0.14.3 and Typescript 1.6.2, the following d.ts import finally made Typescript recognize React and ReactDomin ts files.

tsd install react-global --save tsd update --save --overwrite

I must have used an old tutorial originally. It said I only needed the react.d.ts file. But since then, it seems that newer versions of React require more definition files.

Installing react-global added all these files to my tsd.d.ts:

/// <reference path="react/react-dom.d.ts" /> /// <reference path="react/react-addons-create-fragment.d.ts" /> /// <reference path="react/react-addons-css-transition-group.d.ts" /> /// <reference path="react/react-addons-linked-state-mixin.d.ts" /> /// <reference path="react/react-addons-perf.d.ts" /> /// <reference path="react/react-addons-pure-render-mixin.d.ts" /> /// <reference path="react/react-addons-test-utils.d.ts" /> /// <reference path="react/react-addons-transition-group.d.ts" /> /// <reference path="react/react-addons-update.d.ts" /> /// <reference path="react/react-global.d.ts" />