Lær TypeScript gratis med dette interaktive Scrimba-kursus

TypeScript kursusbannerKlik på billedet for at gå til Scrimba-kurset

TypeScript har vundet stor popularitet blandt JavaScript-udviklere i de sidste par år. Og det er ikke underligt, da TypeScript-kode har tendens til at være mindre udsat for fejl, mere læselig og lettere at vedligeholde.

Så vi har indgået et samarbejde med den fremtrædende online instruktør Dylan C. Israel og skabt et gratis TypeScript-kursus på Scrimba. Kurset indeholder 22 lektioner og er for folk, der allerede kender JavaScript, men som ønsker en hurtig introduktion til TypeScript.

Tag kurset gratis her.

Lad os nu se på hver af forelæsningerne i kurset.

Del # 1: Introduktion

I den indledende screencast giver Dylan et overblik over, hvorfor du skal lære TypeScript, og hvordan kurset er lagt ud. Han fortæller dig også en smule om sig selv, så du er fortrolig med ham, før du hopper ind i de kodende ting.

Del # 2: Variable typer

Kompilering af tidstypekontrol er en af ​​de vigtigste funktioner i TypeScript. Det lader os fange fejl relateret til datatyperne på kompileringstidspunktet. Denne lektion forklarer de tilgængelige datatyper i TypeScript.

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

Du kan se, hvordan vi har typer knyttet til alle variablerne. Hvis vi forsøger at placere en strengværdi i stedet for en nummertypevariabel, fanger TypeScript den på kompileringstidspunktet.

Del # 3: Flere typer

I TypeScript beholder vi en enkelt type for en variabel, men det er ikke muligt hver gang. Så i stedet giver TypeScript os anytypen. Dette betyder, at vi kan tildele flere typer værdier til en variabel.

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

Ovenfor har vi erklæret myVariablemed anytype. Først tildelte vi den en streng, derefter et nummer og endelig en boolsk. Dette er muligt på grund af anytypen.

Del # 4: Undertyper

Undertyper bruges, når vi ikke er opmærksomme på værdien af ​​variablen. TypeScript giver os to undertyper: nullog undefined. Denne lektion forklarer, hvornår vi skal bruge en af ​​disse.

let myVariable: number = undefined; 

Variablen myVariableer tildelt værdien af, undefinedfordi vi på dette tidspunkt ikke ved, hvad den skal være. Vi kan også bruge nullher.

Del # 5: Implicit vs eksplicit skrivning

Del 5 taler om forskellen mellem implicit og eksplicit skrivning. I eksemplerne ovenfor så vi eksplicitte typer, hvor vi indstillede variabeltypen. Implicit typing udføres derimod af compileren uden at vi angiver den variable type.

let myVariable = 'Hello World'; 

I dette eksempel har vi ikke tildelt variablen nogen type. Vi kan kontrollere typen af ​​denne variabel ved hjælp af typeoffunktionen. Dette viser, at det myVariableer af stringtypen, fordi compileren tog sig af typingen.

Del # 6: Kontrol af typer

I denne lektion lærer vi, hvordan vi kan kontrollere typen af ​​en variabel og fange enhver fejl eller udføre enhver handling. Det bruger et eksempel, hvor vi tester, om vores variabel er af typen Bear(hvor Bearer a class). Hvis vi vil kontrollere typen af ​​vores variabel, kan vi bruge instanceofmetoden.

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

Del # 7: Skriv påstande

Type påstand betyder, at vi kan caste en variabel til en bestemt type, og vi beder TypeScript om at håndtere den variabel ved hjælp af den type. Lad os prøve at forstå det med et eksempel:

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

variable1har typen af any. Men hvis vi vil kontrollere længden, producerer den en fejl, indtil vi beder TypeScript om at håndtere det som en streng. Denne lektion forklarer flere detaljer om dette koncept.

Del # 8: Arrays

Denne del af kurset forklarer TypeScript-arrays. Når vi tildeler værdier til en matrix i JavaScript, kan vi indsætte forskellige typer emner i JavaScript. Men med TypeScript kan vi også erklære en matrix med typer.

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

I ovenstående eksempel erklærede vi en række tal ved at tildele den numbertypen. Nu sørger TypeScript for, at matrixen kun indeholder tal.

Del # 9: Tuples

Nogle gange er vi nødt til at gemme flere typer værdier i en samling. Arrays fungerer ikke i dette tilfælde. TypeScript giver os datatypen for tupler. Disse bruges til at gemme værdier af flere typer.

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

Dette eksempel viser, at vi kan have dataelementer af antal og strengtyper i en samling. Denne lektion forklarer begrebet tuples mere detaljeret.

Del # 10: Enums

I denne lektion lærer vi om enums i TypeScript. Enums bruges til at definere et sæt navngivne konstanter, som kan bruges til at dokumentere hensigter eller til at oprette et sæt forskellige sager.

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

Her er et grundlæggende eksempel på, hvordan enums erklæres, og hvordan forskellige egenskaber oprettes inde i dem. Resten af ​​detaljerne forklares i dette afsnit af kurset.

Del # 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.

Klik på billedet for at komme til kurset

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.

I denne lektion dækker han også, hvordan du kan bruge den fantastiske TSLint. Dette værktøj hjælper dig med at skrive bedre produktionsniveaukode ved hjælp af bedste praksis og konventioner. Det kommer med nogle grundlæggende indstillinger, som du kan ændre for at imødekomme dine behov.

Så gå videre og tag dette gratis kursus i dag!

Tak for læsningen! Mit navn er Per Borgen, jeg er medstifter af Scrimba - den nemmeste måde at lære at kode på. Du bør tjekke vores responsive webdesign bootcamp, hvis du vil lære at opbygge et moderne websted på et professionelt niveau.