Română

English

Română

English

Aspect

Astro (TypeScript) ​

Ar trebui să creezi o componentă de pagină sub src/pages/ ca punct de intrare al site-ului tău Astro. Codul tău Astro ar trebui să fie analizat (linted) folosind ESLint cu configurația recomandată pentru Astro și verificat din punct de vedere al tipurilor cu astro check.

Fișier de intrare ​

Fișierul de intrare pentru acest șablon este src/pages/index.astro. Astro mapează automat fișierele de sub src/pages/ către rute pe baza numelui fișierului lor.

Un fișier Astro are două părți separate de delimitatorii ---: frontmatter (TypeScript care rulează la momentul build-ului/cererii) și șablonul (HTML-ul care este randat):

astro
---
const message: string = 'Hello, World!';
---

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Astro</title>
  </head>
  <body>
    <h1>{message}</h1>
  </body>
</html>

Versiune ​

Rulează pe Node.js v22.0.0

Limbi suportate ​

TypeScript

Framework de testare ​

Vitest

Atenționări speciale și detalii de implementare ​

  • Testele folosesc Astro Container API experimental (experimental_AstroContainer) pentru a randa o pagină ca șir de caractere fără a porni un server real.
  • Frontmatter rulează doar pe server — fără variabile globale de browser. Pentru a rula cod în browser, folosește o etichetă <script> în șablon, pe care Astro o va include în pachetul pentru client (bundle).
  • Frontmatter este complet TypeScript: adaugă adnotări pentru variabile și importă tipuri din modulele tale pentru a detecta nepotrivirile de structură la compilare. astro check evidențiază erorile TypeScript din fișierele .astro.

Exemplu cu Vitest + Astro Container API: ​

ts
import { describe, it, expect } from 'vitest';
import { experimental_AstroContainer as AstroContainer } from 'astro/container';
import Page from './src/pages/index.astro';

describe('index.astro', () => {
  it('renders an <h1> containing "Hello, World!"', async () => {
    const container = await AstroContainer.create();
    const html = await container.renderToString(Page);
    expect(html).toMatch(/<h1[^>]*>\s*Hello, World!\s*<\/h1>/);
  });
});

Biblioteci incluse ​

Cum se depanează ​

Componentele Astro au două faze de execuție — frontmatter (pe partea de server) și șablonul (HTML randat, opțional hidratat). Cu TypeScript beneficiezi și de verificarea tipurilor la compilare prin astro check.

Frontmatter (server) ​

Frontmatter rulează în Node la momentul build-ului/cererii. console.log de aici apare în terminalul care rulează astro dev:

astro
---
import type { Item } from '../types';
const data: Item[] = await fetch('/api/items').then((response) => response.json());
console.log('Fetched items:', data);
---

Șablon (client) ​

Pentru log-uri pe partea de browser, adaugă o etichetă <script> — Astro o împachetează și o trimite către client:

astro
<script>
  console.log('This runs in the browser');
</script>

Pași pentru depanare folosind log-uri în consolă ​

  1. Identifică zona cu probleme: Decide dacă problema se află în frontmatter (pregătirea datelor, tipuri) sau în HTML-ul randat / scriptul de client hidratat.

  2. Introdu instrucțiuni console.log(): Adaugă apeluri de logare în faza relevantă. Frontmatter → terminal; <script> → devtools în browser.

  3. Verifică rezultatele testelor tale

  4. Folosește pictograma Debug din zona de Previzualizare: Fă clic pe pictograma de depanare (debug) din zona de Previzualizare pentru a verifica rezultatul din terminal sau deschide consola DevTools a browserului pentru log-urile de client.

  5. Analizează rezultatul: Compară log-urile cu pagina randată pentru a depista datele lipsă, prop-urile greșite sau nepotrivirile de hidratare.

Iată un exemplu care combină frontmatter tipizat și un script de client:

astro
---
import { greet } from '../lib/greet';
const message: string = greet('World');
console.log('Built message:', message); // logs in the terminal
---

<h1>{message}</h1>
<script>
  console.log('Page loaded'); // logs in the browser
</script>