Introduisez progressivement TypeScript dans votre projet React

Intégrez en toute sécurité des composants TS dans un projet JS à l'aide de Bit

Exemple d'utilisation

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: Après avoir essuyé les larmes, vous commencez à réécrire toute la base du code source.
• Option # 2: Renommez tous vos fichiers .js en .ts, configurez les étapes nécessaires dans le processus d'assemblage et lavez-vous les mains.
• Option n ° 3: vous décidez qu'il est vraiment temps de passer à la migration progressive de tout l'ancien code et d'écrire tout le nouveau code directement sur TypeScript.

Entrez 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

Importer un composant externe

$ 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

Conclusion