Вивчіть TypeScript за 5 хвилин - Підручник для початківців

TypeScript - це набраний набір JavaScript, спрямований на те, щоб зробити мову більш масштабованою та надійною.

Він є відкритим кодом і підтримується корпорацією Майкрософт з моменту його створення в 2012 році. Однак TypeScript отримав свій початковий прорив як основна мова програмування в Angular 2. З тих пір він продовжує зростати, також у спільнотах React та Vue.

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

Ми також збираємось розпочати безкоштовний 22-частинний курс TypeScript на Scrimba. Залиште тут електронну пошту, якщо хочете отримати швидкий доступ!

Давайте розпочнемо.

Встановлення TypeScript

Перш ніж розпочати кодування, нам потрібно встановити TypeScript на наш комп’ютер. Ми будемо використовувати npmдля цього, тому просто відкрийте термінал і введіть таку команду:

npm install -g typescript 

Після встановлення ми можемо перевірити це, запустивши команду, tsc -vяка відобразить версію встановленого TypeScript.

Написання коду

Давайте створимо наш перший файл TypeScript і напишемо в нього якийсь код. Відкрийте улюблену IDE або текстовий редактор і створіть файл із назвою first.ts - Для файлів TypeScript ми використовуємо розширення.ts

Наразі ми просто напишемо кілька рядків простого старого JavaScript, оскільки весь код JavaScript також є дійсним кодом TypeScript:

let a = 5; let b = 5; let c = a + b; console.log(c); 

Наступним кроком є ​​компіляція нашого TypeScript у простий JavaScript, оскільки браузери хочуть .jsфайли для читання.

Компіляція TypeScript

Для компіляції ми запустимо команду tsc filename.ts, яка створює файл JavaScript з тим самим іменем файлу, але з іншим розширенням, і який ми в кінцевому підсумку можемо передати нашим браузерам.

Тож відкрийте термінал у місці, де знаходиться файл, і запустіть таку команду:

tsc first.ts 

Порада . Якщо ви хочете скомпілювати всі файли TypeScript всередині будь-якої папки, скористайтеся командою:tsc *.ts

Типи даних

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

Введення тексту - дуже корисна функція для забезпечення надійності та масштабованості. Перевірка типу допомагає забезпечити роботу нашого коду належним чином. Крім того, це допомагає виявляти помилки та помилки та правильно документувати наш код.

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

У TypeScript є три різні типи: anyтип, Built-inтипи та User-definedтипи. Давайте подивимось на кожного з них.

будь-якого типу

Тип anyданих є надмножиною всіх типів даних у TypeScript. Надання будь-якої змінної типу тип anyеквівалентно відмові від перевірки типу змінної.

let myVariable: any = 'This is a string' 

Вбудовані типи

Це типи, які вбудовані в TypeScript. Вони включають в себе number, string, boolean, void, nullі undefined.

let num: number = 5; let name: string = 'Alex'; let isPresent: boolean = true; 

Визначені користувачем типи

У User-definedтипах включають enum, class, interface, array, і tuple. Деякі з них ми обговоримо далі в цій статті.

Об'єктно-орієнтоване програмування

TypeScript підтримує всі функції об’єктно-орієнтованого програмування, такі як класи та інтерфейси. Ця можливість є значним стимулом для JavaScript - він завжди боровся з функціональністю OOP, особливо з тих пір, як розробники почали використовувати її для великомасштабних додатків.

Клас

В об'єктно-орієнтованому програмуванні клас є шаблоном об'єктів. Клас визначає, як виглядатиме об'єкт з точки зору його особливостей та функціональних можливостей. Клас також інкапсулює дані для об’єкта.

TypeScript має вбудовану підтримку класів, які не підтримувалися ES5 та попередніми версіями. Це означає, що ми можемо використовувати classключове слово для легкого оголошення.

class Car { // fields model: String; doors: Number; isElectric: Boolean; constructor(model: String, doors: Number, isElectric: Boolean) { this.model = model; this.doors = doors; this.isElectric = isElectric; } displayMake(): void { console.log(`This car is ${this.model}`); } } 

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

Давайте подивимося, як ми можемо створити новий екземпляр цього класу:

const Prius = new Car('Prius', 4, true); Prius.displayMake(); // This car is Prius 

Для створення об'єкта класу ми використовуємо ключове слово newта викликаємо конструктор класу і передаємо йому властивості. Зараз цей об'єкт Priusмає свої властивості model, doorsі isElectric. Об'єкт також може викликати метод displayMake, який мав би доступ до властивостей Prius.

Інтерфейс

The concept of interfaces is another powerful feature of TypeScript, which allows you to define the structure of variables. An interface is like a syntactical contract to which an object should conform.

Interfaces are best described through an actual example. So, suppose we have an object of Car:

const Car = { model: 'Prius', make: 'Toyota', display() => { console.log('hi'); } } 

If we look at the object above and try to extract its signature, it would be:

{ model: String, make: String, display(): void } 

If we want to reuse this signature, we can declare it in the form of an interface. To create an interface, we use the keyword interface.

interface ICar { model: String, make: String, display(): void } const Car: ICar = { model: 'Prius', make: 'Toyota', display() => { console.log('hi'); } } 

Here, we’ve declared an interface called ICar , and created an object Car. Car is now binding to the ICar interface, ensuring that the Car object defines all the properties which are in the interface.

Conclusion

So I hope this gave you a quick glimpse into how TypeScript can make your JavaScript more stable and less prone to bugs.

TypeScript is gaining a lot of momentum in the world of web development. There’s also an increasing amount of React developers who are adopting it. TypeScript is definitely something any front-end developer in 2018 should be aware of.

Happy coding :)

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.