TypeScript for Beginners, Part 4 Classes

Abbiamo fatto molta strada nell'apprendimento di TypeScript dall'inizio di questa serie. Il primo tutorial ti ha fornito una breve introduzione di TypeScript e ha suggerito alcuni IDE che è possibile utilizzare per scrivere TypeScript. Il secondo tutorial si è concentrato sui tipi di dati e il terzo tutorial ha discusso le basi delle interfacce in TypeScript.

Come forse già saprai, JavaScript ha aggiunto solo di recente il supporto nativo per le classi e la programmazione orientata agli oggetti. Tuttavia, TypeScript ha consentito agli sviluppatori di utilizzare le classi nel loro codice per un lungo periodo di tempo. Questo codice viene quindi compilato su JavaScript che funzionerà su tutti i principali browser. In questo tutorial, imparerai a conoscere le classi in TypeScript. Sono simili alle loro controparti ES6 ma sono più rigidi.

Creare la tua prima classe

Iniziamo con le basi. Le classi sono una parte fondamentale della programmazione orientata agli oggetti. Le classi vengono utilizzate per rappresentare qualsiasi entità che abbia alcune proprietà e funzioni che possono agire su determinate proprietà. TypeScript offre il pieno controllo sulle proprietà e sulle funzioni accessibili all'interno e all'esterno della propria classe contenente. Ecco un esempio molto semplice di creazione di un Persona classe.

class Person name: string; costruttore (theName: string) this.name = theName;  introduceSelf () console.log ("Ciao, sono" + this.name + "!");  let personA = new Person ("Sally"); personA.introduceSelf ();

Il codice precedente crea una classe molto semplice chiamata Persona. Questa classe ha una proprietà chiamata nome e una funzione chiamata introduceSelf. La classe ha anche un costruttore, che è anche fondamentalmente una funzione. Tuttavia, i costruttori sono speciali perché vengono chiamati ogni volta che creiamo una nuova istanza della nostra classe. 

È anche possibile passare parametri ai costruttori per inizializzare proprietà diverse. Nel nostro caso, stiamo usando il costruttore per inizializzare il nome della persona che stiamo creando usando il Persona classe. Il introduceSelf la funzione è un metodo di Persona classe, e lo stiamo usando qui per stampare il nome della persona sulla console. Tutte queste proprietà, metodi e il costruttore di una classe sono chiamati collettivamente membri di classe.

Dovresti tenere a mente che il Persona la classe non crea automaticamente una persona da sola. Agisce più come un progetto con tutte le informazioni sugli attributi che una persona dovrebbe avere una volta creato. Con questo in mente, abbiamo creato una nuova persona e l'abbiamo chiamata Sally. Chiamando il metodo introduceSelf su questa persona stamperà la frase "Ciao, sono Sally!" alla console.

Modificatori privati ​​e pubblici

Nella sezione precedente, abbiamo creato una persona di nome Sally. Al momento, è possibile cambiare il nome della persona da Sally a Mindy in qualsiasi parte del nostro codice, come mostrato nell'esempio seguente.

class Person name: string; costruttore (theName: string) this.name = theName;  introduceSelf () console.log ("Ciao, sono" + this.name + "!");  let personA = new Person ("Sally"); // Stampa "Ciao, sono Sally!" personA.introduceSelf (); personA.name = "Mindy"; // Stampa "Ciao, sono Mindy!" personA.introduceSelf (); 

Potresti aver notato che siamo stati in grado di utilizzare entrambi nome proprietà e il introduceSelf metodo al di fuori della classe contenente. Questo perché tutti i membri di una classe in TypeScript lo sono pubblico per impostazione predefinita. È inoltre possibile specificare esplicitamente che una proprietà o un metodo è pubblico aggiungendo la parola chiave pubblico prima di cio.

A volte, non vuoi che una proprietà o un metodo siano accessibili al di fuori della sua classe contenente. Questo può essere ottenuto rendendo privati ​​questi membri usando il privato parola chiave. Nel codice sopra, potremmo rendere la proprietà name privato e impedire che venga modificato al di fuori della classe contenente. Dopo questa modifica, TypeScript ti mostrerà un errore che dice che il nome la proprietà è privato e puoi accedervi solo all'interno di Persona classe. Lo screenshot qui sotto mostra l'errore in Visual Studio Code.

Ereditarietà in TypeScript

L'ereditarietà consente di creare classi più complesse partendo da una classe base. Ad esempio, possiamo usare il Persona classe dalla sezione precedente come base per creare a amico classe che avrà tutti i membri del Persona e aggiungere alcuni membri a parte. Allo stesso modo, potresti anche aggiungere un Famiglia o Insegnante classe. 

Tutti erediteranno i metodi e le proprietà del Persona aggiungendo alcuni metodi e proprietà per separarli. Il seguente esempio dovrebbe renderlo più chiaro. Ho anche aggiunto il codice per il Persona classificare qui in modo da poter confrontare facilmente il codice sia della classe base che della classe derivata.

class Person nome privato: stringa; costruttore (theName: string) this.name = theName;  introduceSelf () console.log ("Ciao, sono" + this.name + "!");  class Friend estende Person yearsNonosciuto: numero; costruttore (nome: stringa, anniNoto: numero) super (nome); this.yearsKnown = anni conosciuti;  timeKnown () console.log ("Siamo stati amici per" + this.yearsKnown + "anni.") let friendA = new Friend ("Jacob", 6); // Stampa: Ciao, sono Jacob! friendA.introduceSelf (); // Stampe: siamo amici da 6 anni. friendA.timeKnown (); 

Come puoi vedere, devi usare il estendere parola chiave per il amico classe per ereditare tutti i membri del Persona classe. È importante ricordare che il costruttore di una classe derivata deve sempre richiamare il costruttore della classe base con una chiamata a super().

Potresti aver notato che il costruttore di amico non ha bisogno di avere lo stesso numero di parametri della classe base. Tuttavia, il parametro del primo nome è stato passato a super() per invocare il costruttore del genitore, che ha accettato anche un parametro. Non abbiamo dovuto ridefinire il introduceSelf funzione all'interno del amico classe perché è stata ereditata dal Persona classe.

Utilizzo del modificatore protetto

Fino a questo punto, abbiamo creato solo i membri di una classe privato o pubblico. Mentre renderli pubblici ci permette di accedervi da qualsiasi luogo, rendendo i membri privati ​​li limita alla loro classe contenente. A volte potresti desiderare che i membri di una classe base siano accessibili in tutte le classi derivate. 

Puoi usare il protetta modificatore in questi casi per limitare l'accesso di un membro solo alle classi derivate. Puoi anche usare il protetta parola chiave con il costruttore di una classe base. Ciò impedirà a chiunque di creare un'istanza di quella classe. Tuttavia, sarà comunque possibile estendere le classi in base a questa classe di base.

class Person nome privato: stringa; età protetta: numero; costruttore protetto (theName: string, theAge: number) this.name = theName; this.age = theAge;  introduceSelf () console.log ("Ciao, sono" + this.name + "!");  class Friend estende Person yearsNonosciuto: numero; costruttore (nome: stringa, età: numero, anni noto: numero) super (nome, età); this.yearsKnown = anni conosciuti;  timeKnown () console.log ("Siamo stati amici per" + this.yearsKnown + "anni.") friendSince () let firstAge = this.age - this.yearsKnown; console.log ('Siamo amici da quando ero $ firstAge anni.') let friendA = new Friend ("William", 19, 8); // Stampe: siamo amici da quando avevo 11 anni. friendA.friendSince ();

Nel codice sopra, puoi vedere che abbiamo creato il età proprietà protetta. Questo impedisce l'uso di età al di fuori di ogni classe derivata da Persona. Abbiamo anche usato il protetta parola chiave per il costruttore del Persona classe. Dichiarazione del costruttore come protetta significa che non saremo più in grado di istanziare direttamente il Persona classe. La seguente schermata mostra un errore che si apre durante il tentativo di creare un'istanza di una classe con protetta costruttore.

Pensieri finali

In questo tutorial, ho cercato di illustrare le basi delle classi in TypeScript. Abbiamo iniziato il tutorial creando una base molto semplice Persona classe che ha stampato il nome della persona sulla console. Dopo ciò, hai imparato a conoscere il privato parola chiave, che può essere utilizzata per impedire l'accesso ai membri di una classe in qualsiasi punto arbitrario del programma. 

Infine, hai imparato come estendere classi diverse nel tuo codice usando una classe base con ereditarietà. C'è molto di più che puoi imparare sulle classi nella documentazione ufficiale.

Se hai domande relative a questo tutorial, fammelo sapere nei commenti.