Создаем новое Node.js консольное приложение в Visual Studio 2017 для изучения Typescript

Программирование, разработка, тестирование

→

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

→

Создаем новое Node.js консольное приложение в Visual Studio 2017 для изучения Typescript

Посмотрели 5567 раз(а)

Создаем новое Node.js консольное приложение в Visual Studio 2017 для изучения Typescript

последнее обновление: 1 марта 2020

Шаг 1. Открываем Visual Studio

Если у вас не установлена Visual Studio нужно установить Visual Studio...

Открываем Visual Studio 2022

или

Открываем Visual Studio 2019

Шаг 2. Создадим новое консольное приложение

Нажмем в меню: File → New → Project

Выбираем: Installed → TypeScript → Blank Node.js Console Application

Шаг 3. Добавим код в файл app.ts

TypeScript Файл app.ts

// описываем класс
class Book {

     // члены класса
     private name: string;
     private price: number;

     // конструктор класса с параметрами
     constructor(newName: string, newPrice: number) {
          this.name = newName;
          this.price = newPrice;
     }

     // метод класса
     showBook(): void {
          console.log("Book name " + this.name + " , price " + this.price);
     }
}

// создаем объект класса Book
var book1 = new Book("Властелин колец", 120); // вызывается конструктор constructor(newName: string, newPrice: number)
book1.showBook(); // вызываем метод showBook

// создаем объект класса Book
var book2 = new Book("Аладин", 230); // вызывается конструктор constructor(newName: string, newPrice: number)
book2.showBook(); // вызываем метод showBook

// ждем чтобы окно не закрылось. Окно закроется если пользователь нажмет на [x]
process.stdin.resume();

Шаг 4. Запускаем пример

Нажимаем на зеленый треугольник

Результат примера

Вывод. Примущества использования typescript. Примущества использования Visual Studio 2017, а не командной строки для компиляции

1) Typescript компилируется в Javascript и я могу указать версию Javascript
Я указываю старую версию javascript чтобы javascript у пользователей поддерживался в браузере например в google chrome

Поменять версию можно в tsconfig.json

es6 если в файле tsconfig.json версия "target" : "es6" то после компиляции полчается такой javascript файл:

json

{
     "compilerOptions": {
          "module": "commonjs",
          "target": "es6",
          "lib": ["es6"],
          "sourceMap": true
     },
     "exclude": [
          "node_modules"
     ]
}

JavaScript

// описываем класс
class Book {

     // конструктор класса с параметрами
     constructor(newName, newPrice) {
          this.name = newName;
          this.price = newPrice;
}

     // метод класса
     showBook() {
          console.log("Book name " + this.name + " , price " + this.price);
     }
}

// создаем объект класса Book
var book1 = new Book("Властелин колец", 120); // вызывается конструктор constructor(newName: string, newPrice: number)
book1.showBook(); // вызываем метод showBook

// создаем объект класса Book
var book2 = new Book("Аладин", 230); // вызывается конструктор constructor(newName: string, newPrice: number)
book2.showBook(); // вызываем метод showBook

// ждем чтобы окно не закрылось. Окно закроется если пользователь нажмет на [x]
process.stdin.resume();

es5 когда я ставлю в tsconfig.json версию "target" : "es5" то после компиляции полчается такой javascript файл:

json

{
     "compilerOptions": {
          "module": "commonjs",
          "target": "es5",
          "lib": ["es6"],
          "sourceMap": true
     },
     "exclude": [
          "node_modules"
     ]
}

JavaScript

// описываем класс
var Book = /** @class */ (function () {

     // конструктор класса с параметрами
     function Book(newName, newPrice) {
          this.name = newName;
          this.price = newPrice;
     }

     // метод класса
     Book.prototype.showBook = function () {
          console.log("Book name " + this.name + " , price " + this.price);
     };
     return Book;
}());

// создаем объект класса Book
var book1 = new Book("Властелин колец", 120); // вызывается конструктор constructor(newName: string, newPrice: number)
book1.showBook(); // вызываем метод showBook

// создаем объект класса Book
var book2 = new Book("Аладин", 230); // вызывается конструктор constructor(newName: string, newPrice: number)
book2.showBook(); // вызываем метод showBook

// ждем чтобы окно не закрылось. Окно закроется если пользователь нажмет на [x]
process.stdin.resume();

2) Примущества использования Visual Studio 2017, а не командной строки для компиляции

В Visual Studio 2017 чтобы скомпилировать нужно нажать 1 клавишу.

Если ошибка компиляции в Visual Studio 2017 то нажав на ошибку сразу переходим на строчку с ошибкой.

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

← Предыдущая тема
Создаем новое приложение с TypeScript в Visual Studio Code. Я создал несколько ts файлов. Поэтому использую Webpack (собирает все файлы в один js). Работает отладка (Debug) и ставятся точки остановки Breakpoints.

Следующая тема →
Декоратор для класса В TypeScript. Пример: @MyDecarator1 class Book {...}