Τι είναι το TypeScript; Οδηγός απλά για μη προγραμματιστές

Το TypeScript είναι JavaScript με τύπους. Προσθέτετε ετικέτες που δηλώνουν τι είδους δεδομένα πρέπει να είναι κάθε τιμή — έναν αριθμό, κείμενο, μια λίστα παραγγελιών — και το TypeScript ελέγχει τον κώδικα για ασυμφωνίες πριν καν τρέξει. Ο ιστότοπος του TypeScript το περιγράφει ως «JavaScript με σύνταξη για τύπους»· οι τύποι αφαιρούνται όταν ο κώδικας μετατρέπεται σε συνηθισμένη JavaScript, η οποία τρέχει όπου τρέχει η JavaScript.

Γιατί έχει σημασία όταν φτιάχνετε με AI

Τα μοντέλα AI γράφουν κώδικα γρήγορα, και ο γρήγορος κώδικας έχει λάθη: ένα πεδίο που λέγεται customerName σε ένα αρχείο και customer_name σε άλλο, μια τιμή που περνά ως κείμενο αντί για αριθμό, μια συνάρτηση που καλείται χωρίς μια τιμή. Σε απλή JavaScript, πολλά από αυτά τα λάθη εμφανίζονται μόνο όταν κάποιος πατήσει το λάθος κουμπί.

Το TypeScript πιάνει πολλά από αυτά νωρίτερα, ενώ γράφεται ο κώδικας:

• Το AI παίρνει άμεση ανατροφοδότηση. Τα σφάλματα τύπων δείχνουν την ακριβή γραμμή που είναι λάθος, ώστε ο agent να τη διορθώσει πριν τη δείτε εσείς.
• Οι αλλαγές είναι ασφαλέστερες. Μετονομάζετε ένα πεδίο, και το TypeScript σημαίνει κάθε σημείο που ακόμα χρησιμοποιεί το παλιό όνομα.
• Ο κώδικας εξηγεί τον εαυτό του. Οι τύποι τεκμηριώνουν τι περιμένει και τι επιστρέφει μια συνάρτηση, κάτι που βοηθά εσάς, το AI και κάθε προγραμματιστή που θα δουλέψει αργότερα πάνω του.
• Οι επεξεργαστές γίνονται πιο έξυπνοι. Η αυτόματη συμπλήρωση και το «πήγαινε στον ορισμό» δουλεύουν καλύτερα επειδή ο επεξεργαστής ξέρει τι είναι κάθε τιμή.

Αυτός είναι ένας μεγάλος λόγος που πολλοί AI app builders προεπιλέγουν το TypeScript.

Μια καθημερινή αναλογία

Σκεφτείτε μια αποθήκη με τμήματα με ετικέτες. Κάθε τμήμα έχει μια πινακίδα: «Μόνο παλέτες», «Ψυγείο», «Μέγιστο 500 kg». Όταν φτάνει μια παράδοση, ένας ελεγκτής στην πόρτα συγκρίνει τα εμπορεύματα με την πινακίδα. Ψάρια κατεψυγμένα που προορίζονται για το τμήμα ξηρών τροφίμων σταματούν στην πόρτα, και δεν ανακαλύπτονται μια εβδομάδα αργότερα όταν μυρίζουν.

Το TypeScript είναι ο ελεγκτής στην πόρτα. Οι τύποι είναι οι πινακίδες. Ο έλεγχος γίνεται πριν τα εμπορεύματα — ο κώδικάς σας — μπουν σε χρήση. Και μόλις όλα είναι στη θέση τους, οι πινακίδες αφαιρούνται: η JavaScript που τρέχει δεν έχει πια τύπους.

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

1. Γράφετε (εσείς ή ο AI) αρχεία .ts ή .tsx: TypeScript, με ετικέτες τύπων.
2. Ο ελεγκτής τύπων διαβάζει τον κώδικα και αναφέρει τις ασυμφωνίες ως σφάλματα στον επεξεργαστή ή στο build.
3. Ένα βήμα build αφαιρεί τους τύπους, παράγοντας απλή JavaScript.
4. Η JavaScript τρέχει στον browser ή σε server (Node.js, Deno, Bun).

Μια σημαντική συνέπεια: το TypeScript ελέγχει τον κώδικα που γράψατε, όχι τα δεδομένα που φτάνουν ενώ τρέχει η εφαρμογή. Αν ένα εξωτερικό API στείλει κάτι απροσδόκητο, το TypeScript δεν το βλέπει, εκτός αν προσθέσετε επικύρωση κατά την εκτέλεση.

Ένα παράδειγμα: φόρμα κράτησης

Ας πούμε ότι φτιάχνετε εφαρμογή κρατήσεων για κομμωτήριο. Ιδού ένας τύπος που περιγράφει μια κράτηση:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // το ? σημαίνει προαιρετικό
};

Και μια συνάρτηση που υπολογίζει προκαταβολή:

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

Τώρα δείτε τι πιάνει το TypeScript.

Ένα λανθασμένα γραμμένο πεδίο.

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

Το TypeScript αναφέρει ότι το prise δεν είναι γνωστή ιδιότητα και ότι λείπει το price. Σε απλή JavaScript, αυτό θα υπολόγιζε σιωπηλά προκαταβολή NaN (όχι αριθμός).

Λάθος είδος τιμής.

const booking: Booking = { ...otherFields, price: "40" };

Το TypeScript αναφέρει ότι ένα κείμενο δεν μπορεί να χρησιμοποιηθεί εκεί όπου αναμένεται αριθμός. Χωρίς αυτό, το "40" * 0.2 τυχαίνει να λειτουργεί, αλλά το "40" + 5 δίνει "405" — το είδος λάθους που εμφανίζεται σε τιμολόγιο.

Υπηρεσία που δεν υπάρχει.

const booking: Booking = { ...otherFields, service: "perm" };

Το TypeScript αναφέρει ότι το "perm" δεν είναι από τις επιτρεπτές υπηρεσίες. Όταν το σαλόνι προσθέσει αργότερα περμανάντ, το προσθέτετε στον τύπο, και το TypeScript δείχνει κάθε σημείο που χρειάζεται ενημέρωση — τον τιμοκατάλογο, τη φόρμα, τα χρώματα του ημερολογίου.

Τι δεν μπορεί να πιάσει. Αν η φόρμα κράτησης στέλνει price: "40" από τον browser στον server, το TypeScript του server δεν το βλέπει κατά την εκτέλεση. Γι' αυτό οι καλά φτιαγμένες εφαρμογές επικυρώνουν επίσης τα εισερχόμενα δεδομένα, συχνά με βιβλιοθήκη επικύρωσης που ελέγχει τη δομή και την μετατρέπει σε σωστό Booking.

TypeScript έναντι JavaScript

Βασικοί όροι

Συνήθη λάθη και παρανοήσεις

• «Το TypeScript κάνει τον κώδικα χωρίς σφάλματα.» Πιάνει ασυμφωνίες στο σχήμα των δεδομένων, όχι λάθος λογική. Μια προκαταβολή 2% αντί για 20% περνά τον έλεγχο τύπων χωρίς πρόβλημα.
• «Οι τύποι με προστατεύουν από κακές εισόδους.» Οι τύποι εξαφανίζονται κατά την εκτέλεση. Επικυρώστε δεδομένα από χρήστες, φόρμες και API.
• any παντού. Όταν ένα AI κολλήσει, μπορεί να καταφύγει στο any ή στο // @ts-ignore για να σιωπήσει τα σφάλματα. Αυτό κρύβει τα προβλήματα αντί να τα διορθώνει.
• Αγνοώντας σφάλματα τύπων επειδή η προεπισκόπηση δουλεύει. Ορισμένα εργαλεία τρέχουν κώδικα με σφάλματα τύπων. Τα σφάλματα παραμένουν λάθη που περιμένουν να συμβούν.
• «Το TypeScript είναι πιο αργό.» Οι τύποι αφαιρούνται πριν την εκτέλεση· η JavaScript που τρέχει είναι ουσιαστικά η ίδια.
• «Είναι μόνο για μεγάλες ομάδες.» Και οι μεμονωμένοι δημιουργοί ωφελούνται, ιδιαίτερα όταν ένα AI κάνει τις περισσότερες επεξεργασίες.

Τι να ζητήσετε από τον AI builder

• «Χρησιμοποίησε TypeScript με αυστηρή λειτουργία (strict mode).»
• «Όρισε κοινούς τύπους για τις βασικές μας εγγραφές — Customer, Booking, Invoice — και χρησιμοποίησέ τους τόσο στο frontend όσο και στο backend.»
• «Μην χρησιμοποιείς any ή @ts-ignore για να ξεπεράσεις σφάλματα· διόρθωσε το υποκείμενο πρόβλημα και πες μου ποιο ήταν.»
• «Επικύρωσε όλα τα εισερχόμενα δεδομένα στον server, όχι μόνο με τύπους.»
• «Τρέξε τον ελεγκτή τύπων και διόρθωσε κάθε σφάλμα πριν μου πεις ότι τελείωσε.»
• «Όταν μετονομάζεις ένα πεδίο, ενημέρωσε κάθε σημείο που επισημαίνει το TypeScript.»
• «Εξήγησε αυτό το σφάλμα τύπου με απλά ελληνικά.»

Για να ελέγξετε ό,τι παρήγαγε το AI, δείτε πώς να ελέγξετε τον κώδικα που παράγει το AI και πώς να διορθώσετε μια εφαρμογή που χτίστηκε με AI.

Το TypeScript στο Mythex

Όταν δεν ζητάτε κάτι συγκεκριμένο, το Mythex ξεκινά τα νέα έργα με Vite + React + TypeScript + Tailwind. Ο επεξεργαστής κώδικα περιλαμβάνει γλωσσική υποστήριξη — συμπληρώσεις, διαγνωστικά και πήγαινε στον ορισμό για TypeScript και JavaScript, μεταξύ άλλων γλωσσών — ώστε τα σφάλματα τύπων να φαίνονται στον κώδικα, όχι μόνο στην προεπισκόπηση. Ο επεξεργαστής είναι μόνο για ανάγνωση στο Free και πλήρως επεξεργάσιμος στο Pro. Μπορείτε πάντα να ζητήσετε διαφορετική ρύθμιση στο πρώτο prompt· η σελίδα τεκμηρίωσης για πώς επιλέγεται η τεχνολογία εξηγεί πώς, και τα έγγραφα του επεξεργαστή κώδικα καλύπτουν τι εμφανίζει ο επεξεργαστής.

Ερωτήσεις