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

Що таке TypeScript?

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

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

Зв'язок є одностороннім. Кожен дійсний JavaФайл скрипта вже дійсний TypeScript, але зворотне не вірно, оскільки анотації типів існують лише в TypeScript і стираються під час компіляції.

Навіщо використовувати TypeScript?

Ось важливі переваги використання TypeScript:

• Великі та складні проекти в JavaСценарій важко кодувати та підтримувати.
• TypeScript дуже допомагає з організацією коду та усуває більшість помилок під час компіляції, а не під час виконання.
• TypeScript підтримує JS-бібліотеки та документацію API.
• Це мова сценаріїв з необов'язковою типізацією, тому типи можна впроваджувати поступово.
• TypeScript код можна перетворити на звичайний JavaКод скрипта для будь-якої цільової області браузера.
• Це забезпечує краще структурування коду та методи об'єктно-орієнтованого програмування.
• Це забезпечує кращу підтримку інструментів для скорочення часу розробки, включаючи автозаповнення та безпечний рефакторинг.
• Це може розширити мову за межі стандарту, за допомогою таких функцій, як декоратори.

Найбільшим практичним вигодою є підтримка редактора. Оскільки компілятор знає форму кожного значення, редактор може перейменувати властивість у всьому проєкті та повідомити про кожне місце, яке більше не відповідає дійсності.

TypeScript Історія

Давайте розглянемо важливі пам'ятки з історії TypeScript:

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

Хто використовує TypeScript?

TypeScript більше не є нішевим вибором. Він лежить в основі кількох найпоширеніших фронтенд- та бекенд-інструментів, і список нижче показує, де новачок найімовірніше зустріне його.

• Кутова: Фреймворк Angular написаний на TypeScript, і очікується, що код програми також буде написаний на ньому.
• Проєкти React та Vue: Обидві екосистеми постачають офіційні TypeScript шаблони, і більшість сучасних початківців увімкнули це за замовчуванням.
• Бекенди Node.js: Серверні фреймворки, такі як NestJS, побудовані навколо TypeScript класи та декоратори.
• Інструменти редактора: Visual Studio Code сама по собі є великою TypeScript кодова база, саме тому його мовна підтримка настільки повна.
• Великі корпоративні фронтенди: Команди, що працюють з багатьма учасниками, використовують його для виявлення помилок інтеграції перед розгортанням.

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

Ось крок за кроком процес завантаження та встановлення TypeScript:

Крок 1) Завантажте та встановіть Nodejs

Перейдіть на офіційний сайт Nodejs, https://nodejs.org/en/download/, а також завантажте та встановіть Nodejs для вашої операційної системи. Докладні інструкції доступні в посібнику з як завантажити та встановити Node.js.

Крок 2) Перевірте версію Nodejs і npm

Щоб перевірити, чи встановлено Nodejs та npm, перевірте версію у командному рядку.

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

D:\typeproject>npm --version
10.9.2

Будь-який поточний реліз Node LTS працює. TypeScript сама по собі вимагає лише підтримуваної версії Node для запуску компілятора.

Крок 3) TypeScript Встановлення

Створіть каталог вашого проєкту типу project\ та запустіть npm init, як показано в команді нижче:

npm init

Крок 4) Почніть установку

Це створює package.json, який зберігатиме залежності для нашого проєкту.

Після завершення встановіть TypeScript наступним чином:

npm -g install typescript

Наведена вище команда подбає про встановлення TypeScript. Додавання «-g» до npm install встановить TypeScript глобально. Перевага використання -g полягає в тому, що ви зможете використовувати TypeScript TSC команду з будь-якого каталогу, оскільки вона встановлюється глобально. Якщо ви не хочете встановлювати TypeScript глобально, використовуйте команду нижче:

npm install --save-dev typescript

Створіть папку src\ у каталозі вашого проекту, а всередині src\ створіть TypeScript файл test.ts і напишіть свій код.

Приклад: test.ts

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

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

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

Для компіляції наведеного вище коду скористайтеся наступною командою.

If TypeScript встановлено глобально, скористайтеся командою нижче:

tsc test.ts

If TypeScript встановлено локально у вашому проекті, вам потрібно використовувати шлях TypeScript з node_modules, як показано, або запустіть це через npx:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

Наведена вище команда створить файл test.js, код якого буде скомпільовано для JavaСценарій.

Приклад: test.js

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

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

Тепер ми виконаємо test.js у Nodejs наступним чином:

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

Значення, передане до console.log, відображається під час запуску test.js.

Виконати JavaСценарій у браузері

приклад:

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

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

TypeScript підтримує всі випущені функції ECMAScript, і розробники можуть використовувати їх під час кодування. Але не всі нові функції підтримуються в старіших браузерах, тому вам може знадобитися компілювати код у старішу версію ECMAScript. TypeScript надає параметри компілятора, які роблять саме це.

Приклад: test.ts

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

addnumbers(10, 20);

Щоб скомпілювати до обраної вами версії ES, ви можете використати параметр target або t у своїй команді таким чином:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

За замовчуванням цільовою платформою для класичного компілятора є ES3. Якщо ви хочете змінити це, ви можете скористатися командою вище.

Наразі ми використовуватимемо ES6 як ціль:

tsc --target ES6  test.ts

test.ts до test.js

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

addnumbers(10, 20);

Код залишається таким, як є, оскільки функція стрілки, яку ви використовували, є функцією ES6 і не змінюється після компіляції в ES6.

За замовчуванням цільовою платформою є ES3, тому без цілі ви отримаєте test.js таким чином:

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

Отже, тут жирна стрілка змінюється на звичайну анонімну функцію.

Змінні в TypeScript

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

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

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

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

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

Робота зі змінними в TypeScript аналогічно JavaСкрипт та користувачі, знайомі з JavaСкрипт знайде це дуже легко. У сучасному коді, дозволяти та сопзЬ перевага надається над було, оскільки їхня блочна область видимості запобігає цілому класу помилок.

Оголошення змінних за допомогою 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 and accessible only inside function test
    return k++;
}

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

Приклад 2:

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

Приклад 3:

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

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

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

Команда TypeScript синтаксис для let наведено нижче:

Синтаксис:

let name = "Roy";

Робота дозволяти змінна майже така ж, як було, але з однією важливою відмінністю, яку демонструє приклад нижче.

приклад:

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

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

Вище TypeScript приклад видає помилку, але той самий код працював би з було ключове слово. Змінні, оголошені за допомогою дозволяти доступні лише в блоці, в якому вони оголошені. У цьому прикладі t існує лише в блоці if, а не у всій функції.

Те саме стосується будь-якої функції, циклу for, циклу while або блоку switch. Змінна let доступна лише всередині цього блоку, а посилання на неї зовні призводить до помилки. Це основна відмінність між var та let.

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

Const означає константні змінні. Вони схожі на змінні let, з тією різницею, що після присвоєння значення його не можна змінити. Тому оголошення const має бути ініціалізовано в тому ж рядку.

Синтаксис:

const name = "Roy";

приклад:

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

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

Тож використовуйте const щоразу, коли ви знаєте, що призначене значення не буде перепризначено. Зверніть увагу, що const запобігає перепризначенню зв'язування, а не модифікації об'єкта, на який воно вказує.

Типи в TypeScript

TypeScript є строго типізованою мовою, тоді як JavaСкрипт — ні. Змінну, значення якої визначено як рядок, можна без проблем змінити на число в JavaСценарій. Те саме не допускається в TypeScript, в TypeScript, тип змінної визначається на початку, і протягом виконання вона повинна зберігати цей тип. Будь-яка зміна призводить до помилки під час компіляції до JavaСценарій.

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

Номер

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

Синтаксис:

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

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

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

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

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

toPrecision() – цей метод відформатує число до заданої довжини.

Приклад: з усіма числовими методами

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

рядок

Рядок: лише рядкові значення.

Синтаксис:

let str :string = "hello world";

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

• розкол() – цей метод розділить рядок на масив.
• charAt() – цей метод поверне символ за заданим індексом.
• 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 if the value does not exist
_str.replace("Type", "Coffee"); // "Coffeescript"
_str.trim();                    // "Typescript"
_str.substr(4, _str.length);   // "script"
_str.substring(4, 10);         // "script"
_str.toUpperCase();             // "TYPESCRIPT"
_str.toLowerCase();             // "typescript"

Boolean

Логічне значення приймає лише логічні значення true та false. На відміну від звичайного значення JavaУ скрипті числа 0 та 1 не приймаються, оскільки вони мають тип number.

Синтаксис:

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

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

будь-який

Синтаксис:

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

Змінні, оголошені за допомогою будь-який тип може містити рядок, число, масив, логічне значення або значення void. TypeScript не викличе жодної помилки під час компіляції, що подібно до змінних у JavaСкрипт. Використовуйте тип any лише тоді, коли ви не впевнені щодо типу значення, яке буде пов'язане з цією змінною, оскільки він вимикає кожну перевірку цього значення.

Void

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

Синтаксис:

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

TypeScript масив

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

З TypeScript це строго типізована мова, тому потрібно вказати тип даних значень у масиві. В іншому випадку він буде трактуватися як тип any.

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

Синтаксис:

let nameofthearray : Array<typehere>

Приклад

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

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

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

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

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

Щоб отримати елементи з масиву, значення починаються з індексу 0 і до довжини масиву мінус один.

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

Ви також можете отримати елементи з масиву за допомогою TypeScript та цінності петля, як показано нижче.

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

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

вихід:

2016
2017
2018
2019

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

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

вихід:

2016
2017
2018
2019

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

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

вихід:

2016
2017
2018
2019

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

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

вихід:

2016
2017
2018
2019

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

Команда TypeScript Об'єкт Array має багато властивостей та методів, які допомагають розробникам легко та ефективно обробляти масиви. Ви можете отримати значення властивості, вказавши arrayname.property, а результат методу — вказавши arrayname.method().

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Клас в TypeScript

TypeScript є надмножиною JavaСценарій, тож усе, що можливо в JavaСценарій також можливий в TypeScriptКлас – це функція, додана починаючи з ES6. Раніше в JavaСкриптова, класоподібна функціональність була досягнута за допомогою функції з прототипами методів для повторного використання коду. За допомогою класу ваш код може наблизитися до таких мов, як Java, C# і Python, де код легко використовувати повторно.

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

Ось базовий синтаксис класу в TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class
}

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

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

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

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

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

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

У наведеному вище прикладі у вас є клас під назвою Students. Він має властивості age, name та roll_no.

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

Клас Students, визначений вище, має конструктор, як показано нижче:

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

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

constructor () {}

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

У класі Students визначено методи, наприклад, getRollNo(), getName() та getAge(), які повертають значення властивостей roll_no, name та age.

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

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

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

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

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

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

Складання TypeScript Клас до JavaScript

Ви можете використовувати команду tsc, як показано нижче, для компіляції в JavaСценарій.

Command: tsc  Students.ts

Вихід JavaКод скрипта під час компіляції показаний нижче:

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

In JavaСкрипт, клас перетворюється на функцію, що викликається самостійно.

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

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

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

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

клас В зможе поділитися клас А методи і властивості.

Ось робочий приклад класу, що використовує успадкування:

class Person {
    name: string;
    age: number;

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

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

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

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

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

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

У вас є два класи, Person та Student. Student розширює Person, і об'єкт, створений на його основі, може отримати доступ до власних методів та властивостей, а також до методів та властивостей класу, який він розширює.

Тепер давайте додамо деякі зміни до класу вище.

приклад:

class Person {
    name: string;
    age: number;

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

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

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

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

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

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

Зміна порівняно з попереднім прикладом полягає в конструкторі, визначеному в класі Student. Конструктор приймає ті ж параметри, що й базовий клас, плюс будь-які додаткові власні параметри.

In TypeScript Вам потрібно викликати super з усіма параметрами базового класу. Це має бути перший оператор всередині конструктора, оскільки super виконує конструктор розширеного класу. Будь-яка властивість, оголошена похідним класом, така як tmars, має бути явно призначена, інакше getMarks поверне undefined.

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

TypeScript підтримує модифікатори доступу public, private та protected для ваших методів та властивостей. За замовчуванням, якщо модифікатор доступу не вказано, метод або властивість вважається публічною та легкодоступною з об'єкта класу.

У випадку модифікаторів приватного доступу, члени недоступні з об'єкта класу та призначені для використання лише всередині класу. Вони недоступні для успадкованого класу.

У випадку захищених модифікаторів доступу, члени призначені для використання всередині класу та успадкованого класу, і недоступні з об'єкта класу.

приклад:

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

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

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

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

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

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

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

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

Інтерфейс в TypeScript

Однією з основних особливостей TypeScript це інтерфейси. Інтерфейс — це набір правил, які має реалізувати сутність, що його використовує. Сутність може бути класом, функцією або змінною. Інтерфейс може складатися з властивостей та методів. Ви можете позначити властивість або метод як необов'язковий за допомогою синтаксису «?». Інтерфейс додає сувору перевірку типів для будь-якої функції, змінної або класу, що його реалізує.

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

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

Ви визначили інтерфейс з назвою Dimension, який має властивості width та height, обидві типу string.

Тепер цей інтерфейс може бути реалізований змінною, функцією або класом. Ось приклад змінної, що реалізує інтерфейс Dimension.

приклад:

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

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

Сигнатура інтерфейсу Dimension має ширину та висоту, і обидва є обов'язковими. Якщо будь-яка властивість пропущена або тип змінено, це призведе до помилки під час компіляції коду. JavaСценарій.

Наведений вище код, після компіляції до JavaСкрипт виглядає наступним чином:

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

Давайте тепер подивимося, як використовувати інтерфейс із функцією.

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

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

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

У наведеному вище прикладі інтерфейс Dimension використовується як тип повернення функції getDimension(). Повернене значення має відповідати властивостям та типам, оголошеним в інтерфейсі.

Складений JavaКод скрипта буде таким:

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

Під час компіляції, якщо тип повернення не відповідає інтерфейсу, це призведе до помилки.

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

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

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

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

У наведеному вище прикладі ви використали інтерфейс Dimension як параметр функції getDimension(). Під час виклику функції переданий їй параметр має відповідати правилам, визначеним інтерфейсом.

Складений JavaКод скрипта буде таким:

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

Клас, що реалізує інтерфейс

Щоб скористатися інтерфейсом з класом, потрібно використати ключове слово 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(), який повертає рядок.

Складений JavaКод скрипта буде таким:

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

Функції в TypeScript

Функції – це набори інструкцій, що виконуються для виконання завдання. У JavaУ скриптах більшість коду написана у вигляді функцій, і вони відіграють важливу роль. TypeScript у вас є класи, інтерфейси, модулі та простори імен, але функції все ще відіграють важливу роль. Різниця між функцією в JavaСценарій і TypeScript це типи параметрів та повернених значень, доступні з TypeScript функції.

JavaФункція сценарію:

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

TypeScript функція:

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

У наведеній вище функції назва функції — додавання, параметри — a1 та b1, обидва типу number, а тип повернення також є числом. Якщо передати рядок функції, вона викличе помилку під час компіляції до JavaСценарій.

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

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

Параметри a1 та b1 обов'язкові та спричинять помилку, якщо їх не вказати. Типи параметрів та тип повернення однаково важливі та не можуть бути змінені після визначення.

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

In JavaУ скрипті всі параметри функцій є необов'язковими та вважаються невизначеними, якщо їх не передати. Те саме не стосується TypeScriptПісля визначення параметрів їх необхідно вказати. Якщо ви хочете, щоб параметр був необов'язковим, додайте знак питання після назви параметра, як показано нижче:

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

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

Зверніть увагу, що додаткові параметри мають бути визначені останніми. Перший параметр не може бути необов'язковим, а другий обов'язковим, оскільки компілятор не знатиме, яке значення було надано.

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

Ви можете призначити значення за замовчуванням параметрам, як показано нижче:

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

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

Подібно до необов'язкових параметрів, ініціалізовані за замовчуванням параметри також повинні бути збережені в кінці списку параметрів.

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

Ви бачили як TypeScript обробляє обов'язкові параметри, додаткові параметри та параметри зі значеннями за замовчуванням. Тепер ми розглянемо параметри, що залишилися. Параметри, що залишилися, – це група додаткових параметрів, визначених разом за допомогою трьох точки (…) а потім ім'я параметра, який є масивом.

Синтаксис для параметрів Rest:

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

Як показано вище, параметр rest – це масив, що починається з трьох крапок. Масив міститиме всі решту аргументів, переданих функції.

приклад:

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

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

Функція стрілки є однією з важливих функцій, випущених у ES6, і вона доступна в TypeScript теж. У синтаксисі є жирна стрілка, звідки й походить назва.

Синтаксис функції стрілки:

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

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

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

приклад:

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

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

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

Ви створили функцію з властивістю score, ініціалізованою рівнем 0, та метод getScore, який внутрішньо використовує setTimeout та через одну секунду записує this.score. Зареєстроване значення не визначено, хоча this.score визначено та ініціалізовано. Проблема полягає в це ключове слово. Функція всередині setTimeout має власне this, і оскільки score для неї не визначено, результат буде невизначеним.

Те саме можна зробити за допомогою стрілкової функції, як показано нижче:

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

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

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

Функція стрілки не має власної це, а натомість використовує ту, що знаходиться в батьківській області видимості, тому змінні, оголошені зовні, доступні за допомогою this всередині стрілкової функції. Вони корисні через коротший синтаксис, а також для зворотних викликів, обробників подій та функцій синхронізації.

TypeScript Переліки

A TypeScript enum — це об'єкт, який містить колекцію пов'язаних значень, що зберігаються разом. JavaСкрипт не підтримує перелічення за власним призначенням. Більшість мов програмування, такі як Java, C і C++ підтримка перерахувань, та TypeScript робить їх також доступними. Переліки визначаються за допомогою ключового слова enum.

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

Синтаксис:

enum NameofEnum {
   value1,
   value2,
    ..
}

Приклад: Enum

enum Directions {
    North,
    South,
    East,
    West
}

У наведеному вище прикладі ви визначили перерахування під назвою Directions зі значеннями North, South, East та West. Значення нумеруються від 0 для першого запису та збільшуються на 1 для кожного наступного запису.

Оголосити перелік з числовим значенням

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

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

Ви також можете призначити початкове значення, і наступні учасники отримають збільшені значення. Наприклад:

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

Тепер Північ починається з 5, тому Південь — це 6, Схід — 7, а Захід — 8.

Ви також можете призначити значення на власний вибір замість значень за замовчуванням. Наприклад:

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

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

У наступному прикладі показано, як використовувати перерахування у вашому коді:

enum Directions {
    North,
    South,
    East,
    West
}

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

Складений JavaСценарій такий:

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

З JavaСкрипт не підтримує перелічення, компілятор перетворює перелічення на функцію, що викликається самостійно, як показано вище. Подвійне присвоєння створює зворотну мапу.ping від числа назад до імені.

Оголосити перелік з рядковим значенням

Ви можете призначити рядкові значення на ваш вибір, як показано в прикладі нижче.

приклад:

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

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

Складений JavaСценарій такий:

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

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

Файли, створені в TypeScript мають глобальний доступ, що означає, що до змінних, оголошених в одному файлі, можна отримати доступ з іншого файлу. Така глобальна природа може спричинити конфлікти коду та проблеми під час виконання. Функціональність модулів експорту та імпорту можна використовувати для уникнення конфліктів глобальних змінних та функцій. Ця функція з'явилася в JavaСкрипт з релізом ES6, а також підтримується в TypeScript.

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

Наступний приклад показує проблему без модулів.

Приклад test1.ts

let age : number = 25;

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

Приклад test2.ts

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

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

Це може створити багато проблем, оскільки змінні доступні глобально та можуть бути змінені з будь-якого місця.

З Модулі, написаний код залишається локальним для файлу та недоступним за його межами. Щоб поділитися будь-чим із файлу, його потрібно експортувати за допомогою ключового слова export. Експорт використовується, коли потрібно використовувати змінну, клас, функцію або інтерфейс в іншому файлі. Імпортувати використовується, коли потрібно отримати доступ до експортованого елемента. Це зберігає код у файлі, і навіть якщо ви визначите однакові імена змінних, вони не переплутаються.

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

Існує багато способів експорту та імпорту. Ми обговоримо синтаксис, який використовується найчастіше.

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

export  nameofthevariable or class name or interface name etc

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

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

Ось робочий приклад використання експорту та імпорту.

test1.ts

export let age: number = 25;

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

test2.ts

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

Ключове слово import використовується для доступу до вік змінна, і вам потрібно вказати розташування файлу, як показано вище.

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

Існує ще один спосіб експорту та імпорту, синтаксис якого наведено нижче:

export = classname;

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

Коли ви користуєтесь експорт = Щоб експортувати ваш модуль, імпорт має використовувати require(“шлях до файлу 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 дозволяє використовувати сторонні JavaФайли скриптів, що використовують амбієнтні оголошення. Перевага цієї функції полягає в тому, що вам не потрібно переписувати бібліотеку, і водночас ви можете використовувати всі її можливості з перевіркою типів. TypeScript.

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

Щоб оголосити модуль ambient:

declare module moduleName {
   //code here
}

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

filename.d.ts

Для використання файлу ім'я файлу.d.ts у вашому файлі .ts вам потрібно посилатися на нього так:

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

Оголошення типу середовища в TypeScript звертається до сторонньої бібліотеки та повторно оголошує необхідні функції з їхніми власними типами. Наприклад, розглянемо невеликий JavaБібліотека скриптів показана нижче.

Третя сторона JavaФайл сценарію: testString.js

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

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

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

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

У вас є об'єкт під назвою StringChecks, який має функції isString, convertToUpperCase, convertToLowerCase та convertToStringBold.

Створення модуля Ambient у TypeScript

Тепер ми створимо модуль ambient, який посилається на JavaСкрипт виконує вищезгадані функції та додає перевірки типів за потреби.

Ім'я файлу: tstring.d.ts

declare module TestString {

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

declare var StringChecks: TestString.StringsFunc;

Ви визначаєте модуль з назвою TestString та експортуєте інтерфейс StringsFunc. Кожна сигнатура вказує, що приймає та повертає функція:

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

З JavaФайл скрипта надає об'єкт з назвою StringChecks, і ми нарешті звертаємося до цієї ж назви у файлі .d.ts:

declare var StringChecks: TestString.StringsFunc;

Використання модуля Ambient у TypeScript

Ось файл test.ts, який використовує файл оточення tstring.d.ts.

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

Скомпілюйте за допомогою tsc test.ts для створення test.js:

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

Тепер ви можете використовувати test.js у HTML-файлі разом із файлом бібліотеки testString.js.

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

вихід:

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

Щоб продовжити, порівняйте дві мови безпосередньо в TypeScript vs JavaScript, переглянути JavaМетоди масивів скриптів для нетипізованих еквівалентів, що використовуються тут, та вивчення петлі в JavaScript та внутрішні та зовнішні JavaScript для основ браузера, на яких базується скомпільований вивід.

Поширені запитання