Написание кода Node.js с использованием TypeScript

Недавно я попробовал TypeScript, так как он кажется многообещающим транспилером JavaScript, и хотел поделиться здесь своим первым опытом, чтобы убедить других попробовать TypeScript. Это действительно потрясающе!

TypeScript просто улучшает (конечно, зависит от вашего мнения) JavaScript и компилирует его в стандартный код JavaScript. Удивительной особенностью является то, что полученный код JavaScript действительно читабелен.

Начнем с установки TypeScript. Я предполагаю, что у вас есть установленная среда Node.js и npm.

npm install -g typescript

Это загружает и устанавливает все, что необходимо для TypeScript.

Затем создайте файл в любом месте, но дайте ему окончание *.ts (конечно, для TypeScript). Давайте напишем код JavaScript.

// test.ts
function hi(name) {
    console.log("Hi " + name);
}
hi("Chris");

Теперь перейдите в командную строку и введите

# compiles to test.js
> tsc test.ts
# execute with node
> node test.js
Hi Chris

Взгляните на сгенерированный файл JavaScript. Вы увидите, что код JavaScript не отличается от нашего кода TypeScript. Поскольку мы не использовали ничего необычного в нашем коде TypeScript, у TypeScript не было причин что-либо транспилировать.

Давайте расширим наш код, используя некоторые интересные функции TypeScript. Измените свой код на следующий

// test.ts
function hi(name: string) {
    console.log(`Hi ${name}`);
}
hi("Chris");

Сначала мы объявили параметр имени как строку. TypeScript позволяет нам объявлять типы для написания кода, безопасного для типов. Во-вторых, мы использовали функцию ES6, которая называется Template-Strings или String Interpolation, поэтому нам больше не нужно объединять строки. TypeScript поддерживает ES6, поэтому мы также можем использовать эту функцию.

Теперь при повторной компиляции мы видим, что генерируется тот же код, и он дает нам тот же результат.

Возьмем более сложный пример. Сначала мы хотим создать небольшую структуру проекта, которая должна выглядеть следующим образом:

├── dist
├── src
│   ├── lib
│   │   ├── employee.ts
│   │   └── person.ts
│   └── main.ts
└── tsconfig.json

В tsconfig.json мы настраиваем, как компилятор TypeScript должен транспилировать наш код. Наш tsconfig.json будет выглядеть следующим образом:

{
    "compilerOptions": {
        "module": "commonjs",
        "outDir": "dist"
    },
    "include": [
        "src/**/*"
    ]
}

Параметры компилятора — это флаги конфигурации, передаваемые компилятору. Параметр module важен для наших выходных файлов. Он объявляет, какой модуль API он должен использовать. Мы будем использовать API модуля commonjs, который также используется Node.js. outDir просто указывает, куда должны помещаться наши скомпилированные файлы. С конфигурацией include мы просто берем и рекурсивно компилируем все файлы, которые сохраняются в папке src.

Приступим к реализации первого файла:

// lib/person.ts
interface Person {
    readonly age: number;
    readonly name: string;
}
export { Person };

Да! Мы можем писать интерфейсы на TypeScript. Эти интерфейсы работают очень похоже на Java. Объявите свои свойства или методы и позвольте другим классам или объектам реализовать их. Кроме того, TypeScript использует способ создания модулей ES6. Здесь мы просто экспортируем интерфейс Person, чтобы мы могли импортировать его куда-нибудь еще.

// lib/employee.ts
import { Person } from '/.person';
class Employee implements Person {
    readonly age: number;
    readonly name: string;
    constructor(age, name) {
        this.age = age;
        this.name = name;
    }
    greet() {
        console.log(`Hi my name is ${this.name} and I am ${this.age} years old`);
    }
}
export { Employee }

Здесь мы используем класс ES6, реализующий импортированный интерфейс. К сожалению, при реализации интерфейса нам приходится снова объявлять все поля. Если вы забудете снова объявить свойство, TypeScript выдаст ошибку.

// main.ts
import { Employee } from './lib/employee';
const emp = new Employee(21, 'Chris');
emp.greet();

Наконец, давайте попробуем наш написанный код. Создайте сотрудника и позвольте ему приветствовать вас.

Теперь перейдите в каталог, в котором был сохранен tsconfig.json, и просто запустите

> tsc

Ваша папка dist теперь заполнена скомпилированными файлами JavaScript, использующими ту же структуру каталогов, что и ваша папка src.

> node dist/main.js
Hi my name is Chris and I am 21 years old

Потрясающе правильно! TypeScript действительно убедил меня использовать его в будущих проектах, и мне не терпится приступить к одному из них. Это гибкий, чистый и, кроме того, очень весело. Я действительно должен поблагодарить Microsoft за это.