Lernen Sie TypeScript kostenlos mit diesem interaktiven Scrimba-Kurs

TypeScript-KursbannerKlicken Sie auf das Bild, um zum Scrimba-Kurs zu gelangen

TypeScript hat in den letzten Jahren unter JavaScript-Entwicklern eine große Popularität erlangt. Kein Wunder, denn TypeScript-Code ist in der Regel weniger fehleranfällig, besser lesbar und einfacher zu warten.

Deshalb haben wir uns mit dem renommierten Online-Lehrer Dylan C. Israel zusammengetan und einen kostenlosen TypeScript-Kurs über Scrimba erstellt. Der Kurs enthält 22 Lektionen und richtet sich an Personen, die bereits JavaScript kennen, aber eine kurze Einführung in TypeScript wünschen.

Nehmen Sie hier kostenlos am Kurs teil.

Schauen wir uns nun die einzelnen Vorlesungen des Kurses an.

Teil 1: Einführung

Im einführenden Screencast gibt Dylan einen Überblick darüber, warum Sie TypeScript lernen sollten und wie der Kurs aufgebaut ist. Er erzählt Ihnen auch ein wenig über sich selbst, damit Sie ihn kennen, bevor Sie sich mit dem Codieren befassen.

Teil 2: Variablentypen

Die Typprüfung zur Kompilierungszeit ist eine der wichtigsten Funktionen von TypeScript. Damit können wir Fehler in Bezug auf die Datentypen beim Kompilieren abfangen. In dieser Lektion werden die in TypeScript verfügbaren Datentypen erläutert.

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

Sie können sehen, wie wir Typen an alle Variablen angehängt haben. Wenn wir versuchen, einen Zeichenfolgenwert anstelle einer Zahlentypvariablen zu setzen, fängt TypeScript ihn beim Kompilieren ab.

Teil 3: Mehrere Typen

In TypeScript behalten wir einen einzelnen Typ für eine Variable bei, dies ist jedoch nicht jedes Mal möglich. Stattdessen liefert uns TypeScript den anyTyp. Dies bedeutet, dass wir einer Variablen mehrere Arten von Werten zuweisen können.

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

Oben haben wir myVariablemit anyTyp deklariert . Zuerst haben wir ihm eine Zeichenfolge zugewiesen, dann eine Zahl und schließlich einen Booleschen Wert. Dies ist aufgrund des anyTyps möglich.

Teil 4: Untertypen

Untertypen werden verwendet, wenn wir den Wert der Variablen nicht kennen. TypeScript bietet uns zwei Untertypen: nullund undefined. In dieser Lektion wird erklärt, wann wir eines davon verwenden sollten.

let myVariable: number = undefined; 

Der Variablen myVariablewurde der Wert zugewiesen, undefinedda wir zu diesem Zeitpunkt nicht wissen, wie er aussehen wird. Wir können auch nullhier verwenden.

Teil 5: Implizite oder explizite Eingabe

Teil 5 spricht über den Unterschied zwischen impliziter und expliziter Typisierung. In den obigen Beispielen haben wir explizite Typen gesehen, bei denen wir den Typ der Variablen festgelegt haben. Die implizite Typisierung wird hingegen vom Compiler ausgeführt, ohne dass wir den Variablentyp angeben.

let myVariable = 'Hello World'; 

In diesem Beispiel haben wir der Variablen keinen Typ zugewiesen. Wir können den Typ dieser Variablen mit der typeofFunktion überprüfen . Dies zeigt, dass myVariablees sich um einen stringTyp handelt, da sich der Compiler um die Eingabe gekümmert hat.

Teil 6: Typen prüfen

In dieser Lektion lernen wir, wie wir den Typ einer Variablen überprüfen und Fehler abfangen oder Operationen ausführen können. Es wird ein Beispiel verwendet, in dem wir testen, ob unsere Variable vom Typ ist Bear(wobei a Bearist class). Wenn wir den Typ unserer Variablen überprüfen möchten, können wir die instanceofMethode verwenden.

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

Teil 7: Typzusicherungen

Typzusicherung bedeutet, dass wir eine Variable in einen bestimmten Typ umwandeln können, und wir weisen TypeScript an, diese Variable mit diesem Typ zu behandeln. Versuchen wir es anhand eines Beispiels zu verstehen:

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

variable1hat die Art von any. Wenn wir jedoch die Länge überprüfen möchten, wird ein Fehler ausgegeben, bis TypeScript angewiesen wird, ihn als Zeichenfolge zu behandeln. In dieser Lektion werden weitere Details zu diesem Konzept erläutert.

Teil 8: Arrays

In diesem Teil des Kurses werden TypeScript-Arrays erläutert. Wenn wir in JavaScript einem Array Werte zuweisen, können wir verschiedene Arten von Elementen einfügen. Mit TypeScript können wir jedoch auch ein Array mit Typen deklarieren.

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

Im obigen Beispiel haben wir ein Array von Zahlen deklariert, indem wir ihm den numberTyp zugewiesen haben . Jetzt stellt TypeScript sicher, dass das Array nur Zahlen enthält.

Teil 9: Tupel

Manchmal müssen wir mehrere Arten von Werten in einer Sammlung speichern. Arrays werden in diesem Fall nicht bereitgestellt. TypeScript gibt uns den Datentyp der Tupel an. Diese werden verwendet, um Werte mehrerer Typen zu speichern.

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

Dieses Beispiel zeigt, dass wir Datenelemente vom Typ Zahl und Zeichenfolge in einer Sammlung haben können. In dieser Lektion wird das Konzept der Tupel ausführlicher erläutert.

Teil 10: Aufzählungen

In dieser Lektion lernen wir die Aufzählungen in TypeScript kennen. Aufzählungen werden verwendet, um eine Reihe benannter Konstanten zu definieren, mit denen die Absicht dokumentiert oder eine Reihe verschiedener Fälle erstellt werden kann.

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

Hier ist ein grundlegendes Beispiel dafür, wie Aufzählungen deklariert werden und wie unterschiedliche Eigenschaften in ihnen erstellt werden. Der Rest der Details wird in diesem Abschnitt des Kurses erklärt.

Teil # 11: Objekt

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.

Klicken Sie auf das Bild, um zum Kurs zu gelangen

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.

In dieser Lektion behandelt er auch, wie Sie den erstaunlichen TSLint verwenden können. Mit diesem Tool können Sie mithilfe von Best Practices und Konventionen besseren Code auf Produktionsebene schreiben. Es enthält einige Grundeinstellungen, die Sie an Ihre Bedürfnisse anpassen können.

Nehmen Sie noch heute an diesem kostenlosen Kurs teil!

Danke fürs Lesen! Mein Name ist Per Borgen, ich bin Mitbegründer von Scrimba - der einfachste Weg, das Codieren zu lernen. Sie sollten sich unser Responsive Web Design Bootcamp ansehen, wenn Sie lernen möchten, moderne Websites auf professioneller Ebene zu erstellen.