Динамичното дуо за уеб програмисти

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

TypeScript е компилиран, строго въведен горен индекс на JavaScript (изграден върху езика на JavaScript). Този статично въведен език, разработен и поддържан от Microsoft, поддържа обектно-ориентирани концепции като неговото подмножество, JavaScript.

Този език за програмиране с отворен код има много случаи на употреба, като например създаване на уеб, широкомащабни и мобилни приложения. TypeScript може да се използва за frontend и backend разработка. Освен това има различни рамки и библиотеки, които опростяват разработката и разширяват случаите на използване.

Защо да използвате TypeScript с Node.js? Тази статия ще обсъди защо TypeScript се счита за „по-добър“ от JavaScript, как да го инсталирате с помощта на Node.js, да конфигурирате и създадете малка програма с помощта на TypeScript и Node.js.

Съдържание

TypeScript с Node.js: Предимства

Незадължително статично въвеждане: JavaScript се въвежда динамично, което означава, че типът данни на променливата се определя по време на изпълнение, а не по време на компилиране. От друга страна, TypeScript предлага незадължително статично въвеждане, което означава, че след като декларирате променлива, тя няма да промени типа си и ще приема само определени стойности.
Предсказуемост: Когато работите с TypeScript, има увереност, че всичко, което дефинирате, ще остане същото. Например, ако декларирате определена променлива като булева, тя никога не може да се промени в низ по пътя. Като разработчик вие сте сигурни, че вашите функции ще останат същите.
Лесно откриване на бъгове на ранен етап: TypeScript открива повечето грешки на типа рано, така че вероятността да се преместят в производство е малка. Това намалява времето, което инженерите прекарват в тестване на кода на по-късните етапи.
Поддържа се в повечето IDE: TypeScript работи с повечето интегрирани среди за разработка (IDE). Повечето от тези IDE осигуряват довършване на код и подчертаване на синтаксиса. Тази статия ще използва Visual Studio Code, друг продукт на Microsoft.
Лесен за преработване на код: Можете да актуализирате или преработвате своето приложение TypeScript, без да променяте поведението му. Наличието на инструменти за навигация и IDE, разбиращи вашия код, улесняват безпроблемното преработване на кодовата база.
Използва съществуващи пакети: Не е нужно да създавате всичко от нулата; можете да използвате съществуващи NPM пакети с TypeScript. Този език също има силна общност, която поддържа и създава дефиниции на типове за популярни пакети.

25 най-добри безплатни доставчици на виртуални телефонни номера

Как да използвате TypeScript с Node.js

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

Предпоставки

Node.js: Node е междуплатформена среда за изпълнение, която позволява изпълнение на JavaScript код извън среда на браузър. Можете да проверите дали възелът е инсталиран на вашата машина, като използвате тази команда;

възел -v

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

Мениджър на пакети на възли: Можете да използвате NPM или Yarn. Първият се инсталира по подразбиране, когато инсталирате Node.js. В тази статия ще използваме NPM като мениджър на пакети. Използвайте тази команда, за да проверите текущата му версия;

npm -v

Инсталиране на TypeScript с Node.js

Стъпка 1: Настройте папка на проекта

Ще започнем със създаване на папка на проекта за проекта TypeScript. Можете да дадете на тази папка произволно име по ваш вкус. Можете да използвате тези команди, за да започнете;

mkdir typescript-възел

cd машинописен възел

Стъпка 2: Инициализирайте проекта

Използвайте npm, за да инициализирате вашия проект с помощта на тази команда;

npm init -y

Горната команда ще създаде файл package.json. Флагът -y в командата казва на npm да включи настройките по подразбиране. Генерираният файл ще има подобен резултат.

{

  "name": "typescript-node",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo "Error: no test specified" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC"

}

Конфигуриране на TypeScript с Node.js

Стъпка 1: Инсталирайте компилатора на TypeScript

Вече можете да инсталирате компилатора на TypeScript във вашия проект. Изпълнете тази команда;

npm install –save-dev typescript

Изходът на вашия команден ред ще бъде нещо подобно на това;

added 1 package, and audited 2 packages in 26s

found 0 vulnerabilities

Забележка: Горният подход инсталира TypeScript локално в папката на проекта, върху която работите. Можете да инсталирате TypeScript глобално на вашата система, така че не е нужно да го инсталирате всеки път, когато работите по проект. Използвайте тази команда, за да инсталирате TypeScript глобално;

npm install -g typescript

Можете да проверите дали TypeScript е инсталиран чрез тази команда;

tsc -v

Стъпка 2: Добавете типове Ambient Node.js за TypeScript

Как да видите скрити такси на Airbnb

TypeScript има различни типове, като Implicit, Explicit и Ambient. Типовете среда винаги се добавят към глобалния обхват на изпълнение. Използвайте тази команда, за да добавите типове среда;

npm инсталирайте @types/node –save-dev

Стъпка 3: Създайте файл tsconfig.json

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

npx tsc --init --rootDir src --outDir build 

--esModuleInterop --resolveJsonModule --lib es6 

--module commonjs --allowJs true --noImplicitAny true

Това ще бъде изведено на терминала;

Ще бъде генериран файлът tsconfig.json, който съдържа някои настройки по подразбиране и коментари.

файл tsconfig.json

Ето какво сме конфигурирали:

rootDir е мястото, където TypeScript ще търси нашия код. Насочили сме го към папката /src, където ще напишем нашия код.
Папката outDir определя къде се поставя компилираният код. Такъв код е конфигуриран да се съхранява в папка build/.

Използване на TypeScript с Node.js

Стъпка 1: Създайте папка src и файл index.ts

Сега имаме основната конфигурация. Вече можем да създадем просто приложение на TypeScript и да го компилираме. Файловото разширение за TypeScript файл е .ts. Изпълнете тези команди, докато сте в папката, която създадохме в предишните стъпки;

mkdir src

докоснете src/index.ts

Стъпка 2: Добавете код към TypeScript файла (index.ts)

Можете да започнете с нещо просто като;

console.log('Hello world!')

Стъпка 3: Компилирайте TypeScript код в JavaScript код

Изпълнете тази команда;

npx tsc

Можете да проверите папката за изграждане (build/index.js) и ще видите, че index.js е генериран с този изход;

TypeScript е компилиран в JavaScript код.

Стъпка 4: Стартирайте компилирания JavaScript код

Не забравяйте, че кодът на TypeScript не може да работи в браузъри. Така ще изпълним кода в index.js в папката за компилация. Изпълнете тази команда;

node build/index.js

Това ще бъде изходът;

Стъпка 5: Конфигурирайте TypeScript за автоматично компилиране в JavaScript код

Ръчното компилиране на TypeScript код всеки път, когато промените своите TypeScript файлове, може да загуби време. Можете да инсталирате ts-node (извършва TypeScript код директно, без да чака да бъде компилиран) и nodemon (проверява кода ви за промени и автоматично рестартира сървъра).

Как да пуснете слайдшоу със снимки на Chromecast

Изпълнете тази команда;

npm install --save-dev ts-node nodemon

След това можете да отидете до файла package.json и да добавите този скрипт;

"scripts": {

   "start": "ts-node ./src/index.ts"

}

Можем да използваме нов кодов блок за демонстрационни цели;

function sum (num1:number, num2:number, num3:number){

    return num1 + num2 +num3;

}

console.log(sum(10,15,30))

Изтрийте файла index.js (/build/index.js) и стартирайте npm start.

Вашият резултат ще бъде подобен на този;

сбор от 3 числа

Конфигурирайте TypeScript Linting с eslint

Стъпка 1: Инсталирайте eslint

Linting може да бъде полезно, ако искате да поддържате последователност на кода и да улавяте грешки преди изпълнение. Инсталирайте eslint с помощта на тази команда;

npm install --save-dev eslint

Стъпка 2: Инициализирайте eslint

Можете да инициализирате eslint с помощта на тази команда;

npx eslint --init

Процесът на инициализация ще ви преведе през няколко стъпки. Използвайте следната екранна снимка, за да ви преведе през;

След като процесът приключи, ще видите файл с име .eslintrc.js със съдържание, подобно на това;

module.exports = {

  env: {

    browser: true,

    es2021: true

  },

  extends: 'standard-with-typescript',

  overrides: [

  ],

  parserOptions: {

    ecmaVersion: 'latest',

    sourceType: 'module'

  },

  rules: {

  }

}

Стъпка 3: Стартирайте eslint

Изпълнете тази команда, за да проверите и линтите всички файлове с разширение .ts;

npx eslint . --ext .ts

Стъпка 4: Актуализирайте package.json

Добавете lint скрипт към този файл за автоматично linting.

"scripts": {

    "lint": "eslint . --ext .ts",

  },

TypeScript с Node.js: Най-добри практики

Поддържайте TypeScript актуален: разработчиците на TypeScript винаги пускат нови версии. Уверете се, че имате инсталирана най-новата версия на вашата машина/папка на проекта и се възползвайте от нови функции и корекции на грешки.
Активиране на строг режим: Можете да уловите често срещаните програмни грешки по време на компилиране, когато активирате строг режим на файла tsconfig.json. Това ще намали времето ви за отстраняване на грешки, което ще доведе до повече производителност.
Активиране на строги нулеви проверки: Можете да уловите всички нулеви и недефинирани грешки по време на компилиране, като активирате стриктни нулеви проверки на файла tsconfig.json.
Използвайте редактор на код, който поддържа TypeScript: Съществуват много редактори на код. Добра практика е да изберете редактори на код като VS Code, Sublime Text или Atom, които поддържат TypeScript чрез добавки.
Използвайте типове и интерфейси: С типове и интерфейси можете да дефинирате персонализирани типове, които можете да използвате повторно в целия си проект. Подобен подход ще направи вашия код по-модулен и лесен за поддръжка.

Обобщавайки

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

Ако тепърва започвате с TypeScript, уверете се, че разбирате разликите между TypeScript и JavaScript.