reactjs - hvordan kompilere typescript med react-definisjoner

Jeg prøver å skrive en Typescript-modul som bruker React.addons.update. Imidlertid kunne jeg ikke finne en måte å få den til å kompilere på.

Jeg har en mappe med følgende filer:

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

  • test.ts som inneholder:

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

Jeg kjører følgende kommandoer:

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

Hva mangler jeg? Hvordan referere riktig til React-definisjonen?

rediger

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

Svar #1

Den relevante informasjonen kan finnes her. Trikset er å «snu» forklaringen for å forstå hvordan en definisjonsfil er ment å bli brukt.

I dette tilfellet bør react.d.ts brukes slik:

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

Dessverre krever dette modulkompileringsflagget for tsc, som jeg ikke vil bruke (jeg vil kun ha statisk kompilering). Løsningen er enten å bruke moduler, eller legge til en linje på slutten av definisjonsfilen:

declare var React : AddonsExports

Dette fungerer, men dessverre er grensesnittdeklarasjonen for update feil, så jeg kan ikke bruke den selv med denne modifikasjonen.

Svar #2

Per 14. januar 2016, med React 0.14.3 og Typescript 1.6.2, gjorde følgende d.ts-import endelig at Typescript anerkjente React og ReactDom i ts-filer.

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

Jeg må ha brukt en gammel veiledning opprinnelig. Den sa at jeg bare trengte react.d.ts-filen. Men siden da ser det ut til at nyere versjoner av React krever flere definisjonsfiler.

Å installere react-global la til alle disse filene i min tsd.d.ts:

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

Relaterte artikler