Introduzca gradualmente TypeScript en su proyecto React

Incruste componentes TS de forma segura en un proyecto JS utilizando Bit

Ejemplo de uso

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

• Opción # 1: Después de limpiar las lágrimas, comienza a reescribir toda la base del código fuente.
• Opción # 2: Cambie el nombre de todos sus archivos .js a .ts, configure los pasos necesarios en el proceso de ensamblaje y lávese las manos.
• Opción n. ° 3: Decide que es realmente el momento de pasar a la migración gradual de todo el código antiguo y escribir todo el código nuevo directamente en TypeScript.

Ingrese TypeScript

$ 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

Importar un componente externo

$ 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

Conclusión