टाइपस्क्रिप्ट को धीरे-धीरे अपने रिएक्ट प्रोजेक्ट में शामिल करें

बिट का उपयोग करके JS प्रोजेक्ट में TS घटकों को सुरक्षित रूप से एम्बेड करें

उदाहरण का उपयोग करें

import React, { Component } from 'react'

class TodoList extends Component {
  render() {
    return (
      <div className="todoListMain">
        <div className="header">
          <form onSubmit={this.props.addItem}>
            <input placeholder="Task"
            ref={this.props.inputElement}
            value={this.props.currentItem.text}
            onChange={this.props.handleInput}
             />
            <button type="submit"> Add Task </button>
          </form>
        </div>
      </div>
    )
  }
}

export default TodoList

import React, { Component } from 'react'

class TodoItems extends Component {

  createTasks(item) {
    return <li key={item.key} onClick={() => this.props.deleteItem(item.key)}>{item.text}</li>
  }

  render() {
    const todoEntries = this.props.entries || []  
    const listItems = todoEntries.map(this.createTasks.bind(this))    

    return <ul className="theList">{listItems}</ul>
  }
}

export default TodoItems

• विकल्प # 1: आँसू पोंछने के बाद, आप स्रोत कोड के पूरे आधार को फिर से लिखना शुरू करते हैं।
• विकल्प # 2: अपनी सभी .js फ़ाइलों को .ts का नाम बदलें, विधानसभा प्रक्रिया में आवश्यक चरणों को कॉन्फ़िगर करें और अपने हाथों को धो लें।
• विकल्प # 3: आप सभी पुराने कोड के क्रमिक माइग्रेशन पर जाने के लिए वास्तव में समय तय करते हैं, और सीधे टाइपस्क्रिप्ट पर सभी नए कोड लिखते हैं।

टाइपस्क्रिप्ट दर्ज करें

$ npx create-react-app ts-components --template typescript

import React, {useState} from 'react';

interface IActionProps {
	action: (status:boolean) => void,
	buttonText?: string
}

const Toggle = ({action, buttonText="Toggle"}: IActionProps) => {
	const [isSelected, setSelected] = useState(false)
	return (
		<button onClick={() => {
		setSelected(!isSelected)
		action(isSelected)
		}} >{buttonText}</button>
	)	
}

export default Toggle

//  Bit        
$ yarn global add bit-bin
$ bit init --package-manager yarn//    ( ,       bit.dev)
$ bit login//   
$ bit add src/components/Toggle.tsx //   (    env)
$ bit import bit.envs/compilers/react-typescript --compiler//   
$ bit tag –all

$ bit export user-name.toggler

एक बाहरी घटक आयात करें

$ yarn add @bit/your-username.your-collection.your-component

$ yarn add @bit/deleteman.toggler.toggle

$ npm config set '@bit:registry' https://node.bit.dev

import React, { Component, useState } from 'react'
import Toggle from '@bit/deleteman.toggler.toggle';


const TodoItem = ({text, itemKey}) => {

 	const [iClass, setIClass] = useState("white")

  	const toggleBackground = status => {
  		setIClass(status ? "white" : "black")
  	}

  	const toggleProps = {
  		action: toggleBackground,
  		buttonText: "Select"
  	}

    return <li className={iClass} key={itemKey} >{text}<Toggle {...toggleProps}/></li>
}

export default TodoItem

निष्कर्ष