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'.

Simon Bergot · Accepted Answer · 2014-12-10 12:51:24Z

3

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.

answered Dec 10, 2014 at 12:51

Simon Bergot

10.6k7 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

devdanke · Accepted Answer · 2016-02-25 20:36:13Z

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" />

Fenton · Accepted Answer · 2014-12-10 13:14:16Z

0

Alternatively, you can use the react-addons.d.ts file (available on NuGet or via Definitely Typed).

/// <reference path="scripts/typings/react-addons/react-addons.d.ts" />

React.addons.update({}, { test: { $set: "foo" } });

answered Dec 10, 2014 at 13:14

Fenton

253k74 gold badges404 silver badges414 bronze badges

Collectives™ on Stack Overflow

how to compile typescript with react definitions

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related