TypeScript Урок: Какво е интерфейс, преброяване, масив

Какво е TypeScript?

TypeScript е надмножество на JavaСценарий. TypeScript е обектно-ориентиран език за програмиране, който поддържа класове, интерфейси и други. Това е език с отворен код, разработен от Microsoft който статично компилира кода към JavaСкрипт. Може лесно да се изпълнява в браузър или в Nodejs.

Всички най-нови функции, пуснати за ECMAScript, се поддържат в TypeScriptи освен това TypeScript има свои собствени обектно-ориентирани функции, като интерфейси, декларации за околната среда и наследяване на класове, които помагат при разработванетоping голямо приложение, което иначе би било трудно за изграждане JavaСценарий.

Връзката е еднопосочна. Всеки валиден JavaСкрипт файлът вече е валиден TypeScript, но обратното не е вярно, защото анотациите на типа съществуват само в TypeScript и се изтриват по време на компилацията.

Защо ползване TypeScript?

Ето важните предимства от използването TypeScript:

• Големи и сложни проекти в JavaСкриптовете са трудни за кодиране и поддръжка.
• TypeScript помага много с организацията на кода и премахва повечето грешки по време на компилация, а не по време на изпълнение.
• TypeScript поддържа JS библиотеки и API документация.
• Това е скриптов език с опция за типизиране, така че типовете могат да се усвояват постепенно.
• TypeScript кодът може да се преобразува в обикновен JavaСкриптов код за всяка целева браузърна конфигурация.
• Това предоставя по-добро структуриране на кода и техники за обектно-ориентирано програмиране.
• Това позволява по-добра поддръжка на инструменти за време за разработка, включително автоматично довършване и безопасно рефакториране.
• Може да разшири езика отвъд стандартния, с функции като декоратори.

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

TypeScript История

Нека разгледаме важните забележителности от историята на TypeScript:

• След две години вътрешно развитие на Microsoft, TypeScript 0.9 беше пусната през 2013 г.
• TypeScript Версия 1.0, с допълнителна поддръжка за генерични кодове, беше пусната на Build 2014.
• През юли 2014 г. нов TypeScript пристигна компилатор, който беше пет пъти по-бърз от предишната версия.
• През юли 2015 г. беше добавена поддръжка за ES6 модули, ключовата дума за пространство от имена, for…of и декоратори.
• През ноември 2016 г. бяха добавени картографирани типове, ключови и търсени типове, както и остатъци и разпръсквания на обекти.
• На 27 март 2018 г. бяха добавени условни типове и подобрен keyof с типове пресичания.
• TypeScript Версия 5.0, издадена през март 2023 г., модернизира декораторите и намали размера на пакета.
• TypeScript 6.0 пристигна през март 2026 г. като финална версия, изградена върху JavaКодова база на скриптове.
• TypeScript 7.0 премества компилатора към нативна Go имплементация, която Microsoft съобщава, че е приблизително десет пъти по-бърз от 6.0.

Кой използва TypeScript?

TypeScript вече не е нишов избор. Той е в основата на няколко от най-широко използваните инструменти за front-end и back-end, а списъкът по-долу показва къде е най-вероятно начинаещият да го срещне.

• Ъглова: Фреймуъркът Angular е написан на TypeScript, и се очаква кодът на приложението също да бъде написан в него.
• Проекти на React и Vue: И двете екосистеми доставят официални TypeScript шаблони и повечето съвременни начинаещи го активират по подразбиране.
• Node.js бекендове: Сървърните рамки като NestJS са изградени около TypeScript класове и декоратори.
• Инструменти за редактора: Visual Studio Code само по себе си е голям TypeScript кодова база, поради което езиковата му поддръжка е толкова пълна.
• Фронтендове за големи предприятия: Екипи, работещи с много сътрудници, го възприемат, за да уловят грешки при интеграцията преди внедряването.

Как да изтеглите и инсталирате TypeScript

Ето процеса стъпка по стъпка за изтегляне и инсталиране TypeScript:

Стъпка 1) Изтеглете и инсталирайте Nodejs

Отидете на официалния сайт на Nodejs, https://nodejs.org/en/download/и изтеглете и инсталирайте Nodejs за вашата операционна система. Подробни инструкции са налични в ръководството на как да изтеглите и инсталирате Node.js.

Стъпка 2) Проверете версията на Nodejs и npm

За да проверите дали Nodejs и npm са инсталирани, проверете версията в командния ред.

D:\typeproject>node --version
v22.14.0

D:\typeproject>npm --version
10.9.2

Всяка текуща версия на Node LTS работи. TypeScript самата по себе си изисква само поддържана версия на Node, за да стартира компилатора.

Стъпка 3) TypeScript Инсталация

Създайте директорията на проекта си тип project\ и изпълнете npm init, както е показано в командата по-долу:

npm init

Стъпка 4) Стартирайте инсталацията

Това създава package.json, който ще съхранява зависимостите за нашия проект.

След като сте готови, инсталирайте TypeScript , както следва:

npm -g install typescript

Горната команда ще се погрижи за инсталирането TypeScript. Добавянето на „-g“ към npm install ще инсталира TypeScript глобално. Предимството на използването на -g е, че ще можете да използвате TypeScript TSC команда от всяка директория, тъй като е инсталирана глобално. В случай, че не искате да инсталирате TypeScript глобално, използвайте командата по-долу:

npm install --save-dev typescript

Създайте папка src\ в директорията на проекта си и вътре в src\ създайте TypeScript файл test.ts и напишете своя код.

Пример: test.ts

function add(x:number, y:number) {
	return x+y;
}

let sum = add(5,10);
console.log(sum);

Компилирам TypeScript код към Javascript

За да компилирате горния код, използвайте следната команда.

If TypeScript е инсталиран глобално, използвайте командата по-долу:

tsc test.ts

If TypeScript е инсталиран локално във вашия проект, трябва да използвате пътя на TypeScript от node_modules, както е показано, или го изпълнете чрез npx:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

Горната команда ще създаде файл test.js, който ще съдържа компилирания код. JavaСценарий.

Пример: test.js

function add(x, y) {
    return x + y;
}
var sum = add(5, 10);
console.log(sum);

Изпълнение Javascript използвайки Nodejs

Сега ще изпълним test.js в Nodejs, както следва:

D:\typeproject\src>node test.js
15

Стойността, предадена на console.log, се показва, когато test.js се изпълни.

Изпълнение JavaСкрипт в браузъра

Пример:

<html>
<head></head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

Компилирам TypeScript код към Javascript използвайки версия на EcmaScript

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

Пример: test.ts

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

За да компилирате до ES версията по ваш избор, можете да използвате опцията target или t във вашата команда, както следва:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

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

В момента ще използваме ES6 като цел:

tsc --target ES6  test.ts

test.ts към test.js

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

Кодът остава такъв, какъвто е, защото функцията със стрелка, която сте използвали, е ES6 функция и не се променя при компилиране в ES6.

По подразбиране целта е ES3, така че без цел получавате test.js като:

var addnumbers = function (a, b) {
    return a + b;
};
addnumbers(10, 20);

Така че тук, дебелата стрелка се променя на нормална анонимна функция.

Променливи в TypeScript

Променливи се използват за съхраняване на стойности и стойността може да бъде низ, число, булево или израз. Когато става въпрос за променливи в TypeScript, те са подобни на JavaСценарийИ така, нека се научим да декларираме и присвояваме стойност на променливи в TypeScript.

Променливите не могат да се използват в код, без да са дефинирани. За да декларирате променлива, можете да използвате

Var ключова дума,

нека ключова дума

конст ключова дума

Работа с променливи в TypeScript е подобен на JavaСкрипт и потребители, запознати с JavaСкриптът ще го намери много лесно. В съвременния код, нека намлява конст са предпочитани пред Var, защото блоковият им обхват предотвратява цял клас грешки.

Деклариране на променливи чрез var

Синтаксис:

var firstname = "Roy";

Нека разгледаме няколко TypeScript примери за разбиране на действието на ключовата дума var, както и на обхвата на променливите, декларирани с помощта на Var ключова дума.

Пример 1:

var k = 1; // variable k will have a global scope

function test() {
    var c = 1; // variable c is local and accessible only inside function test
    return k++;
}

test(); // output as 1
test(); // output as 2
alert(c); // will throw error, Uncaught ReferenceError: c is not defined

Пример 2:

var t = 0; // variable t is declared in global scope
function test() {
    var t = 10; // t is redeclared inside the function, so changes stay local
    return t;
}
test(); // will return 10
console.log(t); // will console 0

Пример 3:

var i = 0;
function test() {
    if (i > 0) {
      var t = 1;
    }
    return t;
}

test(); // returns undefined. The if block did not run, yet t is still declared
        // because var declarations are hoisted to the whole function.
i++;    // value of i is incremented
test(); // since i > 0 the if block runs and the value returned is 1

Деклариране на променливи с помощта на let

- TypeScript синтаксисът за let е даден по-долу:

Синтаксис:

let name = "Roy";

Работата на нека променливата е почти същата като Var, но с една важна разлика, която е показана в примера по-долу.

Пример:

let i = 1;
function test() {
    if (i > 0) {
	  let t = 1;
    }
    return t;
}

test(); // throws an error: Cannot find name 't'

Горното TypeScript примерът хвърля грешка, но същият код би работил и с Var ключова дума. Променливи, декларирани с помощта на нека са достъпни само в блока, в който са декларирани. В този пример t съществува само в блока if, а не в цялата функция.

Същото важи и за всяка функция, for цикъл, while цикъл или switch блок. Променливата let е достъпна само вътре в този блок и позоваването ѝ извън него води до грешка. Това е основната разлика между var и let.

Деклариране на променливи чрез const

Const означава константни променливи. Те са подобни на променливите let, с разликата, че след като веднъж е присвоена стойност, тя не може да бъде променена. Следователно декларацията на const трябва да бъде инициализирана на същия ред.

Синтаксис:

const name = "Roy";

Пример:

const age = "25";
age = "30"; // error: Cannot assign to 'age' because it is a constant

const total; // error: 'const' declarations must be initialized

Така че използвайте const винаги, когато знаете, че присвоената стойност няма да бъде преназначена. Обърнете внимание, че const предотвратява преназначаването на обвързването, а не модификацията на обект, към който сочи.

Вписва TypeScript

TypeScript е силно типизиран език, докато JavaСкриптът не е. Променлива, чиято стойност е дефинирана като низ, може да бъде променена на число без никакъв проблем в JavaСценарий. Същото не се толерира в TypeScript. В TypeScript, типът на променливата се дефинира в началото и по време на изпълнението тя трябва да запази този тип. Всяка промяна води до грешка по време на компилация към JavaСценарий.

Следните са основните видове:

Телефон за връзка:

Приема само цели числа, числа с плаваща запетая, дроби и подобни числови стойности.

Синтаксис:

let a :number = 10;
let marks :number = 150;
let price :number = 10.2;

Ето някои важни методи, които могат да се използват с числови типове:

toFixed() – ще преобразува числото в низ и ще запази десетичните знаци, дадени на метода.

toString () – този метод ще преобразува числото в низ.

стойност на() – този метод ще върне примитивната стойност на числото.

toPrecision() – този метод ще форматира числото до определена дължина.

Пример: с всички числови методи

let _num :number = 10.345;
_num.toFixed(2);      // "10.35"
_num.valueOf();      // 10.345
_num.toString();     // "10.345"
_num.toPrecision(2); // "10"

Низ

Низ: само низови стойности.

Синтаксис:

let str :string = "hello world";

Ето някои важни методи, които могат да се използват с типове низове:

• разделят() – този метод ще раздели низа на масив.
• charAt() – този метод ще върне символа на зададения индекс.
• индекс на() – този метод ще даде позицията на първото срещане на дадената му стойност.
• замени() – този метод приема 2 низа. Търси първата стойност в низа и, ако има такава, я замества с втората, връщайки нов низ.
• подреден() – този метод ще премахне празното пространство от двете страни на низа.
• подстр() – този метод ще върне част от низа, в зависимост от началната позиция и дадената дължина.
• подниз() – този метод ще върне част от низа, в зависимост от началната и крайната позиция. Символът в крайната позиция се изключва.
• toUpperCase() – ще преобразува низа в главни букви.
• toLowerCase() – ще преобразува низа в малки букви.

Пример:

let _str:string = "Typescript";

_str.charAt(1);                // y
_str.split("");                // ["T","y","p","e","s","c","r","i","p","t"]
_str.indexOf("s");             // 4, gives -1 if the value does not exist
_str.replace("Type", "Coffee"); // "Coffeescript"
_str.trim();                    // "Typescript"
_str.substr(4, _str.length);   // "script"
_str.substring(4, 10);         // "script"
_str.toUpperCase();             // "TYPESCRIPT"
_str.toLowerCase();             // "typescript"

Булева

Булевата стойност приема само логическите стойности true и false. За разлика от обикновената JavaСкриптът, числата 0 и 1 не се приемат, защото са от тип число.

Синтаксис:

let status :boolean = true;
let isDone :boolean = false;

let bflag :boolean = 1;
// error: Type 'number' is not assignable to type 'boolean'

който и да е

Синтаксис:

let a :any = 123
a = "hello world"; // changing type will not give any error.

Променливи, декларирани с помощта на който и да е типът може да съдържа низ, число, масив, булева стойност или празнота. TypeScript няма да хвърли никаква грешка по време на компилация, което е подобно на променливите в JavaСкрипт. Използвайте типа any само когато не сте сигурни за типа стойност, която ще бъде свързана с тази променлива, защото това изключва всяка проверка на тази стойност.

празнота

Типът Void се използва най-вече като тип на връщане на функция, която не връща нищо.

Синтаксис:

function testfunc():void{
 //code here
}

TypeScript Array

An Array in TypeScript е тип данни, в който можете да съхранявате множество стойности. Нека научим как да декларираме и присвояваме стойности за операции с масиви в TypeScript.

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

Декларирайте и инициализирайте масив

Синтаксис:

let nameofthearray : Array<typehere>

Пример

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; // array with all string values

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; // array with all numbers

let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; // mixed

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; // any type

Различни начини за достъп до елементи от масив

За да се получат елементите от масив, стойностите започват от индекс 0 до дължината на масива минус едно.

let years: Array<number> = [2016, 2017, 2018, 2019];
years[0]; // output will be 2016
years[1]; // output will be 2017
years[2]; // output will be 2018
years[3]; // output will be 2019

Можете също да получите елементите от масив, използвайки TypeScript за контур, както е показано по-долу.

Използването на TypeScript за цикъл

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i = 0; i < years.length; i++) {
     console.log(years[i]);
}

Изход:

2016
2017
2018
2019

Използване на for-in цикъл

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i in years) {
     console.log(years[i]);
}

Изход:

2016
2017
2018
2019

Използване на цикъл for-of

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i of years) {
     console.log(i);
}

Изход:

2016
2017
2018
2019

Използване на цикъла forEach

let years: Array<number> = [2016, 2017, 2018, 2019];
years.forEach(function(yrs, i) {
  console.log(yrs);
});

Изход:

2016
2017
2018
2019

TypeScript Методи за масиви

- TypeScript Обектът Array има много свойства и методи, които помагат на разработчиците да обработват масиви лесно и ефективно. Можете да получите стойността на свойство, като укажете arrayname.property, и резултата на метод, като укажете arrayname.method().

Пример за свойството дължина

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];

console.log(months.length);  // 12

Пример за обратен метод

console.log(months.reverse());
// ["Dec","Nov","Oct","Sept","Aug","July","June","May","April","March","Feb","Jan"]

Пример за метод на сортиране

console.log(months.sort());
// ["April","Aug","Dec","Feb","Jan","July","June","March","May","Nov","Oct","Sept"]

Пример за поп метод

console.log(months.pop()); // Dec

Пример за метод на смяна

console.log(months.shift()); // Jan

Пример за push метод

let years: Array<number> = [2015, 2016, 2017, 2018, 2019];
console.log(years.push(2020)); // 6, the new length
years.forEach(function(yrs, i) {
  console.log(yrs); // 2015, 2016, 2017, 2018, 2019, 2020
});

Пример за метод concat

let array1: Array<number> = [10, 20, 30];
let array2: Array<number> = [100, 200, 300];
console.log(array1.concat(array2)); // [10, 20, 30, 100, 200, 300]

Клас в TypeScript

TypeScript е надмножество на JavaСкрипт, така че каквото е възможно в JavaВъзможен е и скрипт в TypeScriptКласът е функция, добавена от ES6 нататък. По-рано в JavaСкриптова, класоподобна функционалност е постигната с помощта на функция с прототипни методи за повторно използване на код. С помощта на клас, вашият код може да се доближи до езици като Java, C# и Python, където кодът лесно се използва повторно.

Дефиниране на клас в TypeScript

Ето основния синтаксис на класа в TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class
}

Пример: Работещ пример за Class

class Students {
    age : number;
    name : string;
    roll_no : number;

    constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

    getRollNo(): number {
        return this.roll_no;
    }

    getName() : string {
        return this.name;
    }

    getAge() : number {
        return this.age;
    }
}

В горния пример имате клас, наречен Students (Ученици). Той има свойствата age (възраст), name (име) и roll_no (номер на клас).

Конструктор в а TypeScript клас

Класът Students, дефиниран по-горе, има конструктор, както е показано по-долу:

constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

Методът конструктор има параметрите age, name и roll_no. Конструкторът се грижи за инициализирането на свойствата, когато класът е инстанциран. Достъпът до свойствата се осъществява чрез това ключова дума, например this.age за достъп до age и this.roll_no за достъп до roll_no. Можете също да имате конструктор по подразбиране, както е показано по-долу:

constructor () {}

Методи вътре в a TypeScript клас

В класа Students са дефинирани методи, например getRollNo(), getName() и getAge(), които връщат стойностите на свойствата roll_no, name и age.

getRollNo(): number {
        return this.roll_no;
}

getName() : string {
	return this.name;
}

getAge() : number {
	return this.age;
}

Създаване на екземпляр на клас в TypeScript

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

let student_details = new Students(15, "Harry John", 33);
student_details.getAge();  // 15
student_details.getName(); // Harry John

Съставяне на TypeScript Клас към JavaСценарий

Можете да използвате командата tsc, както е показано по-долу, за да компилирате в JavaСценарий.

Command: tsc  Students.ts

Продукцията на JavaКодът на скрипта при компилация е показан по-долу:

var Students = /** @class */ (function () {
    function Students(age, name, roll_no) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }
    Students.prototype.getRollNo = function () {
        return this.roll_no;
    };
    Students.prototype.getName = function () {
        return this.name;
    };
    Students.prototype.getAge = function () {
        return this.age;
    };
    return Students;
}());

In JavaСкрипт, класът се преобразува в самоизвикваща се функция.

Наследяване на класове

Класовете могат да се наследяват с помощта на простира ключова дума в TypeScript.

Синтаксис на наследяване на клас:

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

клас Б ще могат да споделят клас А методи и свойства.

Ето един работещ пример за клас, използващ наследяване:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24);
_std1.getAge();      // output is 24
_std1.setMarks(500);
_std1.getMarks();    // output is 500

Имате два класа, Person и Student. Student разширява Person и обектът, създаден от Student, може да има достъп до собствените си методи и свойства, както и до тези на класа, който разширява.

Сега нека добавим някои промени към горния клас.

Пример:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        this.tmarks = tmarks; // the derived property must be assigned too
    }
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getAge();   // output is 24
_std1.getMarks(); // output is 500

Промяната в сравнение с предишния пример е конструктор, дефиниран в класа Student. Конструкторът приема същите параметри като базовия клас, плюс всички свои допълнителни параметри.

In TypeScript Трябва да извикате super с всички параметри на базовия клас. Това трябва да е първият оператор в конструктора, защото super изпълнява конструктора на разширения клас. Всяко свойство, декларирано от производния клас, като например tmarks, трябва да бъде присвоено изрично, в противен случай getMarks ще върне undefined.

Модификатори за достъп в TypeScript

TypeScript поддържа модификаторите за достъп public, private и protected на вашите методи и свойства. По подразбиране, ако не е зададен модификатор за достъп, методът или свойството се считат за public и са лесно достъпни от обекта на класа.

В случай на модификатори за частен достъп, членовете не са достъпни от обекта на класа и са предназначени за използване само вътре в класа. Те не са достъпни за наследен клас.

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

Пример:

class Person {
    protected name: string;
    protected age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    private getName(): string {
        return this.name;
    }

    getDetails(): string {
        return "Name is " + this.getName();
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        this.tmarks = tmarks;
    }
    getMarks(): number {
        return this.tmarks;
    }

    getFullName(): string {
        return this.name;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getMarks();    // output is 500
_std1.getFullName(); // output is Sheena
_std1.getDetails();  // output is Name is Sheena

Интерфейс в TypeScript

Една от основните характеристики на TypeScript е интерфейси. Интерфейсът е набор от правила, които трябва да бъдат имплементирани от обекта, който го използва. Обектът може да бъде клас, функция или променлива. Интерфейсът може да бъде съставен от свойства и методи. Можете да маркирате свойство или метод като опционални, използвайки синтаксиса „?“. Интерфейсът добавя строга проверка на типа за всяка функция, променлива или клас, който го имплементира.

Синтаксис на интерфейс в TypeScript

interface Dimension {
    width: string;
    height: string;
}

Дефинирали сте интерфейс с име Dimension, който има свойствата width и height, и двете от тип string.

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

Пример:

interface Dimension {
    width: string;
    height: string;
}

let _imagedim: Dimension = {
    width: "100px",
    height: "200px"
};

Сигнатурата на интерфейса Dimension има ширина и височина и двете са задължителни. Ако някое свойство е пропуснато или типът е променен, това ще доведе до грешка по време на компилиране на кода. JavaСценарий.

Горният код, когато е компилиран до JavaСкриптът изглежда така:

var _imagedim = {
    width: "100px",
    height: "200px"
};

Нека сега да видим как да използваме интерфейс с функция.

Използване на интерфейс върху функция като тип връщане

interface Dimension {
    width: string;
    height: string;
}

function getDimension() : Dimension {
    let width = "300px";
    let height = "250px";
    return {
        width: width,
        height: height
    }
}

В горния пример, интерфейсът Dimension се използва като тип връщане на функцията getDimension(). Върнатата стойност трябва да съответства на свойствата и типовете, декларирани в интерфейса.

Съставеният JavaКодът на скрипта ще бъде следният:

function getDimension() {
    var width = "300px";
    var height = "250px";
    return {
        width: width,
        height: height
    };
}

По време на компилацията, ако типът на връщането не съвпада с интерфейса, ще се генерира грешка.

Интерфейс като функционален параметър

interface Dimension {
    width: string;
    height: string;
}

function getDimension(dim: Dimension) : string {
    let finaldim  = dim.width + "-" + dim.height;
    return finaldim;
}

getDimension({width:"300px", height:"250px"}); // "300px-250px"

В горния пример сте използвали интерфейса Dimension като параметър на функцията getDimension(). Когато извикате функцията, предаденият ѝ параметър трябва да съответства на правилата, дефинирани от интерфейса.

Съставеният JavaКодът на скрипта ще бъде следният:

function getDimension(dim) {
    var finaldim = dim.width + "-" + dim.height;
    return finaldim;
}
getDimension({ width: "300px", height: "250px" });

Клас, имплементиращ интерфейс

За да използвате интерфейс с клас, трябва да използвате ключовата дума сечива.

Синтаксис за клас, имплементиращ интерфейс:

class NameofClass implements InterfaceName {
}

Следващият пример показва интерфейс, работещ с клас.

interface Dimension {
    width : string,
    height: string,
    getWidth(): string;
}

class Shapes implements Dimension {
    width: string;
    height: string;
    constructor (width:string, height:string) {
        this.width = width;
        this.height = height;
    }
    getWidth() {
        return this.width;
    }
}

В горния пример сте дефинирали интерфейса Dimension със свойствата width и height, и двете от тип string, и метод, наречен getWidth(), който връща string.

Съставеният JavaКодът на скрипта ще бъде следният:

var Shapes = /** @class */ (function () {
    function Shapes(width, height) {
        this.width = width;
        this.height = height;
    }
    Shapes.prototype.getWidth = function () {
        return this.width;
    };
    return Shapes;
}());

Функции в TypeScript

Функциите са набори от инструкции, изпълнявани за изпълнение на задача. В JavaСкрипт, по-голямата част от кода е написан под формата на функции и те играят основна роля. В TypeScript Имате налични класове, интерфейси, модули и пространства от имена, но функциите все още играят важна роля. Разликата между функция в JavaСценарий и TypeScript са типовете параметри и връщане, налични с a TypeScript функция.

JavaФункция на скрипта:

function add (a1, b1) {
   return a1+b1;
}

TypeScript функция:

function  add(a1 : number, b1: number) : number {
    return a1 + b1;
}

В горната функция името на функцията е add, параметрите са a1 намлява b1, и двата са от тип число, а връщаният тип също е число. Ако подадете низ на функцията, тя ще генерира грешка по време на компилиране, докато компилира към JavaСценарий.

Извикване на функцията: add

let x = add(5, 10);   // will return 15
let b = add(5);       // error TS2554: Expected 2 arguments, but got 1
let c = add(3,4,5);   // error TS2554: Expected 2 arguments, but got 3
let t = add("Harry", "John");
// error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'

Параметрите a1 намлява b1 са задължителни и ще причинят грешка, ако не бъдат предоставени. Типовете параметри и типът на връщаната стойност са еднакво важни и не могат да се променят, след като бъдат дефинирани.

Незадължителни параметри към функция

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

function getName(firstname: string, lastname?: string): string {
    return firstname + lastname;
}

let a = getName("John");              // returns Johnundefined
let b = getName("John", "Harry");     // returns JohnHarry
let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3

Моля, обърнете внимание, че незадължителните параметри трябва да бъдат дефинирани последни. Не можете първият параметър да е незадължителен, а вторият задължителен, защото компилаторът няма да знае коя стойност е предоставена.

Присвояване на стойности по подразбиране на параметрите

Можете да зададете стойности по подразбиране на параметрите, както е показано по-долу:

function getName(firstname: string, lastname = "Harry"): string {
    return firstname + lastname;
}

let a = getName("John");      // will return JohnHarry
let b = getName("John", "H"); // will return JohnH

Подобно на незадължителните параметри, инициализираните по подразбиране параметри също трябва да се съхраняват в края на списъка с параметри.

Параметри за почивка

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

Синтаксис за параметрите Rest:

function testFunc(a: string, ...arr: string[]) :string {
    return a + arr.join("");
}

Както е показано по-горе, параметърът rest е масив, започващ с три точки. Масивът ще съдържа всички останали аргументи, предадени на функцията.

Пример:

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday");
// output is MondayTuesdayWednesdayThursday

Функции на стрелките

Функцията за стрелка е една от важните функции, пуснати в ES6, и е достъпна в TypeScript също. Синтаксисът има дебела стрелка, откъдето идва и името.

Синтаксис на функцията стрелка:

var nameoffunction = (params) => {
 // code here
}

Каква е ползата от функцията със стрелки?

Нека разгледаме пример, за да разберем случая на употреба на функция със стрелка.

Пример:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(function () {
            console.log(this.score);    // gives undefined
        }, 1000);
    }
}

var a = new ScoreCard();
a.getScore();

Създали сте функция със свойство score, инициализирано на 0, и метод getScore, който вътрешно използва setTimeout и след една секунда регистрира this.score. Регистрираната стойност е недефинирана, въпреки че this.score е дефиниран и инициализиран. Проблемът е в това ключова дума. Функцията вътре в setTimeout има свой собствен this и тъй като score не е дефиниран за нея, резултатът е неопределен.

Същото може да се обработи с помощта на функция със стрелка, както е показано по-долу:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(() => {
            console.log(this.score);   // you get 0
        }, 1000);
    }
}

var a = new ScoreCard();
a.getScore();

Функцията стрелка няма своя собствена това, и вместо това споделя тази от родителския си обхват, така че променливите, декларирани отвън, са достъпни с this вътре в стрелкова функция. Те са полезни заради по-краткия синтаксис, както и за обратни извиквания, обработчици на събития и функции за синхронизиране.

TypeScript Преброявания

A TypeScript enum е обект, който съдържа колекция от свързани стойности, съхранени заедно. JavaСкриптът не поддържа изброявания (enums) нативно. Повечето езици за програмиране, като например Java, C и C++ поддържат изброявания и TypeScript ги прави достъпни също. Изброяванията се дефинират с помощта на ключовата дума enum.

Как да декларирам Enum?

Синтаксис:

enum NameofEnum {
   value1,
   value2,
    ..
}

Пример: Enum

enum Directions {
    North,
    South,
    East,
    West
}

В горния пример сте дефинирали изброяване, наречено Directions (Посоки) със стойностите North (Север), South (Юг), East (Изток) и West (Запад). Стойностите са номерирани от 0 за първия запис и се увеличават с 1 за всеки следващ запис.

Деклариране на Enum с числова стойност

По подразбиране, ако на член на изброяване не е зададена стойност, той приема число, започващо от 0. Следващият пример показва изброяване с явни числови стойности.

enum Directions {
North = 0,
South = 1,
East = 2,
West = 3
}

Можете също да зададете начална стойност и следните членове ще получат увеличени стойности. Например:

enum Directions {
North = 5,
South, // will be 6
East,  // 7
West   // 8
}

Сега Северът започва от 5, така че Югът е 6, Изтокът е 7, а Западът е 8.

Можете също така да зададете стойности по ваш избор вместо стойностите по подразбиране. Например:

enum Directions {
North = 5,
South = 4,
East = 6,
West = 8
}

Как да получите достъп до Enum?

Следният пример показва как да използвате enum във вашия код:

enum Directions {
    North,
    South,
    East,
    West
}

console.log(Directions.North);      // output is 0
console.log(Directions["North"]); // output is 0
console.log(Directions[0]);       // output is North

Съставеният JavaСкриптът е следният:

var Directions;
(function (Directions) {
    Directions[Directions["North"] = 0] = "North";
    Directions[Directions["South"] = 1] = "South";
    Directions[Directions["East"] = 2] = "East";
    Directions[Directions["West"] = 3] = "West";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

Тъй като JavaСкриптът не поддържа изброявания, компилаторът преобразува изброяването в самоизвикваща се функция, както е показано по-горе. Двойното присвояване е това, което създава обратното съпоставяне.ping от число обратно към име.

Деклариране на Enum с низова стойност

Можете да зададете низови стойности по ваш избор, както е показано в примера по-долу.

Пример:

enum Directions {
    North = "N",
    South = "S",
    East = "E",
    West = "W"
}

console.log(Directions.North);      // output is N
console.log(Directions["North"]); // output is N
console.log(Directions[0]);       // output is undefined

Съставеният JavaСкриптът е следният:

var Directions;
(function (Directions) {
    Directions["North"] = "N";
    Directions["South"] = "S";
    Directions["East"] = "E";
    Directions["West"] = "W";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

В какво се намират модулите TypeScript?

Файлове, създадени в TypeScript имат глобален достъп, което означава, че променливите, декларирани в един файл, могат да бъдат достъпни в друг файл. Този глобален характер може да причини конфликти на код и проблеми по време на изпълнение. Функционалността на модулите за експортиране и импортиране може да се използва за избягване на конфликти на глобални променливи и функции. Тази функция се появи през JavaСкрипт с версията ES6 и се поддържа и в TypeScript.

Защо имате нужда от модули TypeScript?

Следният пример показва проблема без модули.

Пример test1.ts

let age : number = 25;

Вие сте дефинирали променлива възраст от тип номер в test1.ts.

Пример test2.ts

В test2.ts имате достъп до променливата възраст дефинирано в test1.ts и също така да го модифицирате, както е показано по-долу:

age = 30; // changed from 25 to 30.
let _new_age = age;

Това може да създаде много проблеми, тъй като променливите са глобално достъпни и могат да бъдат променяни отвсякъде.

с модули, написаният код остава локален за файла и не може да бъде достъпен извън него. За да споделите нещо от файл, то трябва да бъде експортирано с помощта на ключовата дума export. Износ се използва, когато искате променлива, клас, функция или интерфейс да се използват в друг файл. внос се използва, когато искате да получите достъп до експортиран елемент. Това запазва кода непокътнат във файла и дори ако дефинирате едни и същи имена на променливи, те не се смесват.

Използване на експортиране и импортиране

Има много начини за експортиране и импортиране. Ще обсъдим най-често използвания синтаксис.

Синтаксисът за импортиране и експортиране 1:

export  nameofthevariable or class name or interface name etc

//To import the above variable or class name or interface you have to use import as shown below:

import {nameofthevariable or class name or interfacename} from "file path here without .ts"

Ето един работещ пример с използване на експорт и импорт.

test1.ts

export let age: number = 25;

Ключовата дума export се използва за споделяне на променливата age с друг файл.

test2.ts

import { age } from "./test1"
let new_age :number = age;

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

Синтаксис за импортиране и експортиране 2:

Има и друг начин за експортиране и импортиране, а синтаксисът е показан по-долу:

export = classname;

import classname = require("file path of modulename")

Когато използвате износ = За да експортирате модула си, импортирането трябва да използва require(“път до файла на модулното_име”).

Ето един работещ пример, илюстриращ този случай.

Клиент.ц

class Customer {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }
}

export = Customer;

testCustomer.ts

import Customer = require("./Customer");

let a = new Customer("Harry", 30);
alert(a.getName());

Зареждащ модул

Модулите не могат да работят самостоятелно, така че ви е необходим зареждащ модул, за да локализирате зависимостите за импортиране, както е показано на TypeScript примерите по-горе. Наличните модулни зареждащи програми са CommonJS за Nodejs и Require.js за изпълнение в браузъра.

За да компилирате код, използвайки модулния формат CommonJS, използвайте следната команда:

tsc --module commonjs testCustomer.ts

За да компилирате код, използвайки формата на модула Requirejs, използвайте следната команда:

tsc --module amd testCustomer.ts

Зависимите файлове ще бъдат конвертирани в js файлове с командата по-горе.

Пример testCustomer.ts към testCustomer.js, използвайки Requirejs

define(["require", "exports", "./Customer"], function (require, exports, Customer) {
    "use strict";
    exports.__esModule = true;
    var a = new Customer("Harry", 30);
    alert(a.getName());
});

Пример от Customer.ts към Customer.js, използвайки Requirejs

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Customer = /** @class */ (function () {
        function Customer(name, age) {
            this.name = name;
            this.age = age;
        }
        Customer.prototype.getName = function () {
            return this.name;
        };
        return Customer;
    }());
    return Customer;
});

За да го тествате с require.js, трябва да създадете файл с име main.js, който препраща към зависимостите, както е показано.

Ето структурата на папките:

src/
    Customer.js
    testCustomer.js
    main.js
    require.js  // you can get this file from github or npm install requirejs
    test.html

main.js

define(function (require) {
    var customer = require("./Customer");
    var testCustomer = require("./testCustomer");
});

test.html

<!DOCTYPE html>
<html>
<head>
    <title>TypeScript Module testing using Requirejs</title>
    <script data-main="main" src="require.js"></script>
</head>
<body>
    <h3>Testing modules using Requirejs</h3>
</body>
</html>

Пространства от имена в TypeScript

Именното пространство съдържа колекция от класове, интерфейси, променливи и функции заедно в един файл.

Синтаксис на пространството от имена

namespace name{

export class {
}

export interface {
}

export const constname;

}

Свързаният код е достъпен под едно пространство от имена.

Работен пример за пространство от имена: testnamespace.ts

namespace StudentSetup {

    export interface StudDetails {
        name: string;
        age: number;
    }

    export function addSpace(str) { // will add space to the string given
        return str.split("").join(" ");
    }

    export class Student implements StudDetails {
        name: string;
        age: number;

        constructor(studentdetails: StudDetails) {
            this.name = studentdetails.name;
            this.age = studentdetails.age;
        }

        getName(): string {
            return this.name;
        }
    }
}

Името на пространството от имена е Настройка на студентаи сте добавили интерфейс StudDetails, функция addSpace и клас, наречен Student.

Достъп до пространство от имена

Следва кодът, където използвате пространството от имена Настройка на студента.

testStudentSetup.ts

let a = new StudentSetup.Student({ name: "Harry", age: 20 });

console.log("The name is :" + StudentSetup.addSpace(a.getName()));

Класът, интерфейсът или функцията, достъпни в пространството от имена, трябва да бъдат посочени, използвайки името на пространството от имена, например StudentSetup.addSpace за достъп до функцията и StudentSetup.Student за достъп до класа.

Можете да компилирате и двата файла в един js файл, както е показано по-долу:

tsc --outFile namespace.js testnamespace.ts  testStudentSetup.ts

Проверете изхода в командния ред, като използвате командата по-долу:

node namespace.js

Изход:

The name is :H a r r y

Декларации за околната среда в TypeScript

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

Синтаксис на околната среда

За да декларирате ambient модул:

declare module moduleName {
   //code here
}

Файлът за околната среда трябва да бъде запазен като:

filename.d.ts

За да използвате файла име на файл.d.ts във вашия .ts файл трябва да го посочите като:

/// <reference path="filename.d.ts"/>

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

Трета страна JavaСкрипт файл: testString.js

var StringChecks = {
    isString: function (str) {
        return typeof str === "string";
    },

    convertToUpperCase: function (str) {
        return str.toUpperCase();
    },

    convertToLowerCase: function (str) {
        return str.toLowerCase();
    },

    convertToStringBold: function (str) {
        return str.bold();
    }
};

Имате обект, наречен StringChecks, който има функциите isString, convertToUpperCase, convertToLowerCase и convertToStringBold.

Създаване на Ambient модул в TypeScript

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

Име на файл: tstring.d.ts

declare module TestString {

    export interface StringsFunc {
        isString(str: string): boolean;
        convertToUpperCase(str: string): string;
        convertToLowerCase(str: string): string;
        convertToStringBold(str: string): string;
    }
}

declare var StringChecks: TestString.StringsFunc;

Дефинирате модул с име TestString и експортирате интерфейса StringsFunc. Всяка сигнатура посочва какво приема и връща функцията:

• isString(str: низ): булев – приема низ и връща булева стойност. Предаването на число или друг тип води до грешка по време на компилация.
• convertToUpperCase(str: string): string – приема низ и връща низ.
• convertToLowerCase(str: низ): низ – приема низ и връща низ.
• convertToStringBold(str: низ): низ – приема низ и връща низ.

Тъй като JavaСкрипт файлът показва името на обекта StringChecks, като накрая се обръщаме към същото име във файла .d.ts:

declare var StringChecks: TestString.StringsFunc;

Използване на Ambient модул в TypeScript

Ето файла test.ts, който използва ambient файла tstring.d.ts.

/// <reference path="tstring.d.ts"/>
let str1 = StringChecks.isString("Hello World");
console.log(str1);
let str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
let str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
let str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Компилирайте с tsc test.ts, за да получите test.js:

/// <reference path="tstring.d.ts"/>
var str1 = StringChecks.isString("Hello World");
console.log(str1);
var str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
var str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
var str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Сега можете да използвате test.js в HTML файл заедно с библиотечния файл testString.js.

<html>
<head>
    <title>Test TypeScript Ambient</title>
    <script src="testString.js"></script>
    <script src="test.js"></script>
</head>
<body>
</body>
</html>

Изход:

true
HELLO WORLD
hello
<b>Hello World</b>

За да продължите, сравнете двата езика директно в TypeScript vs JavaСценарий, преразгледайте JavaМетоди за масиви от скриптове за нетипизираните еквиваленти, използвани тук, и проучете цикли в JavaСценарий намлява вътрешен и външен JavaСценарий за основите на браузъра, на които се основава компилираният изход.

Въпроси и Отговори