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

Programming, development, testing

→

TypeScript - programming language similar to JavaScript. TypeScript uses types, classes, inheritance. TypeScript converted to JavaScript

→

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

Looked at 5566 times

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

last updated: 1 March 2020

Step 1. Open Visual Studio

If you do not have Visual Studio installed you need install Visual Studio...

Open Visual Studio 2022

Open Visual Studio 2019

Step 2. Let's create a new console application

Click on the menu: File → New → Project

Choose: Installed → TypeScript → Blank Node.js Console Application

Step 3. Let's add code to the file app.ts

TypeScript File app.ts

// describe the class
class Book {

     // class members
     private name: string;
     private price: number;

     // class constructor with parameters
     constructor(newName: string, newPrice: number) {
          this.name = newName;
          this.price = newPrice;
     }

     // class method
     showBook(): void {
          console.log("Book name " + this.name + " , price " + this.price);
     }
}

// create a class object Book
var book1 = new Book("Властелин колец", 120); // the constructor is called constructor(newName: string, newPrice: number)
book1.showBook(); // call the method showBook

// create a class object Book
var book2 = new Book("Аладин", 230); // the constructor is called constructor(newName: string, newPrice: number)
book2.showBook(); // call the method showBook

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

Step 4. Run the example

Click on the green triangle

Example result

Вывод. Примущества использования 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

// describe the class
class Book {

     // class constructor with parameters
     constructor(newName, newPrice) {
          this.name = newName;
          this.price = newPrice;
}

     // class method
     showBook() {
          console.log("Book name " + this.name + " , price " + this.price);
     }
}

// create a class object Book
var book1 = new Book("Властелин колец", 120); // the constructor is called constructor(newName: string, newPrice: number)
book1.showBook(); // call the method showBook

// create a class object Book
var book2 = new Book("Аладин", 230); // the constructor is called constructor(newName: string, newPrice: number)
book2.showBook(); // call the method 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

// describe the class
var Book = /** @class */ (function () {

     // class constructor with parameters
     function Book(newName, newPrice) {
          this.name = newName;
          this.price = newPrice;
     }

     // class method
     Book.prototype.showBook = function () {
          console.log("Book name " + this.name + " , price " + this.price);
     };
     return Book;
}());

// create a class object Book
var book1 = new Book("Властелин колец", 120); // the constructor is called constructor(newName: string, newPrice: number)
book1.showBook(); // call the method showBook

// create a class object Book
var book2 = new Book("Аладин", 230); // the constructor is called constructor(newName: string, newPrice: number)
book2.showBook(); // call the method showBook

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

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

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

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

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

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

Next topic →
Decorator for the classroom in the TypeScript. Пример: @MyDecarator1 class Book {...}