Τι είναι ένα TypeScript runner;

Το TypeScript είναι JavaScript με τύπους. Περιγράφετε τη δομή των δεδομένων σας με interfaces και annotations τύπων, και ο compiler του TypeScript μετατρέπει τον κώδικα σε απλό JavaScript πριν εκτελεστεί. Η δοκιμή μερικών γραμμών συνήθως απαιτεί τη ρύθμιση ενός project, ενός compiler και ενός αρχείου ρυθμίσεων. Ένα TypeScript runner παρακάμπτει όλα αυτά. Γράφετε τον κώδικα, τον εκτελείτε και διαβάζετε όσα εμφανίζει με console.log.

Περιγραφή εργαλείου

Αυτό το εργαλείο εκτελεί τον TypeScript κώδικά σας στο browser και εμφανίζει όλα όσα γράφει ο κώδικας στην console. Πληκτρολογήστε ή επικολλήστε κώδικα στα αριστερά και πατήστε Εκτέλεση ή πατήστε Ctrl+Enter (Cmd+Enter σε Mac). Η έξοδος εμφανίζεται στα δεξιά, μία γραμμή για κάθε κλήση console, με τις προειδοποιήσεις και τα σφάλματα επισημασμένα με χρώμα. Τίποτα δεν εκτελείται μέχρι να το ζητήσετε, επομένως μπορείτε να επεξεργάζεστε τον κώδικα ελεύθερα.

Ο κώδικας μεταγλωττίζεται από τον επίσημο compiler του TypeScript και εκτελείται σε ένα Web Worker, δηλαδή σε ένα thread παρασκηνίου του browser σας. Επομένως, ένα script που δεν τερματίζεται δεν θα παγώσει τη σελίδα: πατήστε Διακοπή και θα τερματιστεί. Ο κώδικάς σας δεν αποστέλλεται σε server.

Παραδείγματα

Περιγράψτε δεδομένα με ένα interface και εργαστείτε με αυτά:

interface Product {
  name: string;
  price: number;
}

const cart: Product[] = [
  { name: "Βιβλίο", price: 12 },
  { name: "Στυλό", price: 1.5 },
];

const total = cart.reduce((sum, item) => sum + item.price, 0);
console.log(`Σύνολο: ${total}`);
TypeScript

Η έξοδος είναι:

Σύνολο: 13.5

Χρησιμοποιήστε ένα enum και μια class με properties παραμέτρων:

enum Level {
  Low = "χαμηλό",
  High = "υψηλό",
}

class Task {
  constructor(
    public title: string,
    private level: Level,
  ) {}

  describe() {
    return `${this.title} (${this.level})`;
  }
}

console.log(new Task("Γράψε δοκιμές", Level.High).describe());
TypeScript

Η έξοδος είναι:

Γράψε δοκιμές (υψηλό)

Δυνατότητες

  • Εκτελεί TypeScript με τον επίσημο compiler, επομένως υποστηρίζεται όλη η σύνταξη του TypeScript
  • Υποστηρίζει enums, namespaces, decorators, generics και properties παραμέτρων
  • Εμφανίζει τα συντακτικά σφάλματα μαζί με τη γραμμή και τη στήλη τους, στην ίδια μορφή με το tsc
  • Εμφανίζει την έξοδο των console.log, info, debug, warn και error, με χρώματα για τις προειδοποιήσεις και τα σφάλματα
  • Μορφοποιεί objects, arrays, maps, sets, classes, dates και errors και διαχειρίζεται κυκλικές αναφορές
  • Υποστηρίζει console.group, count, time, assert, dir και clear
  • Εκτελεί async κώδικα, συμπεριλαμβανομένων των top-level await, timers και promises
  • Αναφέρει τα μη捕εσμένα σφάλματα και τις μη διαχειρισμένες απορρίψεις promises στην έξοδο
  • Κουμπί Διακοπή που τερματίζει αμέσως ένα script, ακόμη και αν έχει κολλήσει σε ατέρμονο loop
  • Η επιλογή Διατήρηση αρχείων καταγραφής, ενεργοποιημένη από προεπιλογή, διατηρεί την έξοδο προηγούμενων εκτελέσεων ώστε να μπορείτε να συγκρίνετε τα αποτελέσματα
  • Τοποθετήστε τον δείκτη πάνω από μια γραμμή στην έξοδο για να δείτε την ημερομηνία και την ώρα καταγραφής της
  • Αντιγράψτε ολόκληρη την έξοδο, διαγράψτε την με το κουμπί Εκκαθάριση ή κατεβάστε τον κώδικά σας ως αρχείο

Πώς λειτουργεί

Όταν πατάτε Εκτέλεση, ο compiler του TypeScript αφαιρεί τους τύπους από τον κώδικά σας και τον μετατρέπει σε JavaScript. Ο compiler φορτώνεται μία φορά όταν ανοίγει η σελίδα, επομένως η πρώτη εκτέλεση μπορεί να χρειαστεί λίγο χρόνο σε αργή σύνδεση. Αν ο κώδικας περιέχει συντακτικό σφάλμα, το σφάλμα εμφανίζεται και ο κώδικας δεν εκτελείται.

Στη συνέχεια, το JavaScript αποστέλλεται σε ένα νέο Web Worker. Μέσα στον worker, οι μέθοδοι της console αντικαθίστανται, επομένως κάθε κλήση μετατρέπεται σε κείμενο και αποστέλλεται πίσω στη σελίδα. Ο κώδικάς σας περιτυλίγεται σε μια async function, η οποία επιτρέπει τη χρήση του await στο ανώτατο επίπεδο.

Η γραμμή κατάστασης κάτω από την έξοδο εμφανίζει την ένδειξη Σε εκτέλεση όσο ο κώδικάς σας μεταγλωττίζεται, εκτελείται ή περιμένει έναν timer που ξεκίνησε. Ένα setInterval διατηρεί την εκτέλεση ενεργή μέχρι να το εκκαθαρίσετε ή να πατήσετε Διακοπή. Κάθε εκτέλεση ξεκινά με έναν νέο worker, επομένως οι μεταβλητές από προηγούμενη εκτέλεση δεν παραμένουν ποτέ.

Συμβουλές

  • Οι τύποι δεν ελέγχονται. Όπως τα tsx και esbuild, το εργαλείο τους αφαιρεί και εκτελεί τον κώδικα, επομένως το const count: number = "three" εκτελείται χωρίς σφάλμα
  • Χρησιμοποιήστε console.log και όχι μια τελική expression: η τιμή της τελευταίας γραμμής δεν εμφανίζεται, επομένως το 1 + 2 από μόνο του δεν εμφανίζει τίποτα
  • Μπορείτε να διατηρείτε δηλώσεις export και imports που περιέχουν μόνο τύπους στον κώδικά σας. Η εισαγωγή ενός package δεν λειτουργεί και αποτυγχάνει με το σφάλμα "Δεν είναι δυνατή η εύρεση του module"
  • Ένας worker δεν διαθέτει σελίδα, επομένως τα document, window και άλλα αντικείμενα του DOM δεν είναι διαθέσιμα. Χρησιμοποιήστε το self για το global scope
  • Η έξοδος διατηρεί τις 1.000 πιο πρόσφατες γραμμές και μία μεμονωμένη γραμμή περικόπτεται μετά από 10.000 χαρακτήρες
  • Εκτελείτε μόνο κώδικα που εμπιστεύεστε, όπως θα κάνατε στην console του browser