TypeScript Урок: Какво е, Интерфейс, Enum, Масив с пример

Какво е TypeScript?

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

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

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

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

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

Отидете на официалния сайт на nodejs: https://nodejs.org/en/download/ и изтеглете и инсталирайте nodejs според вашата операционна система. Подробните инструкции как да изтеглите nodejs можете да намерите тук: https://www.guru99.com/download-install-node-js.html

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

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

D:\typeproject>node --version
V10.15.1

D:\typeproject>npm --version
6.4.1

Така че имате инсталирани nodejs v10 и npm 6.

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

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

npm init

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

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

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

npm -g install typescript

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

npm --save install typescript

Създайте папка src/ във вашата директория на проекта и в src/ folder create 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, както е показано:

node_modules/typescript/bin/tsc test.ts

Горната команда ще създаде файл test.js и ще има код, компилиран в javascript.

Пример: test.js

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

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

В този TypeScript урок, ще изпълним test.js в nodejs, както следва:

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

Конзолираната стойност се показва при изпълнението на test.js

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

Пример:

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

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

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

TypeScript поддържа всички издадени функции на Ecmascript и разработчиците могат да използват същите, докато кодират. Но не всички нови функции се поддържат в по-стари браузъри, поради което трябва да компилирате javascript в по-стара версия на 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 в това TypeScript урок като цел:

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 е подобен на javascript и потребителите, запознати с javascript, ще го намерят много лесно. Само променливи като нека намлява конст не се използват много в сравнение с 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 variable and will be accessible inside function test, it will not be available outside the function.
    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; //variable t is again redeclared inside function with value 10, so here t is local to the function and changes done to it will remain inside the function.
    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(); // the value returned will be undefined. The if-block has the variable which gets executed when I> 0. Over here the if-block is not expected but you are still having a reference to the variable t, and it returns undefined, this is because var defined variables once defined inside a function will have reference to it inside the function.  
i++; // here value of i is incremented.
test(); // since i >0 the if block is executed and value returned is 1.

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

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

Синтаксис:

let name="Roy";

Работата на нека променливата е почти същата като Var, но с малка разлика и ще разбере същото с помощта на an TypeScript пример.

Пример:

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

test(); // throws an error : Uncaught ReferenceError: t is not defined.

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

Също така, ако се случи да декларирате променлива в която и да е функция, или for-loop, while-loop, TypeScript блок за превключване, той ще бъде достъпен за вас само вътре в този блок и няма препратка към него извън блока и ще изведе грешка, ако променливата се използва извън блока. Това е основната разлика между променливите, декларирани с ключова дума var и let.

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

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

Синтаксис:

const name;

Пример:

const age = "25"; 
age="30"; // will throw an error : Uncaught TypeError: Assignment to constant variable.

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

Вписва TypeScript

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

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

  • Телефон за връзка:
  • Низ
  • Булева
  • който и да е
  • празнота

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

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

Синтаксис:

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

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

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

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

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

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

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

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 is the value does not exist in the string.
_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, 0 и 1.

Синтаксис:

let bflag :boolean = 1;
let status :boolean = true;

който и да е

Синтаксис:

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

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

празнота

Типът 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 will all numbers

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

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; //array of all types boolean, string , number , object etc.

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

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

Пример:

let years: Array<number> = [ 2016, 2017, 2018, 2019]; //array will all numbers			
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]);
}
Output:
2016
2017
2018
2019

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

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

Output:
2016
2017
2018
2019

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

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

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

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

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

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

свойство дължина

=> Ако искате да знаете броя на елементите в масив, можете да използвате свойството length.

Revдруг метод

=> Можете да обърнете реда на елементите в масив, като използвате обратен метод.

Метод на сортиране

=> Можете да сортирате елементите в масив, като използвате метода за сортиране.

Поп метод

=> Можете да премахнете последния елемент от масив, като използвате pop метод.

Shift метод

=> Можете да премахнете първия елемент от масив, като използвате метода shift.

Push метод

=> Можете да добавите стойност като последен елемент от масива.

метод concat

=> Можете да обедините два масива в един елемент от масив.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers			
console.log(years.push(2020)); 			
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. Class е нова функция, добавена от ES6 нататък, така че по-рано в JavaСкриптът на функционалността на типа клас беше изпробван с помощта на функция с прототипна функционалност за повторно използване на код. Използвайки клас, можете да имате нашия код почти близо до езици като java, c#, python и т.н., където кодът може да се използва повторно. С функцията на клас в TypeScript/JavaСкрипт, той прави езика много мощен.

Дефиниране на клас в 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, име и възраст.

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

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

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

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

Пример:

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

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

Компилиране TypeScript Клас към JavaСценарий

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

Command: tsc  Students.ts

Изходът от Javascript кодът при компилация е както е показано по-долу:

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 Javascript, класът се преобразува в самоизвикваща се функция.

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

Класовете могат да се наследяват с помощта на удължи ключова дума в 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

Имате два курса, човек и ученик. Класът 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);
    }
    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 ще всички параметри като базовите параметри в него. Това трябва да е първото нещо, което трябва да се направи вътре в конструктора. Супер ще изпълни конструктора на разширения клас.

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

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

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

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

Пример:

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, който има свойства ширина и височина, и двата имат тип като низ.

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

Пример:

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

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

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

Кодът по-горе, когато е компилиран в javascript, изглежда по следния начин:

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() като тип връщане. Върнатият тип на getDimension() трябва да съответства на свойствата и типа, споменати за Interface Dimension.

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

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"}); // will get "300px-250px"

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

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

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(), който има върната стойност като низ.

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

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

Функции в TypeScript

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

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

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

TypeScript функция:

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

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

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

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

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

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

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

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

let a = getName("John"); // will return Johnundefined.
let b = getName("John", "Harry"); // will return 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("");
}

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

Пример:

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

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

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

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

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

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

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

Пример:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Синтаксис:

enum NameofEnum {
   value1,
   value2,
    ..
}

Пример: Enum

enum Directions {
North,
South,
East,
West
}

В горния пример сте дефинирали списък, наречен Directions. Дадената стойност е север, юг, изток, запад. Стойностите се номерират от 0 за първата стойност в enum и впоследствие се увеличават с 1 за следващата стойност.

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

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

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

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

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

Сега стойността на enum North започва с 5, така че South ще получи стойност като 6, East = 7 и West = 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

Компилираният код в javascript е както следва:

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]);

Тъй като Javascript не поддържа enum, той преобразува enum в самоизвикващи се функции, както е показано по-горе.

Декларирайте 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 North

Компилираният код в javascript е както следва:

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;

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

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

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

Има много начини за износ и импорт. Така че тук ще обсъдим синтаксиса, който се използва най-често.

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

export  nameofthevariable or class name or interface name etc

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

Import {nameof thevariable or class name or interfacename} from "file path here without.ts"

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

Пример:

test1.ts

export let age: number = 25;

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

test2.ts

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

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

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

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

export = classname;

import classname = require(“file path of modulename”)

Когато използвате износ = за да експортирате вашия модул, импортирането трябва да използва require(“file path of modulename”), за да го импортирате.

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

Клиент.ц

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 ви позволява да използвате javascript файлове на трети страни, като използвате декларация на околната среда. Предимството на тази функция е, че не е нужно да пренаписвате и въпреки това да използвате всички функции на библиотеката в TypeScript.

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

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

declare module moduleName {
   //code here
}

Околният файл трябва да бъде запазен като:

filename.d.ts

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

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

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

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

Пример: 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 и converToStringBold.

Създаване на Ambient Module в TypeScript

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

Име на файл: 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: низ): булев

=> Това ще приеме param като низ и върнатият тип ще бъде булев. Когато използвате във вашия .ts файл, в случай че случайно подадете параметъра като число или нещо различно от низ, това ще ви даде грешка при компилиране.

convertToUpperCase(str:string): низ

=> Това ще приеме аргумент като низ и ще върне низ. Същото важи и за convertToLowerCase(str: низ)
: низ; и convertToStringBold(str: низ): низ
;

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

declare var StringChecks: TestString.StringsFunc;

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

Сега тук е файлът test.ts, където ще се използва околният файл tstring.d.ts

Пример: test.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);

Компилирам TypeScript 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="testStrings.js"></script>			
    <script src="test.js"></script>			
</head>			
<body>			
</body>			
</html>

Това е изходът, който се вижда в конзолата:

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

TypeScript История

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

  • След две години вътрешно развитие на Microsoft. TypeScript 0.9, издаден през 2013 г
  • Допълнителна поддръжка за генерични продукти TypeScript 1.0 беше пуснат на Build 2014
  • През юли 2014 г. нов TypeScript дойде компилатор, който е пет пъти по-бърз от предишната версия.
  • През юли 2015 г. поддръжка за ES6 модули, ключова дума за пространство от имена, за, на поддръжка, декоратори.
  • През ноември 2016 г. добавена функция като типове ключове и справки на съпоставени типове и останалите.
  • На 27 март 2018 г. условни типове, подобреният ключ с поддръжка на типове пресичане, добавен в TypeScript.

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

Тук са важни плюсове/ползи от използването TypeScript

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

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

Ето някои от най-често срещаните приложения на TypeScript:

  • Ъгловият екип използва TypeScript.
  • Инсталиране на NodeJS и NPM
  • TypeScript Инсталация
  • Компилирам TypeScript код към Javascript
  • Изпълнете код с помощта на Nodejs
  • Изпълнение Javascript в браузъра
  • Компилирам TypeScript код към Javascript използвайки версия на EcmaScript
  • Можете лесно да компилирате код, написан в TypeScript да се JavaСкрипт, използващ NodeJS.
  • Така че да работите с TypeScript първо трябва да изтеглите и инсталирате NodeJS.

Oбобщение

  • TypeScript е надмножество на JavaСценарий. TypeScript е чист обектно-ориентиран език за програмиране, който поддържа класове, интерфейси и т.н.
  • TypeScript поддържа всички издадени функции на Ecmascript и разработчиците могат да използват същите, докато кодират.
  • Променливите се използват за съхраняване на стойности и стойността може да бъде низ, число, булево или израз.
  • In TypeScript, типът на променливата е дефиниран само в началото и по време на изпълнението, тя трябва да поддържа същия тип, всички промени в нея ще доведат до грешка по време на компилиране по време на компилация в javascript.
  • Масив в TypeScript е тип данни, в който можете да съхранявате множество стойности.
  • Class е нова функция, добавена от ES6 нататък, така че по-рано в JavaСкриптът на функционалността на типа клас беше изпробван с помощта на функция с прототипна функционалност за повторно използване на код.
  • TypeScript поддържа публични, частни и защитени модификатори за достъп до вашите методи и свойства.
  • Една от основните характеристики на TypeScript е интерфейси. Интерфейсът е набор от дефинирани правила, които трябва да бъдат приложени от субекта, който го използва.
  • Функциите са набор от инструкции, изпълнявани за изпълнение на задача.
  • TypeScript Enum е обект, който има колекция от свързани стойности, съхранявани заедно.