Как начать работу с TypeScript

Иногда необходимо настроить среду разработки для написания кода TypeScript. В этой статье будет показано, как это делается.

Я полагаю, что у вас уже установлен Nodejs на вашем компьютере, если нет, вам нужно посетить официальный сайт a> и загрузите его. Также было бы неплохо установить GIT. Не забывайте, что все важные действия мы будем выполнять с помощью командной строки.

Во-первых, вам нужно создать новый проект nodejs.

Давайте создадим папку и назовем ее ts-dev-env.

После этого перейдите в папку и инициализируйте новый проект.

$ mkdir ts-dev-env
$ cd ts-dev-env
$ npm init

Таким образом, мы только что создали новый проект JavaScript. Файлов нет, и нам нужно создать папку ‘src’ с файлом index.ts в ней.

$ mkdir src
$ touch src/index.ts

Собственно, у нас есть все, что нужно, чтобы начать установку необходимых пакетов, но сначала нам нужно добавить язык typescript.

Давайте воспользуемся для этого утилитой npm.

$ npm install –save typescript

Во-вторых, нам нужно создать файл tsconfig.json с параметрами компилятора.

$ touch tsconfig.json

В этом примере вы можете просто создать файл tsconfig.json в корне проекта и скопировать информацию в файл.

{
   "compilerOptions": {
     "module": "commonjs",
     "esModuleInterop": true,
     "target": "es6",
     "moduleResolution": "node",
     "sourceMap": true,
     "outDir": "dist"
   },
   "include": [
     "./src/**/*"
   ],
   "lib": ["es2015"]
}

Теперь мы можем начать писать код TypeScript. Давайте откроем файл index.ts. Я бы посоветовал вам использовать VSCode в качестве текстового редактора.

Одной из самых популярных задач для программистов является реализация алгоритма проверки палиндрома. Я бы предложил оставить описание реализации за пределами этой статьи и просто скопировать этот класс в файл index.ts. Программный код должен быть проще, но я специально оформил его как класс для компиляции демонстраций.

class Palindrome {
   private word = '';
   constructor(word: string) {
      this.word = word;
   }


   public check() {
       const arr = this.word.toLocaleLowerCase().split('').reverse();
       return (arr.join('') === this.word.toLocaleLowerCase());
   }


   public length() {
       return this.word.length;
   }
}

const palindrome = new Test("Anna");
const isPalindrome = palindrome.check();
console.log(isPalindrome);
const wordLength = palindrome.length();
console.log(wordLength);

Теперь у нас есть все для компиляции и мы можем это сделать. Для этого добавим команду «сборка» в package.json. Эта процедура удаляет папку dist, если она существует, и запускает процесс компиляции.

...
"scripts": {
    ...
    "build": "rm -rf ./dist && npx tsc",
    ...
}
...

Еще один важный момент — режим разработки. По сути, можно скомпилировать и запустить код сразу после изменения строк. Для этого вам необходимо установить утилиту ts-node-dev, которая следит за вашей папкой «src», и если вы что-то измените, перекомпилируйте и повторно запустите код.

$ npm install –save-dev ts-node-dev

После установки вы можете добавить команду разработчика в файл package.json с текстом

...
"scripts": {
    ...
    "build": "ts-node-dev --respawn -- src/index.ts",
    ...
}
...

Вот и все!

Теперь у вас есть простая среда для написания и компиляции кода TypeScript.

Все исходные коды для этой статьи можно найти здесь

Если эта статья была вам интересна и полезна, или вы увидели какие-то неточности и хотели бы их обсудить, пишите свои мысли в комментариях ниже. Буду рад пообщаться с вами.

н