Как да започнем с TypeScript

TypeScript е един от групата езици, които използват JavaScript време на изпълнение като среда за изпълнение: .ts файловете, съдържащи TypeScript код, се компилират в нормален JavaScript, който след това може да се стартира от браузъра.

Джереми Ашкенас за първи път направи тази концепция популярна с езика си CoffeeScript, но за съжаление, относително краткият синтаксис беше труден за научаване за разработчици, запознати със C # или Visual Basic.



Тъй като Microsoft се разшири в технологиите Web 2.0, тя избра да се вдъхнови от Джереми Ашкенас. Поради възможностите на Visual Studio, разработчиците могат просто да хакнат, докато печелят от различните езикови разширения.



TypeScript не се ограничава само до статично писане: предлага се и с множество усъвършенствани функции, които ви позволяват да симулирате обектно-ориентирани парадигми за програмиране в мрежата. Това кратко ръководство ще ви преведе през някои от основните му характеристики. Ако езикът ви харесва, повече информация може да се научи в движение.

01. Инсталирайте Visual Studio

Visual Studio 2017 идва с нов инсталатор; необходимите функции са разделени на полезни товари, за да улеснят внедряването



Visual Studio 2017 идва с нов инсталатор; необходимите функции са разделени на полезни товари, за да улеснят внедряването

Въпреки че TypeScript може да се използва и на Linux или macOS, ние ще се придържаме към официалната IDE на Microsoft. Изтеглете безплатното издание на общността на Visual Studio 2017 от Microsoft, тук и не забравяйте да маркирате полезния товар на ASP.NET по време на разполагането.

02. Добавете SDK

Поради скоростта на освобождаване на TypeScript, Visual Studio трябва да бъде разширена с SDK модул, който може да бъде изтеглен от сайта на Microsoft тук . Просто стартирайте инсталатора, сякаш е стандартно приложение на Windows.

03. Изтеглете TypeScript, реално

Нямаше да бъде Microsoft, ако не бяха включени допълнителни неприятности: докато SDK надгражда вашата инсталация на Visual Studio, действителният TSC компилатор не се добавя към вашия команден ред. Този проблем се решава най-добре чрез използване на диспечера на пакети npm на Node.js в командния ред.



PS C: Users tamha Downloads> npm install -g typecript

C: Users tamha AppData Roaming npm tsc -> C: Users tamha AppData Roaming npm node_modules typecript bin tsc

C: Users tamha AppData Roaming npm tsserver -> C: Users tamha AppData Roaming npm node_modules typecript bin tsserver

C: Users tamha AppData Roaming npm

`- машинопис@2.4.2

04. Излизане от проекта

Visual Studio очаква да работи в процес, ориентиран към решението: макар и интересно, това е по-малко от идеалното за нашите нужди. Вместо това създайте файл, наречен worker.ts, и го поставете на удобно място във вашата файлова система. Отворете го, като го плъзнете в Visual Studio и го пуснете в лентата с инструменти в горната част. След това променете съдържанието му, за да включите следния код:

function sayOi() { alert('Oi!'); } sayOi();

05. Създайте входна точка

Както бе споменато във въведението, .ts файлът не може да направи много сам. Поради това преминете към създаване на файл, наречен index.html, който трябва да се намира в същата папка. След това добавете скелетния код, показан придружаващ тази стъпка. Той зарежда изхода на компилатора и го изпълнява така, сякаш е друг бит на JavaScript.

06. Компилирайте и стартирайте

Следващата стъпка включва ръчно прекомпилиране на .ts файла. Отворете PowerShell и въведете командата tsc, последвана от името на входния файл. По подразбиране изходният файл ще споделя основното име на файла, но ще има разширение .js вместо .ts. Накрая отворете файла index.html в избран браузър, за да докажете появата на полето за съобщение.

PS C:Users amhaDownloads> tsc .worker.ts

07. Впишете се

Използвайте тази справочна таблица, за да намерите основните статични типове

Използвайте тази справочна таблица, за да намерите основните статични типове

Досега TypeScript е направил малко повече от това да действа като по-сложна JavaScript среда. Следващата стъпка включва активиране на поддръжката за статично писане: тя позволява на компилатора да извършва статичен анализ на параметри, като не допуска невалидни стойности. За това е необходим набор от типове - основните типове са изброени в таблицата по-горе, докато класовете ще бъдат обсъдени по-късно.

08. Изпробвайте

В нормален JavaScript тази грешка ще бъде намерена само когато въпросният ред бъде извикан

В нормален JavaScript тази грешка ще бъде намерена само когато въпросният ред бъде извикан

Присвояването на TypeScript тип променлива се извършва чрез „a:“, поставено след името на променливата. Нека модифицираме нашата функция Oi, за да вземе число и вместо това нека предадем в низ. И накрая, извикайте отново компилатора на TSC, за да се насладите на съобщението за грешка, показано на екранната снимка по-горе - Visual Studio, между другото, също ще подчертае въпросната линия.

function sayOi(whatToSay: number) { alert(whatToSay); } sayOi('Hello');

09. Избягвайте прототипа

JavaScript реализира обектно-ориентиране чрез прототипиране: стил на код, който е необичаен в .NET и C / C ++ света. TypeScript решава този проблем, като позволява създаването на класове - процес, показан във фрагмента, придружаващ тази стъпка.

class Imagine { public myResult: number; public myA: number; public myB: number; constructor(_a: number, _b: number) { this.myResult = _a + _b; this.myA = _a; } }

10. Оценявайте обществеността

Стойностите за съхранение, създадени чрез задаване на публичния атрибут, се попълват автоматично

Стойностите за съхранение, създадени чрез задаване на публичния атрибут, се попълват автоматично

Обикновено публичният атрибут се използва, за да декларира, че даден елемент на програма трябва да бъде достъпен отвън. Когато се използва като параметър на конструктор, вместо това той инструктира компилатора TypeScript да създава локални полета със същите имена.

class Imagine { public myResult: number; //public myA: number; constructor(public myA: number, public _b: number) { this.myResult = myA + _b; this.myA = myA; } }

11. Метод и екземпляр

Нека разширим нашия примерен клас, като му предоставим метод, който осъществява достъп до стойностите, съхранени в myResult и myA, и ги извежда на екрана. И накрая, новият параметър се използва за създаване на екземпляр на класа - той се използва за извикване на метода.

class Imagine { public myResult: number; . . . public saySomething(): void { alert(this.myResult); } } let myImagine: Imagine = new Imagine(2, 2); myImagine.saySomething();

12. Използвайте магическите му характеристики

Езиковият дизайн на TypeScript има за цел да спести на разработчиците възможно най-много усилия. Една хубава функция е автоматичното попълване на параметри, създадени с помощта на показания пряк път.

class Imagine { public myResult: number; constructor(public myA: number, public myB: number) { this.myResult = myA + myB; } public saySomething(): void { alert(this.myA + “ “ + this.myB); } }

13. Извършете наследяване

Нашата малка примерна програма доказва, че TypeScript отговаря на основните принципи на наследяването на обекти

Нашата малка примерна програма доказва, че TypeScript отговаря на основните принципи на наследяването на обекти

Един от основните принципи на обектно-ориентираното програмиране включва базиране на класове един върху друг. След това производни класове могат да отменят съдържанието на техния основен клас, което води до гъвкаво регулируеми йерархии на класове.

class Future extends Imagine { public saySomething(): void { console.log(this.myA); } }

14. Анализирайте презаписа

Кодовият фрагмент отгоре разшири класа Imagine с поделемент, наречен Future. Бъдещето се различава от Imagine по това, че методът му saySomething, който е по-развит, излъчва съобщение в командния ред на браузъра.

let myImagine: Imagine = new Future(2, 2); myImagine.saySomething(); let myFuture: Future = new Future(9, 9); myFuture.saySomething();

15. Анализирайте презаписването, редукция

С това може да се тества действителният код. Когато се изпълни, конзолата на браузъра ще съдържа две извиквания на Future - напредналият клас запазва свойствата си, дори когато е извикан като обект Imagine.

какъв шрифт филтрирате

16. Ограничен достъп

Излагането на променливи на членове с публичния модификатор е непопулярно: в крайна сметка отнема по-голямата част от контрола върху това, което потребителите правят със съдържанието на променливата. Достъпниците на TypeScript ви позволяват да заобиколите този проблем по начин, подобен на традиционния ООП. Имайте предвид, че членове само за четене също се поддържат, но че използването на тази функция изисква активиране на поддръжката на ECMAScript5.

public _myCache: string; get fullCache(): string { return this._myCache; } set fullCache(newX: string) { if (newX == 'hello') { this._myCache = newX; } else { console.log('Wrong data!'); } }

17. Направете го абстрактно

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

abstract class Imagine { public myResult: number; abstract sayName(): void; constructor(public myA: number, public myB: number) { this.myResult = myA + myB; } public saySomething(): void { alert(this.myA + ' ' + this.myB); } } class Future extends Imagine { . . . public sayName() { console.log('Hello'); } }

18. Направете интерфейс

Тъй като обектните структури стават по-сложни, разработчиците често се оказват изправени пред ситуации, при които един клас изпълнява множество битове логика. В този случай интерфейсът прави хубаво решение - примерът показва какво да очаквате.

interface DataInterface { field: number; workerMethod(): void; }

19. Приложете го

Както в случая с класа по-горе, интерфейсът не ни носи нищо, ако не можем да го използваме. За щастие, прилагането му не е особено трудно: имайте предвид, че авторите на интерфейса освен това могат да обявят части от тяхното създаване за незадължителни.

class Worker implements DataInterface { field: number; workerMethod(): void { throw new Error('Method not implemented.'); } }

20. Използвайте родов клас

Компилаторът TypeScript налага строга проверка на валидността на променливите. Когато работите върху клас за съхранение, генеричните средства ви позволяват да позволите на крайния потребител да определи типа, с който да се борави. Освен това TypeScript позволява и други общи елементи като функции, както е показано във (тавтологичния) фрагмент, взет от документацията.

//Generic function function identity(arg: number): number { return arg; } //Generic class class GenericNumber { zeroValue: T; add: (x: T, y: T) => T; }

21. Въпрос на изброяване

Държавните машини и подобни елементи имат голяма полза от това да имат начин да ограничат променлива до съхраняване на няколко добре дефинирани състояния. Това може да се постигне с помощта на типа данни Enum:

enum ParserState { Idle = 1, Read0, Read1 } class Imagine { public myState: ParserState; constructor(public myA: number, public myB: number) { this.myState = ParserState.Idle;

22. Научете повече

Покриването на толкова сложен език като TypeScript в една статия е почти невъзможно. Погледни към Примери за сайта на TypeScript за да научите повече за езиковите обвързвания.

Тази статия първоначално е публикувана в брой 266 Уеб дизайнер , креативното списание за уеб дизайн - предлага експертни уроци, модерни тенденции и безплатни ресурси. Купете брой 266 тук или абонирайте се за Web Designer тук .

Специално коледно предложение: Спестете до 49% от абонамент за Web Designer за вас или приятел за Коледа. Предложението е ограничено, затова се движете бързо ...

Свързани статии: