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

Τι είναι το TypeScript;

Το TypeScript αναπτύχθηκε από τη Microsoft και βασίζεται στη γλώσσα προγραμματισμού JavaScript, η οποία χρησιμοποιείται ευρέως στην ανάπτυξη ιστού. Ένα χαρακτηριστικό του TypeScript που ξεχωρίζει είναι η στατική τυποποίηση. Σε αντίθεση με το JavaScript, το οποίο έχει δυναμική τυποποίηση, το TypeScript σας επιτρέπει να δηλώσετε τύπους δεδομένων για μεταβλητές, συναρτήσεις και παραμέτρους. Αυτό επιτρέπει την έγκαιρη ανίχνευση σφαλμάτων κωδικοποίησης, καθιστώντας δυνατή την αναγνώριση σφαλμάτων ακόμη και πριν από την εκτέλεση του κώδικα. Η στατική τυποποίηση όχι μόνο βελτιώνει σημαντικά την ποιότητα του κώδικα, αλλά και τη αναγνωσιμότητά του.

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

Ακολουθεί ένα απλό παράδειγμα JavaScript:

function greet(name) {
    return "Hello, " + name;
}
console.log(greet(123)); // Output: "Hello, 123"
javascript

Στον παραπάνω κώδικα, η συνάρτηση greet δεν περιορίζεται σε έναν συγκεκριμένο τύπο δεδομένων για την παράμετρο name. Αυτό σημαίνει ότι η συνάρτηση θα συνεχίσει να λειτουργεί, ακόμα και αν περάσουμε έναν αριθμό ως όρισμα.

Στο TypeScript, ο κώδικας μπορεί να έχει την εξής μορφή:

function greet(name: string): string {
    return "Hello, " + name;
}
console.log(greet(123)); // Error in TypeScript
typescript

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

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

Σε τι χρησιμοποιείται το TypeScript;

Το TypeScript είναι απαραίτητο για διάφορους τομείς της ανάπτυξης λογισμικού, ειδικά σε περιπτώσεις όπου η ασφάλεια τύπου και η ποιότητα του κώδικα είναι ζωτικής σημασίας.

Μια σημαντική περίπτωση χρήσης του TypeScript είναι η ανάπτυξη ιστού. Εδώ, το TypeScript διασφαλίζει ότι ο κώδικας JavaScript γράφεται με τρόπο που τον καθιστά πιο ασφαλή και ευκολότερο στη συντήρηση. Αυτό είναι επωφελές σε εκτεταμένα έργα frontend με πολύπλοκες βάσεις κώδικα. Ωστόσο, το TypeScript μπορεί επίσης να εφαρμοστεί από την πλευρά του διακομιστή (backend) σε εφαρμογές Node.js για να παρέχει ένα επιπλέον επίπεδο ασφάλειας. Σε αρχιτεκτονικές χωρίς διακομιστή, όπως AWS Lambda και Azure Functions, το TypeScript βοηθά στην ελαχιστοποίηση των σφαλμάτων και στη διασφάλιση αξιόπιστης εκτέλεσης.

Η ανάπτυξη πολλαπλών πλατφορμών είναι ένας ακόμη τομέας στον οποίο το TypeScript αναδεικνύει τα πλεονεκτήματά του. Μπορεί να βελτιστοποιήσει σημαντικά τις εφαρμογές πολλαπλών πλατφορμών και την ανάπτυξη εφαρμογών για κινητά. Πλατφόρμες όπως το NativeScript και το React Native προσφέρουν υποστήριξη για το TypeScript όσον αφορά την προγραμματισμό εφαρμογών για κινητά για διαφορετικές πλατφόρμες. Στην ανάπτυξη παιχνιδιών, το TypeScript χρησιμοποιείται σε έργα που χρησιμοποιούν WebGL ή μηχανές παιχνιδιών όπως το Phaser ή το Babylon.js. Η ασφάλεια τύπου του TypeScript συμβάλλει στη βελτίωση της ποιότητας και της συντηρησιμότητας των παιχνιδιών.

Το TypeScript χρησιμοποιείται επίσης για έργα οπτικοποίησης και ανάλυσης δεδομένων. Βιβλιοθήκες όπως η D3.js παρέχουν υποστήριξη για το TypeScript και επιτρέπουν τη δημιουργία εξελιγμένων πινάκων ελέγχου και οπτικοποιήσεων.

Πώς να εγκαταστήσετε το TypeScript

Η εγκατάσταση του TypeScript είναι απλή και απαιτεί μόνο λίγα βήματα. Εάν έχετε το Node.js στον υπολογιστή σας, μπορείτε να εγκαταστήσετε το TypeScript με npm (Node Package Manager).

Βήμα 1: Λήψη του Node.js

Ελέγξτε αν έχετε εγκαταστήσει το Node.js στον υπολογιστή σας. Εάν δεν έχετε ακόμη εγκαταστήσει το Node.js, μπορείτε να το κατεβάσετε και να το εγκαταστήσετε από την επίσημη ιστοσελίδα.

Βήμα 2: Εγκαταστήστε το TypeScript στο τερματικό

Ανοίξτε τη γραμμή εντολών (π.χ. Command Prompt στα Windows ή το τερματικό σε macOS ή Linux) και πληκτρολογήστε την ακόλουθη εντολή για να εγκαταστήσετε το TypeScript σε παγκόσμιο επίπεδο:

npm install -g typescript
bash

Η σημαία -g (global) εγκαθιστά το TypeScript σε ολόκληρο το σύστημά σας, ώστε να μπορείτε να το χρησιμοποιείτε από οπουδήποτε.

Βήμα 3: Ελέγξτε την εγκατεστημένη έκδοση

Μπορείτε να ελέγξετε αν η εγκατάσταση ήταν επιτυχής εκτελώντας την ακόλουθη εντολή:

tsc -v
bash

Αυτή η εντολή δείχνει ποια έκδοση του TypeScript είναι εγκατεστημένη. Εάν εμφανίζεται ένας αριθμός έκδοσης, αυτό σημαίνει ότι η εγκατάσταση ήταν επιτυχής.

Μετά την εγκατάσταση, μπορείτε να δημιουργήσετε αρχεία JavaScript δημιουργώντας αρχεία TypeScript (με την επέκταση .ts) και μεταγλωττίζοντάς τα με τον μεταγλωττιστή TypeScript tsc.

Βήμα 4: Δημιουργήστε ένα αρχείο TypeScript

Δημιουργήστε ένα αρχείο TypeScript, π.χ. app.ts, και εισαγάγετε τον κώδικα TypeScript.

type Person = { name: string, age: number };
const alice: Person = { name: "Alice", age: 30 };
console.log(`Hello, I am ${alice.name} and I am ${alice.age} years old.`);
typescript

Βήμα 5: Συντάξτε το αρχείο

Συντάξτε το αρχείο TypeScript εισάγοντας την ακόλουθη εντολή:

tsc app.ts
bash

Αυτό θα μεταγλωττίσει το app.ts σε ένα αρχείο JavaScript με το όνομα app.js. Στη συνέχεια, μπορείτε να εκτελέσετε το αρχείο JavaScript.

Ποια χαρακτηριστικά έχει το TypeScript;

Η ανάπτυξη ιστού έχει σημειώσει σημαντική πρόοδο τα τελευταία χρόνια και η TypeScript έχει αναδειχθεί ως μια εξαιρετικά αποτελεσματική εναλλακτική λύση της JavaScript. Παρακάτω, συνοψίζουμε τα πιο σημαντικά χαρακτηριστικά αυτής της γλώσσας.

Στατικός τύπος

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

function add(a: number, b: number): number {
    return a + b;
}
const result = add(5, 3); // valid
const result = add(5, "3"); // Type Error
typescript

Σε αυτό το παράδειγμα, χρησιμοποιήσαμε στατική τυποποίηση για τη συνάρτηση add. Οι δύο παράμετροι a και b δηλώνονται ως αριθμοί (number) και η συνάρτηση επιστρέφει μια τιμή τύπου number. Οποιαδήποτε προσπάθεια χρήσης αυτής της συνάρτησης με διαφορετικό τύπο δεδομένων θα οδηγήσει το TypeScript να την αναγνωρίσει ως σφάλμα.

Προαιρετική πληκτρολόγηση

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

function sayHello(name: string, age: any): string {
    if (age) {
        return `Hello, ${name}, you are ${age} years old.`;
    } else {
        return `Hello, ${name}.`;
    }
}
typescript

Η συνάρτηση sayHello ορίζεται με τις παραμέτρους name και age. Ο προσδιορισμός any υποδεικνύει ότι η παράμετρος age μπορεί να είναι οποιουδήποτε τύπου δεδομένων.

Λειτουργίες ES6+

Το TypeScript υποστηρίζει σύγχρονες λειτουργίες JavaScript, συμπεριλαμβανομένων των ES6 και νεότερων λειτουργιών, όπως οι συναρτήσεις βέλους και οι συμβολοσειρές προτύπων.

const multiply = (a: number, b: number): number => a * b;
const greeting = (name: string) => `Hello, ${name}!`;
typescript

Οι συναρτήσεις βέλους οδηγούν σε μια συντομότερη και πιο συνοπτική σύνταξη.

Οργάνωση κώδικα

Το TypeScript προσφέρει καλύτερη οργάνωση του κώδικα και διασφαλίζει ότι ο κώδικας χωρίζεται σε επαναχρησιμοποιήσιμα τμήματα. Αυτό είναι εφικτό χάρη στα modules και τα namespaces.

// Math.ts
export function add(a: number, b: number): number {
    return a + b;
}
// Main.ts
import { add } from './Math';
const result = add(5, 3);
typescript

Εδώ, θα δείξουμε πώς να δομήσετε τον κώδικα με ενότητες και να χρησιμοποιήσετε import και export για οργάνωση. Η συνάρτηση add ορίζεται σε μια ξεχωριστή ενότητα με το όνομα Math.ts και στη συνέχεια εισάγεται και ενσωματώνεται σε μια διαφορετική ενότητα, Main.ts.

Αντικειμενοστραφής προγραμματισμός (OOP)

Το TypeScript διευκολύνει τον αντικειμενοστραφή προγραμματισμό μέσω των κλάσεων, των διεπαφών και της κληρονομικότητας του TypeScript:

class Person {
    constructor(public name: string, public age: number) {}
    greet() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}
const person = new Person("Alice", 30);
person.greet();
typescript

Αυτό το παράδειγμα δείχνει τη χρήση κλάσεων και αντικειμενοστραφούς προγραμματισμού (OOP) στο TypeScript. Η κλάση Person έχει τις ιδιότητες name, age και μια μέθοδο greet, η οποία χρησιμοποιείται για να παρουσιάσει το άτομο και να παρέχει πληροφορίες σχετικά με αυτό.

Εκτεταμένο σύστημα τύπων

Το σύστημα τύπων TypeScript είναι ευέλικτο και εκτενές. Μπορείτε να δημιουργήσετε τύπους και διεπαφές που ορίζονται από τον χρήστη και ακόμη και να επεκτείνετε υπάρχοντες τύπους.

interface Animal {
    name: string;
}
 
interface Dog extends Animal {
    breed: string;
}
const myDog: Dog = { name: "Buddy", breed: "Labrador" };
typescript

Η διεπαφή Animal ορίζει μια ιδιότητα name, ενώ η διεπαφή Dog κληρονομεί από Animal και προσθέτει μια επιπλέον ιδιότητα breed. Το αντικείμενο myDog έχει τα χαρακτηριστικά και των δύο διεπαφών.

Συμβατότητα με JavaScript

Το TypeScript είναι συμβατό με το JavaScript, επιτρέποντας την εκτέλεσή του σε οποιοδήποτε περιβάλλον JavaScript. Αυτή η συμβατότητα διευκολύνει την προοδευτική ενσωμάτωση του TypeScript σε τρέχοντα έργα JavaScript.

// JavaScript-Code
function greet(name) {
    return "Hello, " + name;
}
// TypeScript-Code
function greet(name: string): string {
    return "Hello, " + name;
}
typescript

Ο παραπάνω κώδικας JavaScript (χωρίς τυποποίηση) μπορεί να χρησιμοποιηθεί σε κώδικα TypeScript (με τυποποίηση) χωρίς κανένα πρόβλημα.

Ποια είναι τα πλεονεκτήματα και τα μειονεκτήματα του TypeScript;

Αν και το TypeScript προσφέρει μια σειρά από πλεονεκτήματα, έχει και κάποια μειονεκτήματα. Ακολουθεί μια συνοπτική παρουσίαση:

Πλεονεκτήματα

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

Εκτός από τη στατική τυποποίηση, το TypeScript προσφέρει μια πληθώρα λειτουργιών ανάπτυξης, όπως διεπαφές, κλάσεις, ενότητες και υποστήριξη για τα τρέχοντα πρότυπα ECMAScript. Αυτές οι λειτουργίες βελτιώνουν τη δομή του κώδικα, διευκολύνουν τη συντήρηση και την επεκτασιμότητα των έργων και προωθούν την παραγωγικότητα στην ανάπτυξη. Πολλά ολοκληρωμένα περιβάλλοντα ανάπτυξης (IDE), όπως το Visual Studio Code, παρέχουν εξαιρετική υποστήριξη για το TypeScript.

Μειονεκτήματα

Το TypeScript απαιτεί χρόνο για να το συνηθίσετε, ειδικά για προγραμματιστές που έχουν εργαστεί μόνο με JavaScript πριν το χρησιμοποιήσουν. Ο κώδικας TypeScript πρέπει να μεταγλωττιστεί σε JavaScript πριν να μπορεί να εκτελεστεί σε προγράμματα περιήγησης ή περιβάλλοντα Node.js. Αυτό δημιουργεί ένα επιπλέον βήμα στη διαδικασία ανάπτυξης.

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

Ποιες είναι μερικές εναλλακτικές λύσεις για το TypeScript;

Υπάρχουν διάφορες γλώσσες προγραμματισμού ιστού που μπορεί να αποτελούν μια καλή εναλλακτική λύση για το TypeScript, ανάλογα με τις συγκεκριμένες απαιτήσεις ενός έργου και τις προτιμήσεις του/των προγραμματιστή/προγραμματιστών.

  • Flow: Το Flow είναι ένας στατικός τύπος ελέγχου για JavaScript που αναπτύχθηκε από το Facebook. Σας επιτρέπει να προσθέσετε τύπους στον κώδικα JavaScript χωρίς να χρειάζεται να μεταβείτε πλήρως στο TypeScript. Το Flow είναι μια καλή επιλογή αν θέλετε να ενσωματώσετε σταδιακά την πληκτρολόγηση στα έργα JavaScript σας.
  • Dart: Πρόκειται για μια γλώσσα προγραμματισμού που αναπτύχθηκε από την Google και μπορεί να χρησιμοποιηθεί για τη δημιουργία εφαρμογών ιστού και εφαρμογών για κινητά. Προσφέρει ασφάλεια τύπου και καλή απόδοση. Το Dart χρησιμοποιείται συχνά σε συνδυασμό με το πλαίσιο Flutter για την ανάπτυξη εφαρμογών για κινητά.
  • PureScript: Το PureScript είναι μια λειτουργική γλώσσα προγραμματισμού με ισχυρό τύπο που περιλαμβάνει ισχυρή ασφάλεια τύπου και ένα καθαρά λειτουργικό στυλ προγραμματισμού. Επιτρέπει την εισαγωγή βιβλιοθηκών JavaScript.
  • Elm: Το Elm είναι μια λειτουργική, ισχυρά τυποποιημένη γλώσσα που έχει σχεδιαστεί για την ανάπτυξη εφαρμογών ιστού. Το Elm προωθεί την αρχή της αρχιτεκτονικής Elm και έχει υψηλό επίπεδο ασφάλειας τύπου.
  • ReasonML (BuckleScript): αυτή η γλώσσα αναπτύχθηκε από το Facebook και βασίζεται στην OCaml. Το BuckleScript είναι ένας μεταγλωττιστής που μεταγλωττίζει το ReasonML σε JavaScript. Επιτρέπει επίσης την ασφάλεια τύπου και είναι εύκολο να ενσωματωθεί με το React για την ανάπτυξη frontend.
Tip

Αναλύουμε περαιτέρω άλλα θέματα, όπως τις συναρτήσεις TypeScript και τους πίνακες TypeScript, σε άλλα άρθρα του Ψηφιακού Οδηγού μας.

391eb2ccd25382fda3c4f06749b0163e

Go to Main Menu