Вивчіть TypeScript безкоштовно за допомогою цього інтерактивного курсу Scrimba

Банер курсу TypeScriptКлацніть на зображення, щоб перейти до курсу Scrimba

Протягом останніх кількох років TypeScript набирає великої популярності серед розробників JavaScript. І це не дивно, оскільки код TypeScript, як правило, менш схильний до помилок, стає читабельнішим і простішим у обслуговуванні.

Тож ми співпрацювали з видатним інструктором в Інтернеті Діланом К. Ізраїлем та створили безкоштовний курс TypeScript на Scrimba. Курс містить 22 уроки і призначений для людей, які вже знають JavaScript, але бажають швидкого вступу до TypeScript.

Пройдіть курс безкоштовно тут.

Тепер давайте розглянемо кожну з лекцій у курсі.

Частина 1: Вступ

У вступному скрінкасті Ділан дає огляд того, чому слід вивчати TypeScript, і як викладено курс. Він також розповідає вам трохи про себе, так що ви знайомі з ним, перш ніж переходити до кодування.

Частина No2: Типи змінних

Перевірка часу компіляції - одна з найважливіших особливостей 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тип.

Частина No4: Підтипи

Підтипи використовуються, коли ми не знаємо про значення змінної. TypeScript надає нам два підтипи: nullі undefined. Цей урок пояснює, коли нам слід використовувати будь-який із них.

let myVariable: number = undefined; 

Змінні myVariableприсвоєно значення, undefinedоскільки на даний момент ми не знаємо, якою вона буде. Ми також можемо використовувати nullтут.

Частина №5: Неявне проти явного набору тексту

Частина 5 розповідає про різницю між неявним та явним набором тексту. У прикладах вище ми бачили явні типи, де ми встановлювали тип змінної. Імпліцитне введення, навпаки, виконується компілятором без зазначення типу змінної.

let myVariable = 'Hello World'; 

У цьому прикладі ми не призначили змінній жодного типу. Ми можемо перевірити тип цієї змінної за допомогою typeofфункції. Це покаже, що myVariableце stringтип, оскільки компілятор подбав про введення тексту.

Частина №6: Перевірка типів

На цьому уроці ми дізнаємося, як ми можемо перевірити тип змінної, а також виявити помилки або виконати будь-яку операцію. Він використовує приклад, в якому ми перевіряємо, чи є наша змінна типу Bear(де Beara class). Якщо ми хочемо перевірити тип нашої змінної, ми можемо скористатися instanceofметодом.

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

Частина No7: Типи тверджень

Твердження типу означає, що ми можемо призначати змінну до будь-якого конкретного типу, і ми просимо TypeScript обробляти цю змінну, використовуючи цей тип. Спробуємо це зрозуміти на прикладі:

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

variable1має тип any. Але якщо ми хочемо перевірити його довжину, це буде видавати помилку, поки ми не скажемо TypeScript обробляти це як рядок. Цей урок пояснює більше деталей про це поняття.

Частина No8: Масиви

У цій частині курсу пояснюються масиви TypeScript. У JavaScript, коли ми призначаємо значення масиву, ми можемо розміщувати різні типи елементів. Але за допомогою TypeScript ми можемо оголосити масив і з типами.

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

У наведеному вище прикладі ми оголосили масив чисел, присвоївши йому numberтип. Тепер TypeScript переконається, що масив містить лише цифри.

Частина No9: Кортежі

Іноді нам потрібно зберігати кілька типів значень в одній колекції. У цьому випадку масиви не служать. TypeScript надає нам тип даних кортежів. Вони використовуються для зберігання значень декількох типів.

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

Цей приклад показує, що ми можемо мати елементи даних типів чисел і рядків в одній колекції. Цей урок детальніше пояснює поняття кортежів.

Частина No10: Перерахування

На цьому уроці ми дізнаємося про перелічення в TypeScript. Перелічення використовуються для визначення набору іменованих констант, які можна використовувати для документування намірів або для створення набору різних випадків.

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

Ось базовий приклад того, як оголошуються перелічення та як у них створюються різні властивості. Решта деталей пояснюється в цьому розділі курсу.

Частина No11: Об’єкт

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. Цей інструмент допомагає писати кращий код виробничого рівня, використовуючи найкращі практики та домовленості. Він пропонує кілька основних налаштувань, які ви можете змінити відповідно до своїх потреб.

Тож продовжуйте і проходьте цей безкоштовний курс сьогодні!

Дякуємо за читання! Мене звуть Пер Борген, я співзасновник Scrimba - найпростішого способу навчитися кодувати. Якщо ви хочете навчитися будувати сучасний веб-сайт на професійному рівні, вам слід ознайомитися з нашим адаптивним веб-дизайном веб-дизайну.