TypeScript е типизиран супер набор от JavaScript, целящ да направи езика по-мащабируем и надежден.
Той е с отворен код и се поддържа от Microsoft, откакто са го създали през 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.
