TypeScript
प्रतिक्रिया के साथ टाइपस्क्रिप्ट का उपयोग करना (JS और देशी)

टाइपस्क्रिप्ट में ReactJS घटक लिखा है

आप टाइपस्क्रिप्ट में ReactJS के घटकों का आसानी से उपयोग कर सकते हैं। बस 'tsx' के लिए 'jsx' फ़ाइल एक्सटेंशन का नाम बदलें:

//helloMessage.tsx:
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(<HelloMessage name="John" />, mountNode);

लेकिन टाइपस्क्रिप्ट की मुख्य विशेषता (स्टेटिक टाइप चेकिंग) का पूर्ण उपयोग करने के लिए आपको कुछ चीजें करनी चाहिए:

1) React.createClass को ES6 क्लास में बदलें:

//helloMessage.tsx:
class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(<HelloMessage name="John" />, mountNode);

ES6 में परिवर्तित करने के बारे में अधिक जानकारी के लिए यहां देखें

2) प्रॉप्स और स्टेट इंटरफेस जोड़ें:

interface Props {
    name:string;
    optionalParam?:number;
}

interface State {
  //empty in our case
}

class HelloMessage extends React.Component<Props, State> {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
// TypeScript will allow you to create without the optional parameter
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
// But it does check if you pass in an optional parameter of the wrong type
ReactDOM.render(<HelloMessage name="Sebastian" optionalParam='foo' />, mountNode);

यदि प्रोग्रामर प्रॉपर पास करना भूल जाता है तो अब टाइपस्क्रिप्ट एक त्रुटि प्रदर्शित करेगा। या अगर उन प्रॉपर में पास होने की कोशिश कर रहे हैं जो इंटरफ़ेस में परिभाषित नहीं हैं।

टाइपस्क्रिप्ट और प्रतिक्रिया और वेबपैक

विश्व स्तर पर टाइपस्क्रिप्ट, टाइपिंग और वेबपैक स्थापित करना

npm install -g typescript typings webpack

लोडर स्थापित करना और टाइपस्क्रिप्ट लिंक करना

npm install --save-dev ts-loader source-map-loader npm link typescript

टाइपस्क्रिप्ट जोड़ने से ts-loader को एक अलग स्थानीय कॉपी टाइपस्क्रिप्ट doc की आवश्यकता के बजाय टाइपस्क्रिप्ट की अपनी वैश्विक स्थापना का उपयोग करने की अनुमति मिलती है

.d.ts 2.x के साथ .d.ts फ़ाइलों को स्थापित .d.ts

npm i @types/react --save-dev
npm i @types/react-dom --save-dev

.d.ts 1.x के साथ .d.ts फ़ाइलों को स्थापित .d.ts

typings install --global --save dt~react
typings install --global --save dt~react-dom

tsconfig.json कॉन्फ़िगरेशन फ़ाइल

{
  "compilerOptions": {
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react"
  }
}

webpack.config.js कॉन्फ़िगरेशन फ़ाइल

module.exports = {
    entry: "<path to entry point>",// for example ./src/helloMessage.tsx
    output: {
        filename: "<path to bundle file>", // for example ./dist/bundle.js
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },

    module: {
        loaders: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
            {test: /\.tsx?$/, loader: "ts-loader"}
        ],

        preLoaders: [
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            {test: /\.js$/, loader: "source-map-loader"}
        ]
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },
};

अंत में webpack या webpack -w चलाएं (वॉच मोड के लिए)

नोट : प्रतिक्रिया और अभिकर्मक बाहरी के रूप में चिह्नित हैं