Въведение в TypeScript - какво е TypeScript и как се използва.

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

Какво е TypeScript?

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

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

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

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

Как се използва TypeScript?

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

Ето пример на код на TypeScript:

function hello(name: string) {
  console.log(`Hello, ${name}!`);
}

greet("TypeScript");

В този пример, дефинираме функция hello, която приема един аргумент от тип string. В тялото на функцията, използваме шаблонни низове, които са функционалност, която е добавена в ECMAScript 6 (ES6).

За да компилираме този код в JavaScript, трябва да използваме компилатора на TypeScript. Можем да инсталираме компилатора като използваме Node.js и пакетния управляващик npm, като изпълним следната команда:

npm install -g typescript

След това можем да компилираме нашия TypeScript код, като използваме следната команда:

tsc hello.ts

Компилаторът ще генерира JavaScript файл със същото име като нашия TypeScript файл, като в случая ще генерира файл с име hello.js. Този файл вече може да бъде използван в нашето приложение.

Ето пример, който демонстрира разликата между JavaScript и TypeScript:

// JavaScript
function add(x, y) {
  return x + y;
}
console.log(add("1", "2")); // "12"

// TypeScript
function add(x: number, y: number): number {
  return x + y;
}
console.log(add("1", "2")); // Error: Argument of type '"1"' is not assignable to parameter of type 'number'.

В този пример JavaScript функцията add приема два аргумента x и y и връща тяхната сума. Въпреки че това работи за числа, ако x или y са низове, функцията ще ги конкатенира вместо да ги сумира. С други думи, типът на аргументите е неясен и може да доведе до грешки.

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

TypeScript също така добавя и други функционалности, като например:

• Класове
• Интерфейси
• Наследяване
• Модули
• Анонимни функции
• Ламбда функции
• Генерични типове

Класове

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

За да дефинираме клас в TypeScript, използваме ключовата дума class и след това името на класа, както следва:

class Person {
  firstName: string;
  lastName: string;

  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  sayHello() {
    console.log(`Hello, ${this.firstName} ${this.lastName}!`);
  }
}

let person = new Person('John', 'Doe');
person.sayHello();

Тук създаваме клас Person, който има свойства за първо име и фамилия и метод sayHello(), който извежда приветствие за тази персона. Създаваме нов обект от класа Person, който наричаме person и извикваме метода sayHello().

Интерфейси

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

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

interface IPerson {
  firstName: string;
  lastName: string;
  sayHello(): void;
}

class Person implements IPerson {
  firstName: string;
  lastName: string;

  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  sayHello() {
    console.log(`Hello, ${this.firstName} ${this.lastName}!`);
  }
}

let person: IPerson = new Person('John', 'Doe');
person.sayHello

Анонимни функции

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

let myFunc = function(x: number, y: number): number {
  return x + y;
}

Тук създаваме променлива myFunc, която държи анонимна функция, която приема два аргумента x и y от тип number и връща техния сбор. Типът на върнатия резултат е също number.

В TypeScript можем да опишем типа на анонимната функция, която предаваме като аргумент на друга функция, по следния начин:

function myFunction(callback: (a: number, b: number) => number) {
  let result = callback(2, 3);
  console.log(result);
}

myFunction(function(x, y) {
  return x + y;
});

Тук дефинираме функция myFunction, която приема като аргумент функция от тип (a: number, b: number) => number. Това означава, че предаваната функция приема два аргумента от тип number и връща резултат от същия тип. В тялото на функцията извикваме подадената функция с аргументи 2 и 3 и извеждаме резултата в конзолата.

Анонимните функции в TypeScript могат да бъдат полезни, когато искаме да използваме функционално програмиране или да използваме callback функции.

В TypeScript можем да дефинираме анонимна функция по следния начин:

const sum = function (a: number, b: number): number {
  return a + b;
};

console.log(sum(2, 3)); // 5

В горния пример дефинираме променлива sum, която съдържа анонимна функция, която приема два аргумента от тип number и връща резултат от тип number.

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

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(function (number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4]

В горния пример използваме анонимна функция като аргумент на метода filter, който приема друга функция като аргумент и изпълнява тази функция за всеки елемент на масива numbers. В нашия случай, анонимната функция връща true, ако даден елемент е четен, и false в противен случай. Резултатът от метода filter е нов масив, съдържащ само четните числа от масива numbers.

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

В отделни статии ще разгледаме и останалите функционалности, които TypeScript добявя.