Astro avec TypeScript : guide complet

Pourquoi Astro avec TypeScript : guide complet ?

Astro est un framework moderne pour construire des sites Web performants et rapides, tandis que TypeScript ajoute une couche supplémentaire de sécurité et de maintenance à votre code en utilisant le type système statique. En combinant les deux, vous pouvez créer des applications robustes et évolutives qui offrent une meilleure expérience utilisateur.

Un cas d'utilisation concret est l'création d'un blog avec des fonctionnalités avancées comme la gestion des commentaires, l'authentification des utilisateurs et le rendu dynamique du contenu. Avec Astro et TypeScript, vous pouvez construire un backend moderne qui offre une meilleure sécurité et une meilleure performance.

Prerequis

• Connaissances en JavaScript et React
• Node.js v14 ou plus tard
• npm v6 ou plus tard
• Visual Studio Code ou tout autre éditeur de code moderne
• Docker (facultatif, pour les environnements d'exploitation non supportés)

Concepts fondamentaux

1. Principe de base d'Astro

Astro utilise des fichiers .astro qui sont une combinaison de HTML, CSS et JavaScript. Chaque fichier est rendu en temps réel et peut contenir du contenu statique ou dynamique.

---
// Frontmatter : metadonnées du fichier
title: Mon Blog
description: Mon blog avec Astro et TypeScript
---

<!-- Contenu HTML -->
<h1>{frontmatter.title}</h1>
<p>{frontmatter.description}</p>

2. TypeScript dans Astro

TypeScript permet d'ajouter des types à votre code JavaScript, ce qui aide à prévenir les erreurs au moment de la compilation.

---
// Frontmatter : metadonnées du fichier
import { defineConfig } from 'astro';

const config = defineConfig({
  title: 'Mon Blog',
  description: 'Mon blog avec Astro et TypeScript'
});

export default config;

3. Composants réutilisables

Astro utilise les composants React pour la construction d'interfaces utilisateur. Les composants sont des fichiers .astro qui contiennent du code HTML, CSS et JavaScript.

---
// Frontmatter : metadonnées du fichier
import { defineConfig } from 'astro';

const config = defineConfig({
  title: 'Mon Blog',
  description: 'Mon blog avec Astro et TypeScript'
});

export default config;

4. Routing dynamique

Astro supporte le routing dynamique, ce qui permet de créer des routes basées sur les données.

---
// Frontmatter : metadonnées du fichier
import { defineConfig } from 'astro';

const config = defineConfig({
  title: 'Mon Blog',
  description: 'Mon blog avec Astro et TypeScript'
});

export default config;

5. Intégration avec d'autres bibliothèques

Astro est facilement intégrant avec d'autres bibliothèques comme React, Vue ou Svelte.

---
// Frontmatter : metadonnées du fichier
import { defineConfig } from 'astro';

const config = defineConfig({
  title: 'Mon Blog',
  description: 'Mon blog avec Astro et TypeScript'
});

export default config;

Mise en pratique : projet fil rouge

Nous allons construire un gestionnaire de tâches simple en utilisant Astro et TypeScript. Le projet comprendra les fonctionnalités suivantes :

1. Ajouter une nouvelle tâche
2. Marquer une tâche comme terminée
3. Supprimer une tâche

Étape 1 : Initialisation du projet

npm create astro@latest my-task-manager --template default-ts
cd my-task-manager

Étape 2 : Configuration de la base de données

Nous utiliserons un simple tableau pour stocker les tâches.

---
// src/routes/index.astro
import { defineConfig } from 'astro';
import { useState } from 'react';

const config = defineConfig({
  title: 'Mon Blog',
  description: 'Mon blog avec Astro et TypeScript'
});

export default config;

const tasks = [
  { id: 1, text: 'Faire les courses', completed: false },
  { id: 2, text: 'Nettoyer la maison', completed: true }
];

const App = () => {
  const [newTaskText, setNewTaskText] = useState('');
  const [tasksList, setTasksList] = useState(tasks);

  const addTask = () => {
    if (newTaskText.trim() === '') return;
    setTasksList([...tasksList, { id: tasksList.length + 1, text: newTaskText, completed: false }]);
    setNewTaskText('');
  };

  const toggleTask = (id) => {
    setTasksList(tasksList.map(task => task.id === id ? { ...task, completed: !task.completed } : task));
  };

  const deleteTask = (id) => {
    setTasksList(tasksList.filter(task => task.id !== id));
  };

  return (
    <div>
      <h1>Mon Gestionnaire de Tâches</h1>
      <input
        type="text"
        value={newTaskText}
        onChange={(e) => setNewTaskText(e.target.value)}
        placeholder="Ajouter une nouvelle tâche"
      />
      <button onClick={addTask}>Ajouter</button>
      <ul>
        {tasksList.map(task => (
          <li key={task.id}>
            <span
              style=textDecoration: task.completed ? 'line-through' : 'none'
              onClick={() => toggleTask(task.id)}
            >
              {task.text}
            </span>
            <button onClick={() => deleteTask(task.id)}>Supprimer</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Étape 3 : Ajout des styles

Ajoutez des styles CSS pour rendre l'interface utilisateur plus attrayante.

/* src/styles/main.css */
body {
  font-family: Arial, sans-serif;
}

input[type="text"] {
  padding: 8px;
  margin-bottom: 10px;
}

button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

Étape 4 : Lancement du serveur

npm run dev

Erreurs frequentes et debugging

1. SyntaxError: Unexpected token 'import'

Code incorrect :

import { useState } from 'react';

Code correct :

---
// Frontmatter : metadonnées du fichier
import { defineConfig, useClientEffect } from 'astro';

const config = defineConfig({
  title: 'Mon Blog',
  description: 'Mon blog avec Astro et TypeScript'
});

export default config;

2. TypeError: Cannot read property 'map' of undefined

Code incorrect :

const tasksList = tasks.map(task => (
  <li key={task.id}>
    {task.text}
  </li>
));

Code correct :

const tasksList = Array.isArray(tasks) ? tasks.map(task => (
  <li key={task.id}>
    {task.text}
  </li>
)) : [];

3. Uncaught TypeError: Cannot read property 'completed' of undefined

Code incorrect :

const toggleTask = (id) => {
  setTasksList(tasksList.map(task => task.id === id ? { completed: !task.completed } : task));
};

Code correct :

const toggleTask = (id) => {
  setTasksList(tasksList.map(task => task.id === id ? { ...task, completed: !task.completed } : task));
};

Pour aller plus loin

1. Intégration avec une base de données : Utilisez une base de données comme MongoDB ou Firebase pour stocker les tâches.
2. Ajout d'authentification : Ajoutez une couche d'authentification utilisant des tokens JWT pour sécuriser les routes.
3. Tests unitaires et d'intégration : Utilisez Jest pour écrire des tests unitaires et d'intégration pour votre application.

Défi pratique

Créez un simple API de blog en utilisant Astro et TypeScript. L'API devrait permettre de créer, lire, mettre à jour et supprimer des articles de blog.

Ce tutoriel vous a permis de comprendre comment utiliser Astro avec TypeScript pour construire des applications modernes et performantes. En suivant les étapes présentées, vous avez créé un gestionnaire de tâches simple et apprenez comment gérer les erreurs courantes lors du développement avec Astro et TypeScript.