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 ​

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