Первое приложение на TypeScript в Visual Studio

Среда разработки Visual Studio имеет встроенные возможности по созданию проектов с использованием TypeScript. Итак, создадим первое приложение на TypeScript в Visual Studio. Прежде всего нам необходимо с помощью установщика Visual Studio установить соответствующий компонент. Данный компонент называется Разработка Node.js:

При создании нового проекта в поле языка мы можем выбрать TypeScript и увидеть доступные по умолчанию несколько шаблонов проектов, которые предполагают использование языка TypeScript:

Эти проекты позволяют использовать TypeScript в различных ситуациях - в связке с Node.js, Vue и т.д. В данном случае выберем самый простой тип проекта, который можно использовать для изучения TS - Blank Node.js Console Application.

После выбора данного типа проекта дадим ему какое-нибудь имя, например, HelloApp и укажем ему расположение:

В итоге Visual Studio создаст следующий проект:

Проект по умолчанию имеет следующие файлы:

• app.ts: файл с кодом на TypeScript

• package.json: файл с определением пакетов и прочей конфигурации для Node.js

• tsconfig.json: файл конфигурации TypeScript

Кроме того, в узле npm/dev можно увидеть применяемые для разработки пакеты npm - @types/node и typescript.

Ключевым элементом здесь является файл app.ts, который выполняется при запуске приложения. Изменим его код следующим образом:

class User{
    name : string;
    constructor(_name:string){
        
		this.name = _name;
    }
}
const tom : User = new User("Tom");
console.log("Hello ", tom.name);

Как и в прошлой теме, здесь определяется класс User, создается объект этого класса, и данные объекта выводятся на консоль.

Теперь перейдем к запуску проекта. Однако разработка в Visual Studio имеет ряд тонкостей. Прежде всего при обычном запуске консоль запуститься и захлопнется быстрее, чем мы там сможем что-то увидеть. Чтобы запущенная консоль не схлопывалась, перейдем в Visual Studio к пункту меню Tools -> Options

Далее в меню окна опций найдем пункт Node.js Tools/span>. Для этого пункта предусмотрены три опции - отметим все эти опции:

Запустим проект на выполнение с помощью комбинации клавиш Ctrl + F5 (то есть запуск без отладки), и перед нами откроется следующая консоль:

Другая тонкость заключается в том, что по умлчанию кодировка файла app.ts может отличаться от UTF-8, из-за этого могут возникнуть проблемы с выводом кириллических символов. В этом случае мы можем в Visual Studio перейти к пункту меню File -> Save As. Далее в выпадающем меню у кнопки Save выбрать пункт Save with Encoding...:

Затем в поле Encoding укажем кодировку Unicode (UTF-8 without signature).