TypeScript : apprendre les bases de React

Cet article explore les avantages de la dactylographie et son utilisation fondamentale, en particulier dans le développement de React. Un article précédent (lien omis pour la concision) a couvert l'introduction de TypeScript et la configuration de l'environnement.

Pourquoi choisir TypeScript?

La force initiale de JavaScript, la flexibilité, devient souvent une faiblesse dans les projets plus grands. Son typage dynamique peut entraîner des difficultés de maintenance et des défis d'évolutivité. TypeScript aborde cela en introduisant un typage statique, offrant plusieurs avantages clés:

Détection précoce des bogues: Le typage statique permet une identification précoce des bogues potentiels pendant le développement. Le compilateur empêche la compilation si des erreurs de type sont détectées, améliorant la fiabilité du code.

Évolutivité et maintenabilité améliorées: Les types et les interfaces garantissent la cohérence du code et l'utilisation appropriée entre les modules, cruciaux pour les applications plus grandes. Dans React, cela garantit la fiabilité des composants en appliquant les types d'hélices attendues.

Amélioration de la lisibilité du code et de la longévité: Le typage explicite améliore la clarté du code, bénéficiant à la fois au développeur original et aux futurs contributeurs. La compréhension des types de données simplifie le débogage et la maintenance.

Typage explicite: la résistance au noyau

Le pouvoir de TypeScript réside dans sa capacité à définir explicitement les types de variables. Bien que le typage implicite soit possible, il augmente le risque de comportement inattendu. Considérez ces exemples:

<code class="language-typescript">let author: string = "Tyler Meyer";
author = 32; // Error: Type 'number' is not assignable to type 'string'.
console.log(author); // Will not execute due to the error above.</code>

Ici, author est explicitement typé en tant que chaîne, empêchant l'attribution d'un nombre.

<code class="language-typescript">let studentGrades: number[] = [80, 85, 93];
studentGrades.push(88); // Valid
studentGrades.push("A"); // Error: Type 'string' is not assignable to type 'number'.
studentGrades.push("97"); // Error: Type 'string' is not assignable to type 'number'.</code>

le tableau studentGrades est défini pour ne contenir que des nombres.

Alias ​​et interfaces: Gestion des types complexes

à mesure que les projets grandissent, les alias et les interfaces de type deviennent essentiels pour gérer des structures de données complexes.

<code class="language-typescript">type Author = {
  firstName: string;
  lastName: string;
  age: number;
  lovesCoding: boolean;
};

const coolAuthor: Author = {
  firstName: "Tyler",
  lastName: "Meyer",
  age: 32,
  lovesCoding: true,
};</code>

Les alias (type) peuvent être utilisés avec divers types de données. Les interfaces (interface), cependant, sont spécifiquement pour les types d'objets et l'héritage de support:

<code class="language-typescript">interface Book {
  title: string;
  numberOfPages: number;
}

interface Textbook extends Book {
  subject: string;
}

const calculusBook: Textbook = {
  title: "Calculus 4 Dummies",
  numberOfPages: 58,
  subject: "Calculus",
};</code>

TypeScript dans React

Pour les projets React à l'aide de fichiers .tsx, TypeScript améliore la gestion du flux de données dans les composants.

Fonctions de type type:

<code class="language-typescript">type Person = {
  name: string;
  age: number;
};

function greeting({ name, age }: Person) {
  return `My name is ${name}, and I am ${age} years old.`;
}

greeting({ name: 'Tyler', age: 32 }); // Valid
greeting({ name: 'Ash', profession: 'Photographer' }); // Error: Missing 'age' property
greeting({ name: 'Sadie', age: '1' }); // Error: Type 'string' is not assignable to type 'number'.</code>

La sécurité de type greeting de la fonction assure une utilisation correcte des paramètres.

Composants de réaction de type type:

<code class="language-typescript">import React from 'react';

type ChildProps = {
  name: string;
  age: number;
  profession: string;
};

function Child({ name, age, profession }: ChildProps) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Profession: {profession}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>This is my child:</h1>
      <Child name="Tyler" age={32} profession="Software Developer" />
    </div>
  );
}</code>

Cet exemple démontre des accessoires de type sécurisé dans un composant réact.

Sources: (liens omis pour la concision) Les sources d'origine ont été citées, mais les liens sont supprimés pour se conformer à la demande de ne pas inclure des liens externes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!