Română

English

Română

English

Aspect

VanillaTS ​

VanillaTS rulează folosind JSDOM.

Fișierul de intrare ​

  • Intrare script: Fișierul de intrare pentru acest șablon este index.ts.
  • Intrare browser: Fișierul de intrare pentru browser este index.html.
  • În index.html trebuie să incluzi eticheta script, de exemplu <script type="module" src="./index.ts"></script>.
  • Adaugă CSS prin <link rel="stylesheet" href="./style.css"> dacă este necesar.

Versiune ​

Rulează pe Node.js v20.0.0

Limbaje suportate ​

TypeScript

Framework de testare ​

Jest

Recomandări speciale și detalii de implementare ​

Amintește-ți să păstrezi întotdeauna scripturile modulare și să folosești adnotările de tip, interfețele și alte caracteristici din TypeScript pentru siguranța tipurilor. Utilizează Document Object Model (DOM) pentru a manipula și a interacționa cu elementele paginii web, asigurându-te că folosești type guards atunci când este necesar.

ts
import { createHeader } from "./helloWorld";

describe("helloWorld.ts", () => {
  beforeEach(() => {
    document.documentElement.innerHTML = global.htmlContent;
  });

  test("Should create a h1 with text Hello World!", () => {
    createHeader();

    const header = document.querySelector("h1");

    expect(header.textContent.trim()).toEqual("Hello World!");
  });
});

Biblioteci incluse ​

Provocări write-tests ​

Acest șablon acceptă provocări write-tests. Soluția de referință este deja scrisă, iar tu scrii testele: acestea trebuie să treacă pe soluția de referință și să prindă fiecare variantă cu bug-uri ascunsă. Test îți rulează testele doar pe soluția de referință, iar Verify tests (Verifică testele) și Submit (Trimite) le rulează și pe variantele cu bug-uri ascunse. Citește Rezolvarea unei provocări write-tests pentru întregul flux.

  • Runner de teste: Jest (ts-jest) + jsdom
  • Aceeași configurare a DOM-ului ca la VanillaJS: resetează documentul din globalThis.htmlContent în beforeEach și montează în #app.
  • lib-ul TypeScript nu include DOM.Iterable, așa că spread-ul unui NodeList ([...document.querySelectorAll('li')]) nu compilează. Folosește Array.from(...) în schimb.
  • Importă variabilele globale Jest din @jest/globals și denumește fișierele de test *.spec.ts.

Un exemplu complet găsești în Exemple de write-tests după șablon.

Cum să depanezi ​

Depanarea codului TypeScript este similară cu depanarea codului JavaScript și poți folosi instrucțiuni console.log() în TypeScript exact așa cum ai face-o în JavaScript.

Pași pentru depanare folosind Console Logs ​

  1. Identifică zona cu probleme: Găsește secțiunea din codul tău TypeScript unde suspectezi că ar putea fi problema.

  2. Introdu instrucțiuni console.log(): Adaugă instrucțiuni console.log() înainte și după codul problematic suspectat pentru a afișa valorile variabilelor și controlul fluxului.

  3. Verifică rezultatele afișate de testele tale.

  4. Folosește pictograma de depanare din zona de previzualizare: Fă clic pe pictograma de depanare (Debug) din zona Preview pentru a verifica rezultatul din consolă sau verifică consola browserului.

  5. Analizează rezultatul: Uită-te la valorile afișate în consolă pentru a înțelege ce nu funcționează în codul tău. Ajustează-ți codul pe baza constatărilor și repetă dacă este necesar.

Iată un exemplu despre cum să folosești console.log() pentru depanare în TypeScript:

typescript
function calculateSum(a: number, b: number): number {
  console.log("calculateSum called with arguments:", a, b); // Log function call
  let sum: number = a + b;
  console.log("Sum after addition:", sum); // Log sum calculation
  return sum;
}

let result: number = calculateSum(5, 10);
console.log("Result of calculateSum:", result); // Log the result