Opi TypeScript ilmaiseksi tämän interaktiivisen Scrimba-kurssin avulla

TypeScript-kurssibanneriNapsauta kuvaa siirtyäksesi Scrimba-kurssille

TypeScript on saanut viime vuosina paljon suosiota JavaScript-kehittäjien keskuudessa. Eikä ihme, koska TypeScript-koodi on yleensä vähemmän virhealtista, luettavampaa ja helpompaa ylläpitää.

Joten olemme tehneet yhteistyötä tunnetun verkko-ohjaajan Dylan C. Israelin kanssa ja luoneet ilmaisen TypeScript-kurssin Scrimballe. Kurssi sisältää 22 oppituntia ja on tarkoitettu ihmisille, jotka jo osaavat JavaScriptiä, mutta jotka haluavat nopean johdannon TypeScriptiin.

Suorita kurssi ilmaiseksi täällä.

Katsotaanpa nyt jokaista kurssin luentoa.

Osa # 1: Johdanto

Dylan antaa johdantokuvaruudussa yleiskuvan siitä, miksi sinun pitäisi oppia TypeScript ja kuinka kurssi on järjestetty. Hän kertoo sinulle myös vähän itsestään, jotta tunnet hänet ennen kuin hyppäät koodaaviin juttuihin.

Osa # 2: Muuttujatyypit

Käännösajan tyyppitarkistus on yksi TypeScriptin tärkeimmistä ominaisuuksista. Sen avulla voimme tarttua virheisiin, jotka liittyvät tietotyyppeihin kokoamisen aikana. Tässä oppitunnissa selitetään TypeScript-tiedostotyypit.

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

Näet, kuinka meillä on tyyppejä liitetty kaikkiin muuttujiin. Jos yritämme laittaa merkkijonon arvon numerotyyppisen muuttujan tilalle, TypeScript saa sen kiinni käännösaikana.

Osa # 3: Useita tyyppejä

TypeScriptissä säilytetään yksi tyyppi muuttujalle, mutta se ei ole mahdollista joka kerta. Joten sen sijaan TypeScript antaa meille anytyypin. Tämä tarkoittaa, että voimme määrittää useita arvotyyppejä yhdelle muuttujalle.

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

Yllä olemme julistettu myVariablekanssa anytyypin. Ensin annoimme sille merkkijonon, seuraavaksi numeron ja lopuksi totuusarvon. Tämä on mahdollista anytyypin takia.

Osa # 4: Alatyypit

Alatyyppejä käytetään, kun emme ole tietoisia muuttujan arvosta. TypeScript tarjoaa meille kaksi alatyyppiä: nullja undefined. Tämä oppitunti selittää, milloin meidän pitäisi käyttää kumpaakin näistä.

let myVariable: number = undefined; 

Muuttujalle myVariableon annettu arvo, undefinedkoska tässä vaiheessa emme tiedä mitä se tulee olemaan. Voimme käyttää myös nulltäällä.

Osa # 5: Implisiittinen vs eksplisiittinen kirjoittaminen

Osa 5 puhuu implisiittisen ja eksplisiittisen kirjoittamisen erosta. Yllä olevissa esimerkeissä näimme nimenomaisia ​​tyyppejä, joissa asetimme muuttujan tyypin. Toisaalta kääntäjä suorittaa implisiittisen kirjoittamisen ilman, että mainitsemme muuttujatyypin.

let myVariable = 'Hello World'; 

Tässä esimerkissä emme ole määrittäneet muuttujalle tyyppiä. Voimme tarkistaa tämän muuttujan tyypin typeoffunktion avulla. Tämä osoittaa, että myVariablese on stringtyyppiä, koska kääntäjä huolehti kirjoittamisesta.

Osa # 6: Tyyppien tarkistus

Tässä oppitunnissa opitaan, kuinka voimme tarkistaa muuttujan tyypin ja havaita mahdolliset virheet tai suorittaa minkä tahansa toiminnon. Se käyttää esimerkkiä, jossa testataan, onko muuttujamme tyyppiä Bear(missä Bearon a class). Jos haluamme tarkistaa muuttujamme tyypin, voimme käyttää instanceofmenetelmää.

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

Osa # 7: Tyyppiväitteet

Tyyppiväite tarkoittaa, että voimme lähettää muuttujan mihin tahansa tiettyyn tyyppiin, ja käskemme TypeScriptiä käsittelemään muuttujaa kyseisen tyypin avulla. Yritetään ymmärtää se esimerkillä:

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

variable1on tyyppi any. Mutta jos haluamme tarkistaa sen pituuden, se tuottaa virheen, kunnes käskemme TypeScriptiä käsittelemään sitä merkkijonona. Tämä oppitunti selittää lisätietoja tästä käsitteestä.

Osa # 8: Taulukot

Tämä kurssin osa selittää TypeScript-taulukot. Kun määritämme taulukolle arvoja JavaScriptissä, voimme laittaa erityyppisiä kohteita. Mutta TypeScriptillä voimme julistaa myös taulukon, jolla on tyypit.

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

Yllä olevassa esimerkissä ilmoitimme joukon numeroita osoittamalla sille numbertyypin. Nyt TypeScript varmistaa, että taulukossa on vain numeroita.

Osa # 9: Tuples

Joskus meidän on tallennettava useita arvotyyppejä yhteen kokoelmaan. Taulukot eivät toimi tässä tapauksessa. TypeScript antaa meille joukon tietotyypin. Näitä käytetään useiden tyyppisten arvojen tallentamiseen.

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

Tämä esimerkki osoittaa, että meillä voi olla numero- ja merkkijonotyyppisiä tietoeriä yhdessä kokoelmassa. Tässä oppitunnissa selitetään tarkemmin tuplien käsite.

Osa # 10: Enums

Tässä oppitunnissa opitaan TypeScriptin enumeista. Enumeja käytetään määrittelemään joukko nimettyjä vakioita, joita voidaan käyttää tarkoituksen dokumentointiin tai erilaisten tapausten luomiseen.

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

Tässä on perusesimerkki siitä, kuinka laskelmat ilmoitetaan ja miten niiden sisällä luodaan erilaisia ​​ominaisuuksia. Loput yksityiskohdat selitetään tässä kurssin osassa.

Osa # 11: Esine

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.

Napsauta kuvaa päästäksesi kurssille

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.

Tässä oppitunnissa hän kertoo myös kuinka voit käyttää hämmästyttävää TSLint-tiedostoa. Tämän työkalun avulla voit kirjoittaa paremman tuotantotason koodin parhaiden käytäntöjen ja käytäntöjen avulla. Siinä on joitain perusasetuksia, joita voit muokata tarpeidesi mukaan.

Joten mene eteenpäin ja suorita tämä ilmainen kurssi tänään!

Kiitos lukemisesta! Nimeni on Per Borgen, olen Scrimban perustaja - helpoin tapa oppia koodaamaan. Sinun kannattaa tutustua reagoivaan verkkosuunnittelun käynnistyskampaan, jos haluat oppia rakentamaan modernia verkkosivustoa ammattitasolla.