React
रिएक्ट, वेबपैक और टाइपस्क्रिप्ट इंस्टॉलेशन

टिप्पणियों

npm install --save @types/react @types/react-dom

webpack.config.js

module.exports = {
    entry: './src/index',
    output: {
        path: __dirname + '/build',
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.tsx?$/,
            loader: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    resolve: {
        extensions: ['.ts', '.tsx']
    }
};

मुख्य घटक हैं (मानक entry , output और अन्य वेबपैक गुणों के अतिरिक्त):

लोडर

इसके लिए आपको एक नियम बनाने की आवश्यकता है जो .ts और .tsx फ़ाइल एक्सटेंशन के लिए परीक्षण करता है, ts-loader रूप में ts-loader निर्दिष्ट करें।

टीएस एक्सटेंशन का समाधान करें

तुम भी जोड़ने की जरूरत है .ts और .tsx में एक्सटेंशन resolve सरणी, या webpack उन्हें नहीं देख सकेंगे।

tsconfig.json

यह आपको पाने और चलाने के लिए एक न्यूनतम tsconfig है।

{
    "include": [
        "src/*"
    ],
    "compilerOptions": {
        "target": "es5",
        "jsx": "react",
        "allowSyntheticDefaultImports": true
    }
}

आइए गुणों को एक-एक करके देखें:

include

यह स्रोत कोड की एक सरणी है। यहां हमारे पास केवल एक प्रविष्टि है, src/* , जो यह निर्दिष्ट करती है कि src निर्देशिका में सब कुछ संकलन में शामिल किया जाना है।

compilerOptions.target

निर्दिष्ट करता है कि हम ES5 लक्ष्य को संकलित करना चाहते हैं

compilerOptions.jsx

इसे true सेट करने से टाइपस्क्रिप्ट स्वतः ही आपके tsx सिंटैक्स को <div /> से React.createElement("div") कर React.createElement("div") ।

compilerOptions.allowSyntheticDefaultImports

आसान संपत्ति जो आपको नोड मॉड्यूल आयात करने की अनुमति देगा जैसे कि वे ईएस 6 मॉड्यूल हैं, इसलिए ऐसा करने के बजाय

import * as React from 'react'
const { Component } = React

आप बस कर सकते हैं

import React, { Component } from 'react'

बिना किसी त्रुटि के आपको बताएंगे कि रिएक्ट का कोई डिफ़ॉल्ट निर्यात नहीं है।

मेरा पहला घटक

import React, { Component } from 'react';
import ReactDOM from 'react-dom';


interface AppProps {
    name: string;
}
interface AppState {
    words: string[];
}

class App extends Component<AppProps, AppState> {
    constructor() {
        super();
        this.state = {
            words: ['foo', 'bar']
        };
    }

    render() {
        const { name } = this.props;
        return (<h1>Hello {name}!</h1>);
    }
}

const root = document.getElementById('root');
ReactDOM.render(<App name="Foo Bar" />, root);

जब आप प्रतिक्रिया के साथ टाइपस्क्रिप्ट का उपयोग कर रहे हैं, तो एक बार जब आपने रिएक्ट निश्चित रूप से टाइप की गई परिभाषाएँ ( npm install --save @types/react ) डाउनलोड कर ली हैं, तो हर घटक को आपको टाइप एनोटेशन जोड़ने की आवश्यकता होगी।

आप ऐसा करते हैं:

class App extends Component<AppProps, AppState> { }

जहां AppProps और AppState क्रमशः आपके घटकों के प्रॉप्स और राज्य के लिए इंटरफेस (या प्रकार उपनाम) हैं।