window.pipedriveLeadboosterConfig = { base: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2, } ;(function () { var w = window if (w.LeadBooster) { console.warn('LeadBooster υπάρχει ήδη') } else { w.LeadBooster = { q: [], on: function (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: function (n) { this.q.push({ t: 't', n: n }) }, } } })() Γενόσημα σε TypeScript - The Codest
The Codest
  • Σχετικά με εμάς
  • Υπηρεσίες
    • Ανάπτυξη λογισμικού
      • Ανάπτυξη Frontend
      • Backend Ανάπτυξη
    • Staff Augmentation
      • Frontend Developers
      • Backend Developers
      • Μηχανικοί δεδομένων
      • Μηχανικοί cloud
      • Μηχανικοί QA
      • Άλλα
    • Συμβουλευτική
      • Έλεγχος & Συμβουλευτική
  • Βιομηχανίες
    • Fintech & Τραπεζική
    • E-commerce
    • Adtech
    • Healthtech
    • Κατασκευή
    • Εφοδιαστική
    • Αυτοκίνητο
    • IOT
  • Αξία για
    • CEO
    • CTO
    • Διευθυντής παράδοσης
  • Η ομάδα μας
  • Case Studies
  • Μάθετε πώς
    • Blog
    • Συναντήσεις
    • Διαδικτυακά σεμινάρια
    • Πόροι
Καριέρα Ελάτε σε επαφή
  • Σχετικά με εμάς
  • Υπηρεσίες
    • Ανάπτυξη λογισμικού
      • Ανάπτυξη Frontend
      • Backend Ανάπτυξη
    • Staff Augmentation
      • Frontend Developers
      • Backend Developers
      • Μηχανικοί δεδομένων
      • Μηχανικοί cloud
      • Μηχανικοί QA
      • Άλλα
    • Συμβουλευτική
      • Έλεγχος & Συμβουλευτική
  • Αξία για
    • CEO
    • CTO
    • Διευθυντής παράδοσης
  • Η ομάδα μας
  • Case Studies
  • Μάθετε πώς
    • Blog
    • Συναντήσεις
    • Διαδικτυακά σεμινάρια
    • Πόροι
Καριέρα Ελάτε σε επαφή
Πίσω βέλος GO BACK
2020-05-26
Ανάπτυξη λογισμικού

Γενόσημα στο TypeScript

Mateusz Staniuk

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

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

Βασική χρήση

Πιθανόν να έχετε χρησιμοποιήσει generics στο παρελθόν ακόμα και χωρίς να το γνωρίζετε - η πιο συνηθισμένη χρήση generics είναι η δήλωση ενός πίνακα:

const myArray: string[],

Δεν είναι πολύ ιδιαίτερο με την πρώτη ματιά, απλά δηλώνουμε myArray ως πίνακας συμβολοσειρών, αλλά είναι το ίδιο με μια γενική δήλωση:

const myArray: Array,

Κρατώντας τα πράγματα ρητά

Ας ξεκινήσουμε με ένα πολύ απλό παράδειγμα - πώς θα μπορούσαμε να μεταφέρουμε αυτή τη λειτουργία JS σε TypeScript:

function getPrefiledArray(filler, length) {
    return (new Array(length)).fill(filler),
}

Αυτή η συνάρτηση θα επιστρέψει πίνακα γεμάτο με τη δεδομένη ποσότητα των πληρωτικό, οπότε μήκος θα είναι αριθμός και ολόκληρη η συνάρτηση θα επιστρέψει πίνακα πληρωτικό - αλλά τι είναι το υλικό πλήρωσης; Σε αυτό το σημείο μπορεί να είναι οτιδήποτε, οπότε μια επιλογή είναι να χρησιμοποιήσετε οποιοδήποτε:

function getPrefiledArray(filler: any, length: number): any[] {
    return (new Array(length)).fill(filler),
}

Χρήση του οποιοδήποτε είναι σίγουρα γενική - μπορούμε να περάσουμε κυριολεκτικά οτιδήποτε, οπότε η "εργασία με έναν αριθμό τύπων αντί για έναν τύπο" από τον ορισμό καλύπτεται πλήρως, αλλά χάνουμε τη σύνδεση μεταξύ των πληρωτικό τύπο και τον τύπο επιστροφής. Σε αυτή την περίπτωση, θέλουμε να επιστρέψουμε κάποιο κοινό πράγμα, και μπορούμε να ορίσουμε ρητά αυτό το κοινό πράγμα ως παράμετρος τύπου:

function getPrefiledArray(filler: T, length: number): T[] {
    return (new Array(length)).fill(filler),
}

και χρησιμοποιήστε το ως εξής:

const prefilledArray = getPrefiledArray(0, 10),

Γενικοί περιορισμοί

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

Για άλλη μια φορά ας προσπαθήσουμε να μεταφέρουμε μια απλή συνάρτηση JS vanilla στο TS.

function getLength(thing) {
    return thing.length,
}

Έχουμε ένα μη τετριμμένο αίνιγμα - πώς να εξασφαλίσουμε ότι το πράγμα έχει μια μήκος ιδιότητα, και η πρώτη σκέψη μπορεί να είναι να κάνουμε κάτι σαν:

function getLength(thing: typeof Array):number {
    return thing.length,
}

και ανάλογα με το πλαίσιο μπορεί να είναι σωστό, συνολικά είμαστε λίγο γενικοί - θα λειτουργήσει με πίνακες πολλαπλών τύπων, αλλά τι γίνεται αν δεν ξέρουμε πραγματικά αν το πράγμα πρέπει να είναι πάντα ένας πίνακας - ίσως το πράγμα είναι ένα γήπεδο ποδοσφαίρου ή μια μπανανόφλουδα; Σε αυτή την περίπτωση, πρέπει να συγκεντρώσουμε τις κοινές ιδιότητες αυτού του πράγματος σε μια κατασκευή που μπορεί να ορίσει ιδιότητες ενός αντικειμένου - μια διεπαφή:

διεπαφή IThingWithLength {
  length: αριθμός,
}

Μπορούμε να χρησιμοποιήσουμε IThingWithLength διεπαφή ως τύπο της πράγμα παράμετρος:

function getLength(thing: IThingWithLength):number {
    return thing.length,
}

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

function getLength(thing: T):number {
    return thing.length,
}

και να το χρησιμοποιήσετε:

διεπαφή IBananaPeel {
  thickness: number,
  length: number,
}

const bananaPeel: IBananaPeel = {thickness: 0.2, length: 3.14},
getLength(bananaPeel),

Χρήση του επεκτείνει το εξασφαλίζει ότι T θα περιέχει ιδιότητες που ορίζονται από IThingWithLength.

Γενικές κλάσεις

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

Πρώτα απ' όλα, ας προσπαθήσουμε να αποθηκεύσουμε ένα μάτσο μπανάνες στο καλάθι με τις μπανάνες:

κλάση Banana {
  constructor(
    public length: number,
    public color: string,
    public ionizingRadiation: number
  ) {}
}

class BananaBasket {
  private bananas: Banana[] = [],

  add(banana: Banana): void {
    this.bananas.push(banana),
  }
}

const bananaBasket = new BananaBasket(),
bananaBasket.add(new Banana(3.14, 'red', 10e-7)),

Τώρα ας προσπαθήσουμε να δημιουργήσουμε καλάθι γενικής χρήσης, για διαφορετικά πράγματα με τον ίδιο τύπο:

class Basket {
  private stuff: T[] = [];

  add(thing: T): void {
    this.stuff.push(thing),
  }
}

const bananaBasket = new Basket(),

Και τέλος, ας υποθέσουμε ότι το καλάθι μας είναι ένα δοχείο ραδιενεργών υλικών και ότι μπορούμε να αποθηκεύσουμε μόνο ύλη που έχει ιονίζουσα ακτινοβολία ιδιοκτησία:

διασύνδεση IRadioactive {
  ionizingRadiation: number,
}

class RadioactiveContainer {
  private stuff: T[] = [];

  add(thing: T): void {
    this.stuff.push(thing),
  }
}

Γενική διεπαφή

Τέλος, ας προσπαθήσουμε να συγκεντρώσουμε όλες τις γνώσεις μας και να χτίσουμε μια ραδιενεργή αυτοκρατορία χρησιμοποιώντας επίσης Generic Interfaces:

// Καθορισμός κοινών χαρακτηριστικών για τα δοχεία
interface IRadioactive {
  ionizingRadiation: number,
}


// Ορίζουμε κάτι που είναι ραδιενεργό
interface IBanana extends IRadioactive {
  length: number,
  color: string,
}

// Ορίστε κάτι που δεν είναι ραδιενεργό
interface IDog {
  weight: number,
}

// Ορισμός διεπαφής για δοχείο που μπορεί να περιέχει μόνο ραδιενεργά πράγματα
interface IRadioactiveContainer {
  add(thing: T): void,
  getRadioactiveness():number,
}

// Ορισμός κλάσης που υλοποιεί τη διεπαφή radioactive container
class RadioactiveContainer implements IRadioactiveContainer {
  private stuff: T[] = [];

  add(thing: T): void {
    this.stuff.push(thing),
  }

  getRadioactiveness(): number {
      return this.stuff.reduce((a, b) => a + b.ionizingRadiation, 0)
  }
}

// ERROR! Ο τύπος 'IDog' δεν ικανοποιεί τον περιορισμό 'IRadioactive'
// Και είναι κάπως βάναυσο να αποθηκεύουμε σκύλους μέσα σε ραδιενεργό δοχείο
const dogsContainer = new RadioactiveContainer(),

// All good fam!
const radioactiveContainer = new RadioactiveContainer(),

// Θυμηθείτε να ταξινομήσετε τα ραδιενεργά σας απόβλητα - δημιουργήστε ξεχωριστό κάδο μόνο για τις μπανάνες
const bananasContainer = new RadioactiveContainer(),

Αυτό είναι όλο, παιδιά!

Σχετικά άρθρα

Ανάπτυξη λογισμικού

Κατασκευάστε μελλοντικά ασφαλείς εφαρμογές Web: γνώσεις από την ομάδα εμπειρογνωμόνων του The Codest

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

THECODEST
Ανάπτυξη λογισμικού

Top 10 εταιρείες ανάπτυξης λογισμικού με έδρα τη Λετονία

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

thecodest
Λύσεις Enterprise & Scaleups

Βασικά στοιχεία ανάπτυξης λογισμικού Java: Α Guide to Outsourcing Successfully (Οδηγός για την επιτυχή εξωτερική ανάθεση)

Εξερευνήστε αυτόν τον βασικό οδηγό για την επιτυχή ανάπτυξη λογισμικού outsourcing Java για να αυξήσετε την αποδοτικότητα, να αποκτήσετε πρόσβαση στην τεχνογνωσία και να οδηγήσετε την επιτυχία των έργων με The Codest.

thecodest
Ανάπτυξη λογισμικού

Ο απόλυτος οδηγός για το Outsourcing στην Πολωνία

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

TheCodest
Λύσεις Enterprise & Scaleups

Ο πλήρης οδηγός εργαλείων και τεχνικών ελέγχου πληροφορικής

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

The Codest
Jakub Jakubowicz CTO & Συνιδρυτής

Εγγραφείτε στη βάση γνώσεών μας και μείνετε ενήμεροι για την τεχνογνωσία από τον τομέα της πληροφορικής.

    Σχετικά με εμάς

    The Codest - Διεθνής εταιρεία ανάπτυξης λογισμικού με κέντρα τεχνολογίας στην Πολωνία.

    Ηνωμένο Βασίλειο - Έδρα

    • Γραφείο 303B, 182-184 High Street North E6 2JA
      Λονδίνο, Αγγλία

    Πολωνία - Τοπικοί κόμβοι τεχνολογίας

    • Πάρκο γραφείων Fabryczna, Aleja
      Pokoju 18, 31-564 Κρακοβία
    • Πρεσβεία του εγκεφάλου, Konstruktorska
      11, 02-673 Βαρσοβία, Πολωνία

      The Codest

    • Αρχική σελίδα
    • Σχετικά με εμάς
    • Υπηρεσίες
    • Case Studies
    • Μάθετε πώς
    • Καριέρα
    • Λεξικό

      Υπηρεσίες

    • Συμβουλευτική
    • Ανάπτυξη λογισμικού
    • Backend Ανάπτυξη
    • Ανάπτυξη Frontend
    • Staff Augmentation
    • Backend Developers
    • Μηχανικοί cloud
    • Μηχανικοί δεδομένων
    • Άλλα
    • Μηχανικοί QA

      Πόροι

    • Γεγονότα και μύθοι σχετικά με τη συνεργασία με εξωτερικό συνεργάτη ανάπτυξης λογισμικού
    • Από τις ΗΠΑ στην Ευρώπη: Γιατί οι αμερικανικές νεοσύστατες επιχειρήσεις αποφασίζουν να μετεγκατασταθούν στην Ευρώπη
    • Σύγκριση υπεράκτιων κόμβων ανάπτυξης τεχνολογίας: Ευρώπη (Πολωνία), ASEAN (Φιλιππίνες), Ευρασία (Τουρκία)
    • Ποιες είναι οι κορυφαίες προκλήσεις των CTOs και των CIOs;
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • Website terms of use

    Πνευματικά δικαιώματα © 2025 από The Codest. Όλα τα δικαιώματα διατηρούνται.

    elGreek
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fiFinnish fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese ko_KRKorean es_ESSpanish nl_NLDutch etEstonian elGreek