TypeScript Підручник: що таке, інтерфейс, перелік, масив із прикладом

Що таке TypeScript?

TypeScript є надмножиною JavaСценарій. TypeScript це чиста об’єктно-орієнтована мова програмування, яка підтримує класи, інтерфейси тощо. Це мова з відкритим кодом, розроблена Microsoft який статично компілює код до JavaСценарій. Його можна легко запустити в браузері або Nodejs.

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

Як завантажити та встановити 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/ 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>

Компіляція 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, вони схожі на JavaScript. Отже, давайте навчимося оголошувати та присвоювати значення змінним у TypeScript.

Змінні не можна використовувати в коді без визначення. Щоб оголосити змінну, ви можете використовувати

було ключове слово,

дозволяти ключове слово

сопзЬ ключове слово

Робота зі змінними в TypeScript схожий на javascript, і користувачі, знайомі з javascript, знайдуть його дуже легко. Тільки змінні, як дозволяти та сопзЬ мало використовуються в порівнянні з було.

Оголошення змінних за допомогою var

Синтаксис:

var firstname = "Roy";

Давайте розглянемо кілька TypeScript приклади для розуміння роботи ключового слова var, а також області змінних, оголошених за допомогою було keyword.

Приклад 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";

Робочі дозволяти змінна майже така ж, як було, але з невеликою різницею і буде розуміти те саме за допомогою 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 приклад викликає помилку, але те саме спрацювало б добре, якби це було з було ключове слово. Використання змінних дозволяти доступні в межах оголошеної області блоку, наприклад, змінна t доступна лише всередині блоку if, а не для всієї функції.

Крім того, якщо ви оголосите змінну всередині будь-якої функції або циклу for, 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.

Нижче наведено типи:

Номер
рядок
Boolean
будь-який
Void

Номер

Приймає лише цілі числа, числа з плаваючою точкою, дроби тощо.

Синтаксис:

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

Ось кілька важливих методів, які можна використовувати для типів Number:

toFixed() – він перетворить число на рядок і збереже десяткові знаки, надані методу.

toString () – цей метод перетворить число в рядок.

valueOf () – цей метод поверне первісне значення числа.

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";

Ось кілька важливих методів, які можна використовувати для типів String:

розкол() – цей метод розбиває рядок на масив.
charAt() – цей метод дасть перший символ для заданого індексу.
indexOf() – цей метод надасть позицію першого входження для наданого йому значення.
заміщати () – цей метод приймає 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"

Boolean

Прийме такі логічні значення, як істина, хибність, 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

Тип Void здебільшого використовується як тип повернення для функції, яка не має нічого для повернення.

Синтаксис:

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

TypeScript масив

An масив in TypeScript це тип даних, у якому можна зберігати кілька значень. Давайте навчимося оголошувати та призначати значення для операцій Array у 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 Об’єкт масиву має багато властивостей і методів, які допомагають розробникам легко й ефективно працювати з масивами. Ви можете отримати значення властивості, вказавши arrayname.property, а вихід методу, вказавши arrayname.method().

майно довжини

=> Якщо ви хочете знати кількість елементів у масиві, ви можете скористатися властивістю length.

Revінший метод

=> Ви можете змінити порядок елементів у масиві за допомогою зворотного методу.

Метод сортування

=> Ви можете сортувати елементи в масиві за допомогою методу сортування.

Поп-метод

=> Ви можете видалити останній елемент масиву за допомогою методу pop.

Shift метод

=> Ви можете видалити перший елемент масиву за допомогою методу shift.

Метод Push

=> Ви можете додати значення як останній елемент масиву.

метод concat

=> Ви можете об'єднати два масиви в один елемент масиву.

Приклад властивості length

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Сценарій функціональності типу класу було спробовано за допомогою функції з функцією прототипу для повторного використання коду. Використовуючи class, ви можете мати наш код майже наближений до таких мов, як 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, 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 Клас до JavaScript

Для компіляції можна використовувати команду 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, щоб усі параметри як базові параметри в ньому. Це має бути перше, що потрібно зробити всередині конструктора. 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, який має властивості width і height, і обидва мають тип як рядок.

Тепер цей інтерфейс можна реалізувати за допомогою змінної, функції або класу. Ось приклад змінної, що реалізує інтерфейс 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" });

Інтерфейс реалізації класу

Щоб використовувати інтерфейс із класом, вам потрібно використовувати ключове слово implements.

Синтаксис для класу, що реалізує інтерфейс:

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("");
}

Як показано вище, решта параметрів визначено за допомогою (…назва-параметра); параметр rest — це масив із трьома крапками. Масив матиме всі передані параметри. Ви можете викликати функцію, як показано в прикладі нижче:

приклад:

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 не підтримує переліки. Більшість із мова програмування як Java, C, C++ опори TypeScript Enum і він також доступний з TypeScript теж. Enum визначаються за допомогою ключового слова enum.

Як оголосити Enum?

Синтаксис:

enum NameofEnum {
   value1,
   value2,
    ..
}

Приклад: Enum

enum Directions {
North,
South,
East,
West
}

У наведеному вище прикладі ви визначили перелік під назвою Directions. Дані значення: Північ, Південь, Схід, Захід. Значення нумеруються від 0 для першого значення в переліку та згодом збільшуються на 1 для наступного значення.

Оголошення Enum із числовим значенням

За замовчуванням, якщо enum не має жодного значення, воно вважається числом, починаючи з 0. У наступному прикладі показано enum із числовим значенням.

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

Зібраний код для 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;

Ви визначили змінну age типу number у test1.ts.

Приклад test2.ts

У файлі test2.ts ви можете легко отримати доступ до змінної вік визначений у test1.ts, а також змініть його, як показано нижче:

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

Отже, наведений вище випадок може створити багато проблем, оскільки змінні доступні глобально та їх можна змінювати.

З Модулі, написаний код залишається локалізованим у файлі, і до нього неможливо отримати доступ поза ним. Щоб отримати доступ до будь-чого з файлу, його потрібно експортувати за допомогою ключового слова export. 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;

Ключове слово Export використовується для спільного використання вікової змінної в іншому файлі.

test2.ts

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

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

Синтаксис для імпорту та експорту 2:

Існує ще один спосіб експорту й імпорту, а синтаксис для них такий, як показано нижче:

export = classname;

import classname = 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;
        }
    }
}

Ім'я простору імен є StudentSetup, ви додали інтерфейс StudDetails, функцію addSpace і клас під назвою Student.

Доступ до простору імен

Нижче наведено код, у якому ви використовуєте простір імен StudentSetup.

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 в 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: рядок): логічне значення

=> Параметр прийматиметься як рядок, а тип повернення буде логічним. Під час використання у вашому файлі .ts у випадку, якщо ви передаєте param як число або будь-що інше, ніж рядок, це дасть вам помилку типу компіляції.

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, ключове слово простору імен, for, of support, decorators.
У листопаді 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.

Підсумки

TypeScript є надмножиною JavaСценарій. TypeScript це чиста об'єктно-орієнтована мова програмування, яка підтримує класи, інтерфейси тощо.
TypeScript підтримує всі випущені функції Ecmascript, і розробники можуть використовувати їх під час кодування.
Змінні використовуються для зберігання значень, і значення може бути рядком, числом, логічним значенням або виразом.
In TypeScript, тип змінної визначається лише на початку та під час виконання, вона має підтримувати той самий тип, будь-які зміни в ній призведуть до помилки під час компіляції під час компіляції до javascript.
Масив в TypeScript це тип даних, у якому можна зберігати кілька значень.
Class — це нова функція, додана з ES6 і далі, тому раніше в JavaСценарій функціональності типу класу було спробовано за допомогою функції з функцією прототипу для повторного використання коду.
TypeScript підтримує публічні, приватні та захищені модифікатори доступу до ваших методів і властивостей.
Однією з основних особливостей TypeScript це інтерфейси. Інтерфейс — це набір визначених правил, які повинні бути реалізовані об’єктом, який його використовує.
Функції — це набір інструкцій, які виконуються для виконання завдання.
TypeScript Enum — це об’єкт, який містить колекцію пов’язаних значень, що зберігаються разом.

Що таке TypeScript?

Як завантажити та встановити TypeScript

Компіляція TypeScript код до Javascript

Виконати Javascript за допомогою Nodejs

Компіляція TypeScript код до Javascript з використанням версії EcmaScript

СТАТТІ ПО ТЕМІ

Змінні в TypeScript

Оголошення змінних за допомогою var

Оголошення змінних за допомогою let

Оголошення змінних за допомогою const

Типи в TypeScript

Номер

рядок

Boolean

будь-який

Void

TypeScript масив

Оголошення та ініціалізація масиву

Різні способи доступу до елементів масиву

використання TypeScript для петлі

Використання циклу for-in

Використання циклу for-of

Використання циклу foreach

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

майно довжини

Revінший метод

Метод сортування

Поп-метод

Shift метод

Метод Push

метод concat

Приклад властивості length

Приклад зворотного способу

Приклад методу сортування

Приклад поп-методу

Приклад для методу зміни

Приклад методу push

Приклад методу concat

Клас в TypeScript

Визначення класу в TypeScript

Приклад: робочий приклад на Class

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

Методи всередині a TypeScript Клас

Створення екземпляра класу в TypeScript

Компіляція TypeScript Клас до JavaScript

Спадкування класів

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

Модифікатори доступу в TypeScript

Інтерфейс в TypeScript

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

Використання інтерфейсу у функції як тип повернення

Інтерфейс як параметр функції

Інтерфейс реалізації класу

Функції в TypeScript

Здійснення виклику функції: add

Необов'язкові параметри функції

Призначте параметрам значення за замовчуванням

Параметри відпочинку

Функції стрілок

Яка користь від функції стрілки?

TypeScript Переліки

Як оголосити Enum?

Оголошення Enum із числовим значенням

Як отримати доступ до Enum?

Оголошення Enum із значенням рядка

Що таке модулі TypeScript?

Навіщо потрібні модулі TypeScript?

Використання експорту та імпорту

Синтаксис імпорту та експорту 1:

Синтаксис для імпорту та експорту 2:

Завантажувач модулів

Приклад testCustomer.ts до testCustomer.js за допомогою Requirejs

Приклад Customer.ts до Customer.js за допомогою Requirejs

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

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

Доступ до простору імен

Декларації навколишнього середовища в TypeScript

Навколишній синтаксис

Щоб оголосити модуль середовища:

Файл середовища потрібно зберегти як: