टाइपस्क्रिप्ट

Question

के साथ प्रतिक्रिया-राउटर का उपयोग करना मैं टाइपस्क्रिप्ट पर एक छोटे से प्रतिक्रिया ऐप को पोर्ट करने का प्रयास कर रहा हूं।

मुझे प्रतिक्रिया-राउटर के साथ समस्याएं आ रही हैं। मैं निश्चित रूप से से नवीनतम परिभाषाओं टाइप है, लेकिन निम्नलिखित कोड मुझे त्रुटियों देता है:

var routes:Router.Route = (
<Route name="root" path="/" handler={MyApp}> 
    <Route path="dashboard" handler={MyDash} /> 
    <DefaultRoute handler={SomeSection} /> 
    <NotFoundRoute handler={NotFoundPage} /> 
</Route> 
); 

Router.run(routes, function (Handler:React.Component<any, any>) { 
    React.render(<Handler/>, document.body); 
}); 

ये संकलन त्रुटियों मैं कर रहे हैं:

js/app.tsx(31,3): error TS2605: JSX element type 'Component<RouteProp, any>' is not a constructor function for JSX elements. 
    Property 'render' is missing in type 'Component<RouteProp, any>'. 
js/app.tsx(32,5): error TS2605: JSX element type 'Component<RouteProp, any>' is not a constructor function for JSX elements. 
js/app.tsx(47,5): error TS2605: JSX element type 'Component<DefaultRouteProp, any>' is not a constructor function for JSX elements. 
    Property 'render' is missing in type 'Component<DefaultRouteProp, any>'. 
js/app.tsx(49,5): error TS2605: JSX element type 'Component<NotFoundRouteProp, any>' is not a constructor function for JSX elements. 
    Property 'render' is missing in type 'Component<NotFoundRouteProp, any>'. 
js/app.tsx(53,20): error TS2345: Argument of type '(Handler: Component<any, any>) => void' is not assignable to parameter of type '(Handler: RouteClass, state: RouterState) => void'. 
    Types of parameters 'Handler' and 'Handler' are incompatible. 
    Type 'Component<any, any>' is not assignable to type 'RouteClass'. 
js/app.tsx(54,17): error TS2604: JSX element type 'Handler' does not have any construct or call signatures. 

react- का एक सेट को प्रारंभ करने के लिए सही तरीका क्या है टाइपस्क्रिप्ट का उपयोग कर राउटर मार्ग?

(मैं स्पष्ट करना चाहिए कि मैं एक रात टाइपप्रति निर्माण जो --jsx react झंडा

प्रकार परिभाषाओं में

Answer 1

त्रुटियों का कारण प्रतीत होता है के माध्यम से JSX के लिए समर्थन हासिल है उपयोग कर रहा हूँ। आप उन्हें चारों ओर .d.ts संशोधित करके काम कर सकते हैं इस प्रकार फाइलें:

react.d.ts में, JSX.ElementClass इंटरफ़ेस

interface ElementClass extends React.Component<any, any> { 
} 

से हटाने renderreact-router.d.ts में, React.ReactElement<RouteProp>

function run(routes: React.ReactElement<RouteProp>, callback: RouterRunCallback): Router; 
function run(routes: React.ReactElement<RouteProp>, location: LocationBase, callback: RouterRunCallback): Router; 

Answer 2

करने के लिए बदल run विधि के routes पैरामीटर के प्रकार जड़ समस्या प्रतिक्रिया रूटर में कुछ परिभाषाओं नहीं होने एक स्पष्ट विधि प्रस्तुत करना() था। यह (परोक्ष रूप से) द्वारा https://github.com/borisyankov/DefinitelyTyped/pull/5197

नोट तय किया गया है कि इस कोड गलत है:

Router.run(routes, function (Handler:React.Component<any, any>) { 
    React.render(<Handler/>, document.body); 
}); 

यह होना चाहिए:

Router.run(routes, function (Handler: new() => React.Component<any, any>) { 
    React.render(<Handler/>, document.body); 
}); 

क्योंकि Handler एक प्रतिक्रिया घटक के लिए एक निर्माता है, इसका एक उदाहरण नहीं।

Answer 3

यह प्रतिक्रिया रूटर के साथ टाइपप्रति 1.6 के तहत चल रहा बनाने के लिए, मैं प्रतिक्रिया-router.d.ts फ़ाइल में निम्न कोड जोड़ दिया है:

interface RouterClass extends React.ComponentClass<any> {} 

var Router: RouterClass; 

//For Router 

function createElement(

type: ReactRouter.RouterClass, 

props: any, 

...children: __React.ReactNode[]): ReactRouter.Router; 

} 

interface RouteProp { 
    name?: string; 
    path?: string; 
    handler?: React.ComponentClass<any>; 
    ignoreScrollBehavior?: boolean; 
    component?: React.ComponentClass<any>; 
}