Μάθετε TypeScript δωρεάν με αυτό το διαδραστικό μάθημα Scrimba

Έμβλημα μαθημάτων TypeScriptΚάντε κλικ στην εικόνα για να πάτε στο μάθημα Scrimba

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

Έτσι συνεργαστήκαμε με τον επιφανή διαδικτυακό εκπαιδευτή Dylan C. Israel και δημιουργήσαμε ένα δωρεάν μάθημα TypeScript για το Scrimba. Το μάθημα περιέχει 22 μαθήματα και απευθύνεται σε άτομα που γνωρίζουν ήδη JavaScript αλλά θέλουν μια γρήγορη εισαγωγή στο TypeScript.

Παρακολουθήστε το μάθημα δωρεάν εδώ.

Τώρα ας ρίξουμε μια ματιά σε κάθε μία από τις διαλέξεις του μαθήματος.

Μέρος # 1: Εισαγωγή

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

Μέρος # 2: Μεταβλητοί τύποι

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

let firstName: string; let age: number; let isMarried: boolean; 

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

Μέρος # 3: Πολλαπλοί τύποι

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

let myVariable: any = 'Hello World'; myVariable = 10; myVariable = false; 

Πάνω, δηλώσαμε myVariableμε anyτύπο. Πρώτα του δώσαμε μια συμβολοσειρά, μετά έναν αριθμό και τέλος ένα δυαδικό. Αυτό είναι δυνατό λόγω του anyτύπου.

Μέρος # 4: Υποτύποι

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

let myVariable: number = undefined; 

Η μεταβλητή myVariableέχει εκχωρηθεί η τιμή undefinedγιατί, σε αυτό το σημείο, δεν ξέρουμε τι πρόκειται να είναι. Μπορούμε επίσης να χρησιμοποιήσουμε nullεδώ.

Μέρος # 5: Σιωπηρή εναντίον ρητής πληκτρολόγησης

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

let myVariable = 'Hello World'; 

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

Μέρος # 6: Έλεγχος τύπων

Σε αυτό το μάθημα θα μάθουμε πώς μπορούμε να ελέγξουμε τον τύπο μιας μεταβλητής και να εντοπίσουμε οποιοδήποτε σφάλμα ή να εκτελέσουμε οποιαδήποτε λειτουργία. Χρησιμοποιεί ένα παράδειγμα στο οποίο εξετάζουμε εάν η μεταβλητή μας είναι τύπου Bear(πού Bearείναι α class). Εάν θέλουμε να ελέγξουμε τον τύπο της μεταβλητής μας, μπορούμε να χρησιμοποιήσουμε τη instanceofμέθοδο.

import { Bear } from 'somefile.ts'; let bear = new Bear(3); if (bear instanceof Bear) { //perform some operation } 

Μέρος # 7: Τύπος ισχυρισμών

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

let variable1: any = 'Hello World'; if ((variable1 as string).length) { //perform some operation } 

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

Μέρος # 8: Πίνακες

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

let array1: number[] = [1, 2, 3, 4, 5]; 

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

Μέρος # 9: Tuples

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

let tuple_name = [10, 'Hello World']; 

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

Μέρος # 10: Αθροίσματα

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

**enum** Direction { Up = "UP", Down = "DOWN", Left = "LEFT", Right = "RIGHT" } 

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

Μέρος # 11: Αντικείμενο

In JavaScript, objects have a pretty major role in how language has been defined and has evolved. This lesson talks about objects in TypeScript — how to declare an object, and which kinds of values can fit inside the object type.

Part #12: Parameters

Using TypeScript, we can also assign types to the parameters of a function. In this section of the course, Dylan explains how we can add types to parameters. This is a very useful way to handle errors regarding data type in a function.

const multiply = (num1: number, num2: number) => { return num1 * num2; } 

We have declared a function multiply which takes two parameters and returns the value from multiplying them. We added a type of number to both the parameters so that no other value except a number can be passed to them.

Part #13: Return types

Like parameters, we can also add type-checking to the return value of a function. This way we can make sure that the return value from a function has an expected type. This part of the course explains the concept in detail.

const multiply = (num1: number, num2: number): number => { return num1 * num2; } 

We have added a return type of number to the function. Now, if we return anything except a number, it will show us an error.

Part #14: Custom types

In TypeScript, we can create a custom type using the keyword of type. We can then type-check objects on the basis of that type.

type person = {firstName: string}; const example3: person = {firstName: 'Dollan'}; 

This feature is almost deprecated in TypeScript, so you should rather use interface or class for this purpose. However, it’s important that you get to know it, as you might come across custom types when you start to dive into TS code.

Part #15: Interfaces

In TypeScript, the core focus is on type-checking which enforces the use of a particular type. Interfaces are a way of naming these types. It’s basically a group of related methods and properties that describe an object. This part of the course explains how to create and use interfaces.

interface Person { firstName: string, lastName: string, age: number } 

In the example above, we have an interface Person which has some typed properties. Note that we don’t initiate data in interfaces, but rather define the types that the parameters will have.

Part #16: Barrels

A barrel is a way to rollup exports from multiple modules into a single module. A barrel is, itself, a module, which is exporting multiple modules from one file. This means that a user has to import just one module instead of all the modules separately.

// Without barrel import { Foo } from '../demo/foo'; import { Bar } from '../demo/bar'; import { Baz } from '../demo/baz';` 

Instead of using these multiple lines separately to import these modules, we can create a barrel. The barrel would export all these modules and we import only that barrel.

// demo/barrel.ts export * from './foo'; // re-export all of its exportsexport * from './bar'; // re-export all of its exportsexport * from './baz'; // re-export all of its exports 

We can simply create a TypeScript file and export the modules from their respective file. We can then import this barrel wherever we need it.

import { Foo, Bar, Baz } from '../demo'; // demo/barrel.ts 

Part #17: Models

When using interfaces, we often face a number of problems. For example, interfaces can’t seem to enforce anything coming from the server side, and they can't keep the default value. To solve this issue, we use the concept of models classes. These act as an interface, and also may have default values and methods added to them.

Part #18: Intersection types

In this section, we’ll talk about intersection types. These are the ways we can use multiple types to a single entity or class. Sometimes we need to use multiple types to map one entity and, at that time, this feature comes in very handy.

import { FastFood, ItalianFood, HealthyFood} from ‘./interfaces’; let food1: FastFood | HealthyFood; let food2: ItalianFood; let food3: FastFood; let food4: FastFood & ItalianFood; 

In the example above, we have three interfaces and we are creating different objects from them. For example, food1 is going to be either FastFoodorHealthyFood. Similarly, food4 is going to be FastFoodas well asItalianFood.

Part #19: Generics

In short, generics is a way to create reusable components which can work on a variety of data types rather than a single one.

The concept of generics is actually not available in JavaScript so far, but is widely used in popular object-oriented languages such as C# or Java. In this lesson, we’ll learn how to use generics in TypeScript, and look at its key benefits.

Part #20: Access modifiers

The idea of access modifiers is relatively new in the arena of JavaScript and TypeScript, but they have been available in other object-oriented languages for a long time. Access modifiers control the accessibility of the members of a class.

In TypeScript, there are two access modifiers: public and private. Every member of a class defaults to public until you declare it otherwise.

class Customer { customerId: number; public companyName: string; private address: string; } 

customerId is a default public member, so it’s always available to the outside world. We have specifically declared companyName aspublic, so it will also be available outside of class. address is marked as private, therefore it won’t be accessible outside the class.

Part #21: Local setup

In this lesson, we’ll learn the steps to install and run TypeScript on local computers. Those steps generally involve installing Node and TypeScript, and then compiling “.ts” files.

Κάντε κλικ στην εικόνα για να φτάσετε στο μάθημα

Click the image to get to the course.

Part #22: TSLint and — great job!

Yay! You’ve completed the course. In the last part of the video, Dylan will give some tips on how to take this learning further and improve the code we write today.

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

Συνεχίστε λοιπόν και ακολουθήστε αυτό το δωρεάν μάθημα σήμερα!

Ευχαριστώ για την ανάγνωση! Το όνομά μου είναι Per Borgen, είμαι ο συνιδρυτής της Scrimba - ο ευκολότερος τρόπος για να μάθεις τον κώδικα. Εάν θέλετε να μάθετε να δημιουργείτε σύγχρονες ιστοσελίδες σε επαγγελματικό επίπεδο, θα πρέπει να ελέγξετε το bootcamp σχεδιασμού ιστοσελίδων που ανταποκρίνεται.