Dans cet article, nous allons créer une application de gestion des dépenses moderne en utilisant React et TypeScript. Nous allons comprendre pourquoi de plus en plus de développeurs commencent à utiliser TypeScript. Nous allons apprendre comment utiliser TypeScript pour créer de meilleurs composants React à l'aide de types.

Les types sont désormais l'un des sujets les plus discutés dans toutes les communautés de développeurs. Les gens commencent à aimer taper leur code et à l’adapter en priorité dans leurs projets. En tapant notre code, nous obtenons un code plus sûr, plus concis et exempt d’erreurs basiques et stupides que nous pourrions rencontrer en développement.

Après avoir créé une application dans React avec TypeScript, vous trouverez TypeScript si agréable, ne voudrez pas commencer un autre projet sans cela. Nous pouvons très facilement configurer une application moderne en utilisant React et TypeScript – nous pouvons utiliser create-react-app et y ajouter TypeScript. Commençons donc avec notre application de dépenses.

Mise en route

Pour démarrer notre application de dépenses, nous allons utiliser create-react-app et ajouter un - texte dactylographié à la fin. . Donc, dans votre terminal, exécutez la commande suivante:

 créer-réagir-application dépenses-app --typescript 

Maintenant que nous avons notre projet, nous allons installer certaines dépendances dont nous aurons besoin. Nous utiliserons formik et yup pour notre validation de formulaire, et dinero.js pour formater nos valeurs. Pour que yup et dinero.js travaillent avec TypeScript, nous devons ajouter les définitions TypeScript pour chaque dépendance. Donc, dans votre terminal, exécutez la commande suivante:

 fil add formik yup @ types / yup dinero.js @ types / dinero.js 

Maintenant que tout est configuré, nous allons créer les composants pour notre application. Créons donc notre structure de dossiers.

Helpers

Premièrement, nous allons configurer la structure de dossiers de notre projet. Nous allons avoir la structure suivante:

 depenses-app
|
| - construire
| - node_modules
| - public
| | - favicon.ico
| | - index.html
| | - manifest.json
| - src
| | - composants
| | - Ajouter
| | - Budget
| | - Dépenses
| | - aides
| | - types
| | - crochets
| - .gitignore
| - package.json
| - tsconfig.json
| - README.md 

Ceci va être notre structure de dossiers. Dans notre dossier types nous allons créer un fichier index.ts . Et à l'intérieur de ce fichier, nous créerons une interface pour chaque dépense dont nous aurons besoin:

 interface d'exportation Dépense {
  type: chaîne;
  valeur: nombre;
  description: string;
} 

Nous avons donc maintenant une interface pour chaque Dépense que nous allons créer plus tard. Chaque dépense peut avoir les propriétés, de type value et description .

À l'intérieur du dossier de . , créez un crochet personnalisé appelé useBudget . Créez également un fichier, useBudget.ts dans lequel nous importerons le crochet useState de React et notre interface Expense :

 import {useState} de 'réagir';
importer {Expense} de '../types/index';

Next, créons un hook personnalisé appelé useBudget :

 const useBudget = () => {
  const [expenses, setExpenses] = useState ([]);
  // ...

Notre application de dépenses ressemblera beaucoup à une tâche: nous aurons une fonction pour ajouter une dépense et une fonction pour supprimer une dépense. Aussi simple que cela. Créons une fonction appelée addExpense () pour ajouter une dépense:

 const addExpense = (dépense: Dépense) => {
  const newExpenses = [...expenses, { expense }];
  setExpenses (newExpenses);
  console.log (newExpenses);

Comme dans cette fonction, nous allons créer une fonction permettant de supprimer une dépense, appelée deleteExpense () :

 const deleteExpense = (index: number) => {
  const newExpenses = [...expenses];
  newExpenses.splice (index, 1);
  setExpenses (newExpenses);

Notre crochet personnalisé final useBudget devrait ressembler à ceci:

 const useBudget = () => {
  const [expenses, setExpenses] = useState ([]);
  const addExpense = (dépense: Dépense) => {
    const newExpenses = [...expenses, { expense }];
    setExpenses (newExpenses);
    console.log (newExpenses);
  };
  const deleteExpense = (index: number) => {
    const newExpenses = [...expenses];
    newExpenses.splice (index, 1);
    setExpenses (newExpenses);
  };
  return {dépenses, addExpense, deleteExpense};

Maintenant que nous avons créé notre crochet personnalisé, nous allons dans le dossier helpers et créons deux (2) fichiers: formatExpense.ts et . .ts . formatExpense.ts contiendra une fonction permettant de formater des valeurs:

 importer Dinero de 'dinero.js';

const formatExpense = (montant: nombre) =>
  Dinero ({montant}). SetLocale ("en-US"). ToFormat ();
export default formatExpense; 

Assez simple. Nous avons importé Dinero et créé une fonction appelée formatExpense . Nous avons passé un montant comme argument à cette fonction et l'avons formaté dans le fichier en-US .

Passons maintenant au totals.ts et à l'intérieur de ce fichier allons avoir deux fonctions: totalValue () et totalAmount () . La fonction totalValue () va nous renvoyer la valeur totale de chaque valeur que nous avons, qu'il s'agisse d'un revenu ou d'une dépense. Alors maintenant, dans notre fichier, importons notre fonction formatExpense () que nous avons créée précédemment et créons notre totalValue () :

 import formatExpense depuis './formatExpense';

export const totalValue = (dépenses: n'importe lequel, type: chaîne de caractères) => {
  montant constant = dépenses
    .filter (({dépense}: tout) => dépense.type === type)
    .map (({dépenses}) => dépense.valeur)
    .reduce ((previousValue, currentValue) => previousValue + currentValue, 0);

  const formattedAmount = formatExpense (montant);
  renvoyer formattedAmount;

Dans cette fonction, nous avons deux arguments: les dépenses indiquent que nous allons réussir, et le type de valeur - soit un + qui signifie revenu ou a - qui signifie dépense. Après cela, nous allons renvoyer la valeur totale formatée à l'aide de la fonction formatExpense que nous avons créée.

Créons maintenant notre autre fonction appelée totalAmount qui va s'afficher. nous retourner le montant total que nous avons. Cela ressemblera beaucoup au précédent, créons donc notre fonction:

 export const totalAmount = (dépenses: quelconque) => {
  const totalIncomes = dépenses
    .filter (({dépenses}: aucun) => dépense.type === "+")
    .map (({dépenses}) => dépense.valeur)
    .reduce ((previousValue, currentValue) => previousValue + currentValue, 0);
  const totalExpenses = dépenses
    .filter (({dépense}: tout) => dépense.type === "-")
    .map (({dépenses}) => dépense.valeur)
    .reduce ((previousValue, currentValue) => previousValue + currentValue, 0);
  const totalAmount = formatExpense (totalIncomes - totalExpenses);
  return totalAmount;

Nous obtenons la valeur de notre revenu total et de nos dépenses totales et nous calculons leur montant total.

Maintenant que toutes nos fonctions d’aide sont prêtes, commençons par créer nos composants React. 19659036] Components

Passons maintenant à notre fichier principal, index.tsx dans notre dossier src et insérons le code suivant:

 import React, {Fragment} de 'réagir';
importer ReactDOM de 'react-dom';
importer l'application depuis './components/App';
importer * en tant que serviceWorker à partir de './serviceWorker';

ReactDOM.render (document.getElementById ('racine')); 

Maintenant que nous avons nos index.tsx tous configurés, passons à nos composants. dossier et créez un fichier App.tsx pour notre composant React principal. À l'intérieur de ce fichier App.tsx nous allons importer notre crochet personnalisé useBudget et le transmettre comme support à nos autres composants:

 import Réagissez à partir de 'react' ;
import Budget depuis './Budget/Budget';
importer Ajouter depuis './Add/Add';
importer Dépenses de './Prix/Frais';
importer useBudget de '../hooks/useBudget';

const App = () => {
  const {dépenses, addExpense, deleteExpense} = useBudget ();
  revenir (
    

      
      
      
    
  );
};

export default App; 

Nous passons nos dépenses au composant Ajouter et dépenses, ainsi qu'à nos fonctions permettant d'ajouter et de supprimer une dépense. Passons maintenant à notre dossier Budget et, à l'intérieur de celui-ci, créez un fichier appelé Budget.tsx et mettez le code suivant:

 import React from 'react';
valeur d'importation de './Value/Value';
import Disponible à partir de './Available/Available';
import Montant de './Montre / Montant';
import {Dépenses} de '../../types/index';
import {totalValue, totalAmount} from '../../helpers/totals';

interface BudgetProps {
  dépenses: dépenses [];
}

budget const: React.FC  = ({dépenses}) => (
  

    

      
      
    
    
    
  
);

export default default; 

Dans notre budget nous avons trois composants: Available qui affichera le mois actuel, Value qui sera affiché soit la composante qui affiche le montant total que nous avons et une composante Montant qui va donner une valeur spécifique pour chaque type de revenus, à savoir dépense ou dépense que nous avons.

Alors maintenant, dans le budget Pour créer un dossier pour chaque composant: Available Value et Montant . Dans le dossier Value créez un fichier nommé Value.tsx et saisissez le code suivant:

 import React from 'react';

interface ValueProps {
  valeur: nombre;
}

const Valeur: React.FC  = ({valeur}) => (
  
 {valeur} 
)

export default Value; 

Maintenant, dans notre dossier Available créons un fichier nommé Available.tsx et insérons le code suivant:

 import React from 'react';

interface AvailableProps {
  mois: chaîne;
}

const Disponible: React.FC  = ({month}) => (
  
 Budget disponible en {mois}: 
)

export default 

Ensuite, dans notre dossier Montant créons un fichier nommé Montant.tsx et insérons le code suivant:

 import Réagissez à partir de 'react';
importer AmountValue de './AmountValue/AmountValue';
importer AmountType de './AmountType/AmountType';

interface AmountProps {
  montant: nombre;
  type: chaîne;
}

const Amount: React.FC  = ({montant, type}) => (
  

    
    
  
);

export default Amount; 

Et dans notre dossier, nous allons créer un dossier appelé AmountValue et un fichier à l'intérieur de ce dossier appelé AmountValue.tsx . Dans ce fichier, nous allons mettre le code suivant:

 import React from 'react';

interface AmountValueProps {
  montantValeur: nombre;
}

const AmountValue: React.FC  = ({montantValue}) => (
  
 {montantValeur} 
)

export default AmountValue; 

Nous sommes toujours dans le dossier Amount et nous allons créer le dernier dossier: AmountType . Créons également un fichier appelé AmountType.tsx avec le code suivant:

 import React from 'react';

interface AmountTypeProps {
  quantitéType: chaîne;
}

const AmountType: React.FC  = ({montantType}) => (
  
 {amountType} 
)

export default default AmountType; 

Avec le dossier Budget prêt, créez un fichier nommé Add.tsx dans le dossier Add . Dans ce fichier, nous allons utiliser formik et yup pour valider notre formulaire. Nous allons donc importer des éléments et créer des interfaces à utiliser dans notre formulaire:

 import Réagissez de 'réagir';
importer * comme Yup de 'yup';
import {withFormik, FormikProps} de 'formik';

interface FormValues ​​{
  type: chaîne;
  valeur: nombre;
  description: string;
}

interface OtherProps {
  frais: tous;
  addExpense: (dépense: Dépense) => any;
}

interface MyFormProps {
  frais: tous;
  addExpense: (dépense: Dépense) => any;
} 

Ensuite, nous allons créer un composant appelé InnerForm :

 const InnerForm = (accessoires: OtherProps & FormikProps ) => {
  const {
    valeurs,
    les erreurs,
    touché,
    handleChange,
    handleBlur,
    handleSubmit,
    est soumis
  } = props;

  revenir (
    

      

        
           Sélectionnez 
           + 
           - 
        
        
        
        
           Ajouter
        
      
    
  );

Dans le même fichier, ajoutons la validation de formulaire à l'aide de yup :

 const Add = withFormik  ({
  mapPropsToValues: () => ({
    type: "",
    valeur: 0,
    la description: ""
  }),
  validationSchema: Yup.object (). shape ({
    type: Yup.string (). required ("Nome 'obrigat'rio"),
    valeur: Yup.numéro (). requis ("Valeur obrigat'ria"),
    description: Yup.string (). required ("Description obrigat'ria")
  }),
  handleSubmit (
    {type, valeur, description}: FormValues,
    {props, setSubmitting}
  ) {
    setTimeout (() => {
      props.addExpense ({type, valeur, description});
      setSubmitting (false);
    }, 1000);
  }
}) (InnerForm);

export default Ajouter; 

Bien, notre formulaire est prêt à l'emploi. Alors maintenant, nous allons créer la dernière partie de notre application. Passons à notre dossier Dépenses . À l’intérieur de ce dossier, créez un fichier nommé Expense.tsx et deux autres dossiers: Income et Expense . . Dans notre fichier Expense.tsx mettons le code suivant:

 import React from 'react';
import Revenu de './Income/Income';
importer Dépenses de './Expense/Expense';

interface ExpensesProps {
  frais: tous;
  deleteExpense: (index: number) => any;
}

const Dépenses: React.FC  = ({dépenses, deleteExpense}) => (
  

    
    
  
);

dépenses par défaut d'exportation; 

Dans le dossier Income nous allons créer un fichier nommé Income.tsx et un dossier appelé IncomeItem . Dans Income.tsx mettons le code suivant:

 import Réagissez à partir de 'react';
importer IncomeItem à partir de './IncomeItem/IncomeItem';

interface IncomeProps {
  frais: tous;
  deleteExpense: any;
}

const Income: React.FC  = ({
  les frais,
  deleteExpense
}) => {
  const revenus = dépenses.filtre (({dépense}: aucune) => dépense.type === "+");
  revenir (
    

      
 Income 
      

         {incomes.map (({dépenses}: aucun, index: nombre)> => (
          
        ))}
      
    
  );
};

export default Income; 

Maintenant, dans le dossier IncomeItem créons un fichier IncomeItem.tsx et insérons le code suivant:

 import React from 'react';
import formatExpense from '../../../../helpers/formatExpense';

interface IncomeItemProps {
  numéro d'index;
  type: chaîne;
  valeur: nombre;
  description: string;
  deleteExpense: (index: number) => any;
}

const IncomeItem: React.FC  = ({
  indice,
  type,
  valeur,
  la description,
  deleteExpense
}) => (
  
 deleteExpense (index)}>
    
 {description} 
    
 {formatExpense (value)} 
  
);

export default IncomeItem; 

Maintenant, passons à notre dossier Dépenses et créons un fichier Expense.tsx :

 import Réagissez à partir de 'réagir';
importer ExpenseItem de './ExpenseItem/ExpenseItem';

interface ExpenseProps {
  dépenses: ficelle;
  deleteExpense: (index: number) => any;
}

const Dépense: React.FC  = ({
  les frais,
  deleteExpense
}) => {
  const newExpenses = depenses.filter (({depense}: any) => depense.type === "-");
  revenir (
    

      
 Dépense 
      

         {newExpenses.map (({dépense}: aucune, index: nombre)) => (
          
        ))}
      
    
  );
};

export default Expense; 

Enfin, le dernier composant de notre application! Créons un dossier appelé ExpenseItem et à l'intérieur de ce dossier, créons un fichier nommé ExpenseItem.tsx et insérons le code suivant:

 import React from 'rea';
import formatExpense from '../../../../helpers/formatExpense';

interface ExpenseItemProps {
  numéro d'index;
  type: chaîne;
  valeur: nombre;
  description: string;
  deleteExpense: (index: number) => any;
}

const ExpenseItem: React.FC  = ({
  indice,
  type,
  valeur,
  la description,
  deleteExpense
}) => (
  
 deleteExpense (index)}>
    
 {description} 
    
 {formatExpense (value)} 
  
);

export default ExpenseItem; 

Création d'applications avec KendoReact

Maintenant que notre application fonctionne correctement, si vous souhaitez créer une interface magnifique et magnifique, vous pouvez consulter KendoReact . KendoReact est une bibliothèque de composants d'interface utilisateur complète pour React, construite avec des composants réactifs et de grande qualité.

Elle comprend tous les composants nécessaires pour une application de base simple à une application complexe, ainsi avec KendoReact . vous pouvez vous concentrer sur l'essentiel dans votre application et ne plus essayer de créer des composants d'interface utilisateur complexes.

Conclusion

Dans cet article, nous avons créé dès le début une application de gestion des dépenses avec React et TypeScript. Composants, et également utilisé React Hooks pour traiter avec notre gestion de l'état. Ceci est une application simple, juste pour montrer à quel point React avec TypeScript peut être puissant.