Accéder à la page github

Typescript

TypeScript est un langage de programmation open source et développé par Microsoft. Il permet d'ajouter des fonctionnalités de typage statique au JavaScript.

Avec TypeScript, les développeurs peuvent spécifier explicitement le type de données qu'une variable peut contenir, ainsi que le type de données retourné par une fonction. Cela permet de détecter les erreurs de typage potentielles avant l'exécution du code, ce qui peut rendre le développement plus sûr et plus efficace.

TypeScript peut être utilisé pour créer des applications JavaScript côté serveur, des applications web, des applications mobiles et des applications de bureau. Il est également compatible avec les frameworks JavaScript populaires comme React.

Il vous permettra par exemple d'éviter des erreurs du type, let x = 5; x.tpUpperCase(); .

Pour débuter avec Typescript, commençons par installer son module.

Terminal

npm install typescript@5.0.3

Ensuite exécuter le code suivant :

Terminal

npx tsc --init

npx va exécuter le code typescript et initialiser votre projet pour vous. Vous devriez voir apparaître dans votre répertoire un fichier tsconfig.json. Nous n'avons pas besoin d'installer autre chose, vu que Vite, notre compilateur sait déjà exécuter les fichiers tsx.

Dans le fichier tsconfig.json,

  • Enlever le commentaire sur jsx et modifier la valeur pour qu'elle soit égale à "jsx": "react-jsx" . Ceci permet de dire à typescript que nous allons rédiger du React.

  • Modifier le target, "target": "es2016" et remplacer par "target": "ES2022" , ce qui permet de pouvoir utiliser async / await.

  • Enlever le commentaire sur module et modifier sa valeur pour qu'elle soit "module": "ES2022" .

Vous devriez avoir :

./tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "jsx": "react-jsx",
    "module": "ES2022",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

Ensuite nous devons installer tous les types de données de notre langage React. Pour ce faire, nous allons installer d'autres librairies.

npm install -D @types/react@18.0.33 @types/react-dom@18.0.11

Créons un fichier qui nous permettra d'englober tous nos types pour les récupérer quand nous en aurons besoin. Dans le répertoire src, rajouter le dossier et ajouter le fichier index.d.ts.

Dans ce fichier, nous définirons le type des données de notre Api comme suit :

./src/index.d.ts

type CryptoType = {
  _id: string;
  currency_long: string;
  addedAt: string;
  currency_code: string;
  currency_long_strip: string;
  link: string;
};

A présent, nous allons convertir et migrer chacun de nos fichiers. Pour chacun d'un, nous modifierons l'extension de .js et .jsx en .ts et .tsx respectivement.

Configurons lint pour qu'il puisse savoir que nous travaillons avec des fichiers typescript.

Installons quelques librairies.

Terminal

npm install -D eslint-import-resolver-typescript@3.5.1 @typescript-eslint/eslint-plugin@5.40.1 @typescript-eslint/parser@5.40.1

Modifions le package json:

{
  ...
    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --quiet"
  ...
}

et mettons à jour le fichier .eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "prettier"
  ],
  "rules": {
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0,
    "@typescript-eslint/no-empty-function": 0
  },
  "plugins": ["react", "import", "jsx-a11y","@typescript-eslint"],
  "parserOptions": {
    "ecmaVersion": 2022,
    "sourceType": "module",
    "project": "./tsconfig.json",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true
      }
    }
  }
}

Nous corrigerons les erreurs après changé toutes les extensions de fichiers.

Dans le fichier App.tsx, nous allons modifier la constance container.

....
const container = document.getElementById("app")!
....

Le point d'exclamation permet de dire à typescript, que je sais que la valeur ne sera jamais null. Vous pouvez aussi, utiliser une condition si vous ne souhaitez pas forcer.

Ensuite nous allons aller dans notre hooks, le fichier useGetImages.tsx.

....
const useGetImages = (filter: string) => {
  return useQuery<CryptoType[]>({ ...........
....

Ici, nous disons à useQuery que les données qu'il manipulera seront un tableau qui contiendra le type CryptoType que nous avons défini dans notre fichier index.d.ts.

Corrigeons également le fichier filterfunc.ts.

export default function filterfunc(filter: string) {
  return function (code: CryptoType) {
    return (
      code.currency_code.toLowerCase().includes(filter.toLowerCase()) ||
      code.currency_long.toLowerCase().includes(filter.toLowerCase())
    )
  }
}

Le fichier Infos.tsx:

...
const { id } = useParams()
  // || pour dire que si id n'existe pas, alors ""
  const results = useGetImages(id || "")
  return !results.isLoading ? (
    results.data && results.data.length > 0 ? (
....

Le fichier SearchFields.tsx

import { FC } from "react";
const SearchFields: FC<{
  searchValue: string;
  setSearchValue: React.Dispatch<React.SetStateAction<string>>;
...
....

Le fichier ImageBlock.tsx:

import { useState, FC } from "react"


const ImageBlock: FC<{ crypto : CryptoType}> = ({ crypto }) => {
  ......

Le fichier Crypto.tsx:

import { FC } from "react"
import ImageBlock from "./ImageBlock"
import useGetImages from "../hooks/useGetImages"
import { Link } from "react-router-dom"


const Crypto: FC<{ searchValue: string }> = ({ searchValue }) => {
  const results = useGetImages(searchValue)
  return (
    <div className="ListImageContainer">
      {results.isLoading && <div>Chargement....</div>}
      {!results.isLoading &&
        results.data &&
        results.data.map(crypto => (
          <Link key={crypto.currency_long} to={`/infos/${crypto.currency_code}`}>
            <ImageBlock crypto={crypto} />
          </Link>
        ))}
      {!results.isLoading && !results.data && <div>Aucune Donnée</div>}
    </div>
  )
}
export default Crypto

Enfin, modifier le fichier index.html pour qu'il importe le fichier App.tsx.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Crypto Images</title>
  </head>
  <body>
    <div id="app">Pas de rendu de l'application</div>
    <script type="module" src="./App.tsx"></script>
  </body>
</html>

Accéder au fichier du projet pour cette étape

14-Typescript

  • .eslintrc.json
  • .gitignore
  • .package.json
  • .prettierrc
  • tsconfig.json
  • vite.config.js

Aucune sélection

Sélectionner un fichier