Führen Sie TypeScript schrittweise in Ihr React-Projekt ein

Betten Sie TS-Komponenten mithilfe von Bit sicher in ein JS-Projekt ein

Anwendungsbeispiel

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

• Option 1: Nachdem Sie die Tränen weggewischt haben, beginnen Sie, die gesamte Basis des Quellcodes neu zu schreiben.
• Option 2: Benennen Sie alle Ihre .js-Dateien in .ts um, konfigurieren Sie die erforderlichen Schritte im Montageprozess und waschen Sie Ihre Hände.
• Option 3: Sie entscheiden, dass es wirklich an der Zeit ist, mit der schrittweisen Migration des gesamten alten Codes fortzufahren und den gesamten neuen Code direkt in TypeScript zu schreiben.

Geben Sie TypeScript ein

$ 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

Importieren Sie eine externe Komponente

$ 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

Fazit