Share
AngularJS ha rovesciato il mondo dello sviluppo front-end quando è stato rilasciato, riunendo una serie di pratiche di sviluppo di applicazioni web nuove o recenti in un framework potente e di facile utilizzo. Con la versione 2, il team di Angular ha iniziato da zero con un sistema completamente nuovo. Molte delle idee dietro Angular sono sempre le stesse, ma l'API e l'esperienza degli sviluppatori sono molto diverse.
In questo video tutorial del mio corso, Get Started With Angular 2, vedremo come TypeScript funziona con Angular 2. Ti mostrerò anche alcune sintassi di base di TypeScript.
Angular 2 è costruito su TypeScript, che utilizza la sintassi ES6 e compila su JavaScript vanilla. Standard ES5 JavaScript è anche TypeScript valido, quindi è ancora possibile utilizzare il codice esistente.
Dove differisce TypeScript è nel sistema di battitura. Sebbene sia facoltativo, ti consiglio di utilizzare il sistema di battitura nei tuoi progetti. Un sistema di battitura aiuta con grandi progetti identificando il tipo previsto di un valore nel codice.
Questo si estende a matrici e oggetti e consente a un editor come Visual Studio Code di riconoscere il valore atteso. Questo è utile in un grande progetto o quando altri sviluppatori lavoreranno con il tuo codice. Invece di chiedersi quali dati dovresti usare in una variabile generica, con le tipizzazioni saprai quale tipo di valore usare.
Prima di esaminare un po 'della sintassi TypeScript, discuteremo di tsconfig.json e il typings.json file che abbiamo creato con il nostro progetto.
Prima il tsconfig.json il file che controlla il nostro file TypeScript verrà compilato. La destinazione nelle opzioni del compilatore indica al compilatore di generare JavaScript ES5.
modulo determina lo stile del caricatore di moduli che stiamo usando; altre opzioni sono JS, AMD e UMD comuni. moduleResolution decide come i moduli vengono risolti e Sourcemap genera un file di mappa corrispondente che associa il JavaScript generato al suo TypeScript di origine. Il emitDecoratorMetadata e experimentalDecorators permettici di usare decoratori nella nostra app. Discuteremo di più i decoratori in un momento. removeComments determina se eventuali commenti che aggiungiamo vengono rimossi durante la compilazione e, infine, abbiamo noImplicitAny. Questo controlla come si comporterà il compilatore quando non può inferire un tipo. Poiché TypeScript è facoltativamente digitato, se non forniamo un tipo, è necessario capire il tipo in base a come usiamo la variabile.
Con noImplicitAny impostato falso, il compilatore verrà impostato come predefinito qualunque per un tipo che non riesce a capire. Se lo impostiamo vero, TypeScript segnalerà un errore quando non può inferire il tipo. Quindi abbiamo il escludere blocco, dove escludiamo tutti i file che vogliamo che il compilatore ignori.
Oltre ai moduli nodo che contengono file TypeScript, abbiamo anche incluso alcuni file dal tipizzazioni cartella. Questo perché ci sono due tipi di tipizzazione che sono stati installati, quindi dobbiamo ignorarne uno.
Se andiamo a typings.json, vediamo il ES6-shim. Questo rappresenta una digitazione che è stata aggiunta al nostro progetto.
Il compilatore TypeScript non comprende i metodi che possono essere inclusi con le librerie esterne. Quando ciò accade, si otterrà un errore nel compilatore. Per risolvere questo problema, possiamo ottenere tipizzazioni per la libreria che stiamo usando in modo che TypeScript comprenda i metodi nel compilatore.
In questo caso, il flag ambientale e le dipendenze associate indicano che il file di digitazione proviene da DefinitelyTyped. DefinitelyTyped è un enorme archivio di file di battitura per le librerie più popolari. Nel nostro typings.json file, stiamo afferrando il ES6-shim file di battitura. Il numero alla fine rappresenta l'ID di commit del file di battitura. Le tipizzazioni sono state installate nell'installazione post e il file di battitura è stato quindi copiato sul nostro tipizzazioni cartella per noi.
Ora che capiamo cosa abbiamo impostato fino al compilatore di TypeScript, diamo un'occhiata al linguaggio stesso. La prima cosa che vedremo è la digitazione dei valori.
Qui abbiamo i tipi di base che abbiamo usato in JavaScript, ma abbiamo l'identificatore aggiunto che indica al compilatore quale tipo di valore è stato usato con la variabile.
Se proviamo a memorizzare un numero nel il mio nome variabile, avremo un errore. Questo è vero se proviamo a memorizzare il tipo sbagliato in qualsiasi variabile. Possiamo anche usare qualunque per specificare che qualsiasi tipo è disponibile per questa variabile:
var myName2: any = 'Reggie';
Possiamo anche usare vuoto come tipo, tipicamente come tipo di ritorno di una funzione che non restituisce un valore.
Quindi, finalmente, possiamo usare un array come tipo. Usiamo il tipo di elementi all'interno della matrice seguiti da parentesi quadre per indicare che questo è un tipo di matrice.
var letters: string [] = ['a', 'b', 'c'];
Possiamo anche scrivere un tipo di array come questo:
var letters2: Array= ['a', 'b', 'c'];
Poi abbiamo l'interfaccia, che ti permette di definire un contratto nel tuo codice sulla forma dei tuoi valori.
interfaccia SampleInterface title: string;
Qui, abbiamo creato un'interfaccia di esempio, ma per capirla meglio, usiamo questa interfaccia.
Nella funzione, stiamo specificando l'interfaccia come forma per l'argomento che passiamo alla nostra funzione. Quindi creiamo un oggetto da usare. L'ultima riga cancellerebbe il nostro titolo se lo compilassimo e lo eseguissimo.
Ci viene richiesto di utilizzare la proprietà title solo con questa interfaccia. Abbiamo aggiunto un'altra proprietà, ma TypeScript non si cura se abbiamo la proprietà title inclusa in questo oggetto. Se non ce l'avessimo, avremmo un errore. Si noti inoltre che l'ordine delle proprietà non è importante purché sia presente il valore richiesto.
La prossima parte di TypeScript che devi capire sono le classi. In TypeScript, possiamo usare le classi per costruire le nostre applicazioni in un modo orientato agli oggetti. Angular 2 sfrutta questo usando classi come la spina dorsale del framework.
Invece di apprendere la sintassi specifica per il framework, la sintassi Angular 2 si basa su TypeScript. In questo modo, non ti stai limitando ad apprendere Angular 2 dato che la sintassi sarà utile quando si svilupperà al di fuori di Angular 2. Nella sua forma più semplice, una classe è creata in questo modo:
classe SampleClass
Qualsiasi logica e funzione di costruzione possono essere incluse in questa classe.
Come estendiamo questo in Angular 2 è attraverso l'uso di decoratori, come ad esempio @Componente(). Questo decoratore aggiunge metadati che indicano all'applicazione che questa classe è un componente angolare. Costruiamo le nostre app per aggiungere metadati per i nostri componenti, servizi, direttive, ecc. Tutto ciò che costruiamo un Angular 2 sarà basato su una classe. Esploreremo ulteriormente questo mentre costruiamo le nostre applicazioni.
Infine, mentre costruiamo la nostra app, eseguiremo lo script di avvio di NPM. Questo lancerà la nostra app nella nostra anteprima ed eseguirà il compilatore in modalità orologio. Eventuali modifiche verranno compilate e riflesse nell'anteprima. Queste sono le basi di TypeScript che devi conoscere per iniziare con Angular 2.
Con tutti i mezzi controlla la documentazione di TypeScript per saperne di più, in quanto ho solo graffiato la superficie delle funzionalità disponibili. Imparerai molto di più anche nel resto del corso, vedi sotto.
Nel corso completo, Guida introduttiva di Angular 2, imparerai come creare una semplice app Web da zero, iniziando con la configurazione di scaffolding e strumenti. Scoprirai come utilizzare la variazione tipizzata di JavaScript di TypeScript per creare componenti, servizi e direttive Angular 2. Lungo la strada vedrai come implementare i fondamenti di una moderna app a pagina singola: incluso il routing, l'accesso alle API esterne, l'input dell'utente e la convalida.
Che tu sia un esperto angolare che vuole fare il salto a questa ultima versione o un nuovo sviluppatore che vuole imparare a creare siti web con le ultime tecnologie, questo corso è un ottimo punto di partenza per imparare Angular 2.
Accentsconagua