Как установить typescript в visual studio code

Использование TypeScript в Visual Studio Code

TypeScript – это типизированный расширенный набор JavaScript, который компилируется в простой JavaScript. Давайте разберемся, что именно это означает:

• типизированный язык позволяет определять переменные, параметры и типы данных.
• как расширенный набор TypeScript вносит дополнительные функции в стандартный набор JavaScript. Валидный JavaScript является валидным TypeScript, но не наоборот.
• компиляция в простой JavaScript нужна потому, что TypeScript не запускается браузером. Таким образом, доступные инструменты компилируют TypeScript в понятный браузеру JavaScript.

В этом руководстве мы покажем, как работать с TypeScript в Visual Studio Code, и рассмотрим преимущества их совместного использования.

Требования

• Базовые навыки работы с JavaScript.
• Локальная установка Node.js. Найти мануал по установке для вашей системы можно здесь.
• Установка Visual Studio Code

1: Установка и компиляция TypeScript

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

npm install -g typescript

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

Перейдите в новый каталог:

Теперь нужно создать новый файл TypeScript. Эти файлы используют расширение .ts.

Теперь вы можете открыть VS Code и создать новый файл, нажав File → New File. После этого сохраните его, нажав File → Save As. В мануале мы назовем этот файл app.ts. В целом же имя файла не имеет значения, важно только его расширение .ts.

Файл должен начинаться со строки export <>;, чтобы VS Code распознал его как модуль.

Создайте функцию, которая будет выводить имя и фамилию из объекта person:

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

В приведенном ниже фрагменте представлен интерфейс для объекта Person с двумя свойствами: firstName и lastName. Сама же функция welcomePerson была изменена, чтобы принимать только объекты Person.

export <>;
function welcomePerson(person: Person) console.log(`Hey $ $`);
return `Hey $ $`;
>
const james = firstName: «James»,
lastName: «Quick»
>;
welcomePerson(james);
interface Person firstName: string;
lastName: string;
>

Вы поймете преимущество этого хода, если попытаетесь передать в функцию welcomePerson какую-то строку.

Например, давайте заменим james:

Поскольку мы работаем с файлом TypeScript, VS Code немедленно сообщит вам, что функция ожидает объект Person, а не строку.

Argument of type ‘»James»‘ is not assignable to parameter of type ‘Person’.

Теперь, когда у вас есть рабочий файл TypeScript, вы можете скомпилировать его в JavaScript. Для этого вам нужно вызвать функцию и указать, какой файл компилировать. Сделать это можно с помощью встроенного терминала VS Code.

Если вы еще не исправили ошибку, вы увидите такое сообщение:

app.ts:13:15 — error TS2345: Argument of type ‘»James»‘ is not assignable to parameter of type ‘Person’.

Чтобы исправить ошибку, вместо строки передайте функции объект Person, который она ожидает. Затем перезапустите компиляцию. Вы получите рабочий файл JavaScript.

Команда ls выведет список файлов по текущему пути:

Вы увидите исходный файл ts и новый файл js:

Откройте файл app.js в VS Code:

«use strict»;
exports.__esModule = true;
function welcomePerson(person) console.log(«Hey » + person.firstName + » » + person.lastName);
return «Hey » + person.firstName + » » + person.lastName;
>
var james = firstName: «James»,
lastName: «Quick»
>;
welcomePerson(james);

Обратите внимание, что шаблонные литералы, являющиеся функцией ES6, были скомпилированы как простая конкатенация строк в ES5. Скоро мы вернемся к этому вопросу.

Чтобы убедиться, что все работает, вы можете запустить JavaScript непосредственно, используя Node в своем терминале:

В консоли вы увидите имя:

Hey James Quick

2: Создание конфигурационного файла TypeScript

Итак, вы скомпилировали один файл, и это здорово. Но в реальном проекте вам может понадобиться настроить компиляцию всех файлов: к примеру, если файлы нужно будет компилировать в ES6 вместо ES5. Для этого можно создать конфигурационный файл TypeScript.

Чтобы создать этот файл, вы можете запустить следующую команду (подобную npm init):

Вы получите такой вывод:

message TS6071: Successfully created a tsconfig.json file.

Откройте новый файл tsconfig.json, и вы увидите множество различных опций, большинство из них будут закомментированы.

Возможно, вы заметили, что в файле есть опция “target”, которая имеет значение “es5”. Измените ее значение на “es6”.

Внеся это изменение в tsconfig.json, запустите команду tsc в своем терминале:

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

Теперь откройте только что созданный файл app.js:

«use strict»;
Object.defineProperty(exports, «__esModule», < value: true >);
function welcomePerson(person) console.log(`Hey $ $`);
return `Hey $ $`;
>
const james = firstName: «James»,
lastName: «Quick»
>;
welcomePerson(james);

Обратите внимание, что шаблонный литерал здесь сохраняет свой синтаксис, а это доказывает, что TypeScript был успешно скомпилирован в ES6.

Еще одна вещь, которую вы можете изменить – это место, где хранятся файлы JavaScript после создания. За это отвечает параметр “outDir”.

Попробуйте удалить “outDir”, а затем ввести его снова – при этом вы увидите список вариантов для автодополнения. VS Code предоставляет функцию IntelliSense, свойства которой вы можете установить в конфигурационном файле TypeScript.

Для примера можно изменить значение outDir с текущего каталога на каталог dist:

После повторной компиляции (tsc) ваш выходной файл JavaScript будет находиться внутри каталога dist.

Вы можете использовать команды cd и ls в своем терминале, чтобы изучить содержимое каталога dist:

Вы увидите ваш скомпилированный файл JavaScript в новом каталоге:

3: TypeScript и современные фронтэнд фреймворки

За последние пару лет TypeScript стал довольно популярным языком. Вот несколько примеров его использования в современных фреймворках.

Angular CLI

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

Create React App 2

Create React App не предоставляет TypeScript по умолчанию, но в последней версии его можно настроить таким образом. Если вам интересно узнать, как использовать TypeScript с Create React App, смотрите этот мануал.

Vue CLI 3

Vue CLI можно настроить на поддержку TypeScript при создании нового проекта. Больше информации об этом вы можете найти в Vue Docs.

Заключение

В этом мануале мы рассмотрели использование TypeScript в VS Code. TypeScript позволяет генерировать более качественный и надежный JavaScript. Как видите, VS Code предоставляет множество функций, помогающих вам писать TypeScript, генерировать конфигурации и так далее.

Компиляция кода TypeScript (Node.js)

Используйте пакет npm TypeScript, чтобы добавить поддержку TypeScript в проекты на основе системы проектов JavaScript (JSPS) или .esproj. Начиная с Visual Studio 2019, рекомендуется использовать пакет npm вместо пакета SDK TypeScript. Пакет npm TypeScript обеспечивает большую переносимость на разных платформах и средах.

Для проектов ASP.NET Core используйте пакет NuGet вместо npm для добавления поддержки TypeScript.

Добавление поддержки TypeScript с использованием npm

Пакет npm TypeScript позволяет включить поддержку TypeScript. Когда в проект устанавливается пакет npm или TypeScript 2.1 или более новой версии, в редактор загружается соответствующая версия языковой службы TypeScript.

1. Следуя инструкциям, установите рабочую нагрузку разработки Node.js и среду выполнения Node.js. Для простой интеграции с Visual Studio создайте проект с помощью одного из шаблонов Node.js для TypeScript, например шаблона пустого веб-приложения Node.js. Либо используйте шаблон Node.js для JavaScript, предоставляемый в Visual Studio, и следуйте инструкциям в этом разделе. Или используйте проект Открытая папка
2. Установите пакет npm для TypeScript, если он еще не включен в ваш проект. В Обозревателе решений (область справа) откройте package.json в корневом каталоге проекта. Перечисленные пакеты соответствуют пакетам в узле npm в Обозревателе решений. Дополнительные сведения см. в разделе Управление пакетами npm. Установить пакет npm TypeScript для проекта Node.js можно с помощью командной строки или IDE. Чтобы установить пакет с помощью IDE, щелкните правой кнопкой мыши узел npm в Обозревателе решений, выберите Установить новый пакет npm, найдите TypeScript и установите пакет. Выберите параметр npm в окне Вывод, чтобы видеть ход установки пакета. Установленный пакет появится в узле npm в Обозревателе решений.
3. Если пакет не включен в проект, добавьте файл с tsconfig.json в корневой каталог проекта. Для этого щелкните правой кнопкой мыши узел проекта и выберите Добавить > Новый элемент. Выберите Файл конфигурации TypeScript JSON, а затем нажмите кнопку Добавить. Если вы не видите все шаблоны элементов, выберите «Показать все шаблоны» и выберите шаблон элемента. Visual Studio добавит файл tsconfig.json в корневую папку проекта. Этот файл можно использовать для настройки параметров компилятора TypeScript.
4. Откройте файл tsconfig.json и обновите его, задав необходимые параметры компилятора. Ниже приведен пример простого файла tsconfig.json.

< "compilerOptions": < "noImplicitAny": false, "noEmitOnError": true, "removeComments": false, "sourceMap": true, "target": "es5", "outDir": "dist" >, "include": [ "scripts/**/*" ] > 

• include указывает компилятору, где искать файлы TypeScript (*.ts).
• Параметр outDir указывает выходную папку для обычных файлов JavaScript, которые преобразуются компилятором TypeScript.
• Параметр sourceMap указывает, нужно ли компилятору создать файлы sourceMap.

В приведенной выше конфигурации представлен пример базовой конфигурации TypeScript. Сведения о других параметрах см. в разделе о файле tsconfig.json.

Сборка приложения

1. В проект добавьте файлы TypeScript (.ts) или TypeScript JSX (.tsx), а затем добавьте код TypeScript. Ниже приведен простой пример TypeScript:

let message: string = 'Hello World'; console.log(message); 

"scripts": < "build": "tsc --build", "clean": "tsc --build --clean" >, 

Для сборки с помощью стороннего средства, например webpack, можно добавить в файл package.json скрипт сборки для командной строки:

"scripts":

Пример использования webpack с React и файла конфигурации webpack см. в статье Учебник. Создание приложения Node.js и React в Visual Studio.

Пример использования Vue.js с TypeScript см. в статье Создание приложения Vue.js.

Примечание. При настройке сторонних средств в проектах Node.js не используются пути, заданные в разделе Средства>Параметры>Проекты и решения>Управление веб-пакетами>Внешние веб-инструменты. Эти параметры используются для проектов других типов.

Выполнение приложения

Инструкции по запуску приложения после его компиляции см. в разделе Создание приложения Node.js и Express.

Автоматизация задач сборки

Для автоматизации задач сторонних средств, таких как npm и webpack, вы можете использовать обозреватель запускателя задач в Visual Studio.

• Запускатель задач npm включает поддержку скриптов npm, определенных файле package.json. Поддерживает YARN.
• Запускатель задач webpack включает поддержку webpack.

TypeScript tutorial in Visual Studio Code

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It offers classes, modules, and interfaces to help you build robust components.

Install the TypeScript compiler

Visual Studio Code includes TypeScript language support but does not include the TypeScript compiler, tsc . You will need to install the TypeScript compiler either globally or in your workspace to transpile TypeScript source code to JavaScript ( tsc HelloWorld.ts ).

The easiest way to install TypeScript is through npm, the Node.js Package Manager. If you have npm installed, you can install TypeScript globally ( -g ) on your computer by:

npm install -g typescript 

You can test your install by checking the version.

tsc --version 

Hello World

Let’s start with a simple Hello World Node.js example. Create a new folder HelloWorld and launch VS Code.

mkdir HelloWorld cd HelloWorld code . 

From the File Explorer, create a new file called helloworld.ts .

Now add the following TypeScript code. You’ll notice the TypeScript keyword let and the string type declaration.

let message: string = 'Hello World'; console.log(message); 

To compile your TypeScript code, you can open the Integrated Terminal ( ⌃` (Windows, Linux Ctrl+` ) ) and type tsc helloworld.ts . This will compile and create a new helloworld.js JavaScript file.

If you have Node.js installed, you can run node helloworld.js .

If you open helloworld.js , you’ll see that it doesn’t look very different from helloworld.ts . The type information has been removed and let is now var .

var message = 'Hello World'; console.log(message); 

IntelliSense

In VS Code, you can see that you get language features such as syntax highlighting and bracket matching. When you were typing in the editor, you may have noticed IntelliSense, the smart code completions and suggestions provided by VS Code and the TypeScript language server. Below you can see the methods of console

When you select a method, you then get parameter help and can always get hover information.

tsconfig.json

So far in this tutorial, you have been relying on the TypeScript compiler’s default behavior to compile your TypeScript source code. You can modify the TypeScript compiler options by adding a tsconfig.json file that defines the TypeScript project settings such as the compiler options and the files that should be included.

Important: To use tsconfig.json for the rest of this tutorial, invoke tsc without input files. The TypeScript compiler knows to look at your tsconfig.json for project settings and compiler options.

Add a simple tsconfig.json that set the options to compile to ES5 and use CommonJS modules.

 "compilerOptions":  "target": "ES5", "module": "CommonJS"  > > 

When editing tsconfig.json , IntelliSense ( ⌃Space (Windows, Linux Ctrl+Space ) ) will help you along the way.

By default, TypeScript includes all the .ts files in the current folder and subfolders if the files attribute isn’t included, so we don’t need to list helloworld.ts explicitly.

Change the build output

Having the generated JavaScript file in the same folder as the TypeScript source will quickly get cluttered on larger projects, so you can specify the output directory for the compiler with the outDir attribute.

 "compilerOptions":  "target": "ES5", "module": "CommonJS", "outDir": "out"  > > 

Delete helloworld.js and run the command tsc with no options. You will see that helloworld.js is now placed in the out directory.

See Compiling TypeScript to learn about other features of the TypeScript language service and how to use tasks to run your builds directly from VS Code.

Error checking

TypeScript helps you avoid common programming mistakes through strong type checking. For example, if you assign a number to message , the TypeScript compiler will complain with ‘error TS2322: Type ‘2’ is not assignable to type ‘string’. You can see type checking errors in VS Code both in the editor (red squiggles with hover information) and the Problems panel ( ⇧⌘M (Windows, Linux Ctrl+Shift+M ) ). The [ts] prefix lets you know this error is coming from the TypeScript language service.

Quick Fixes

The TypeScript language service has a powerful set of diagnostics to find common coding issues. For example, it can analyze your source code and detect unreachable code which is displayed as dimmed in the editor. If you hover over the line of source code, you’ll see a hover explaining and if you place your cursor on the line, you’ll get a Quick Fix light bulb.

Clicking on the light bulb or pressing ⌘. (Windows, Linux Ctrl+. ) brings up the Quick Fix menu where you can select the Remove unreachable code fix.

Additionally, Code Action Widget: Include Nearby Quick Fixes ( editor.codeActionWidget.includeNearbyQuickFixes ) is a setting that is enabled on default, which will activate the nearest Quick Fix in a line from ⌘. (Windows, Linux Ctrl+. ) (command ID editor.action.quickFix ), no matter where your cursor is in that line.

The command highlights the source code that will be refactored or fixed with Quick Fixes. Normal Code Actions and non-fix refactorings can still be activated at the cursor location.

Debugging

VS Code has built-in support for TypeScript debugging. To support debugging TypeScript in combination with the executing JavaScript code, VS Code relies on source maps for the debugger to map between the original TypeScript source code and the running JavaScript. You can create source maps during the build by setting «sourceMap»: true in your tsconfig.json .

 "compilerOptions":  "target": "ES5", "module": "CommonJS", "outDir": "out", "sourceMap": true  > > 

Rebuild by running tsc and you should now have a helloworld.js.map in the out directory next to helloworld.js .

With helloworld.ts open in the editor, press F5 . If you have other debugger extensions installed, you need to select Node.js from the dropdown.

The debugger will start a session, run your code, and display the «Hello World» message in the Debug console panel.

In helloworld.ts , set a breakpoint by clicking on the left gutter of the editor. You will see a red circle if the breakpoint is set. Press F5 again. Execution will stop when the breakpoint is hit and you’ll be able to see debugging information such as variable values and the call stack in the Run and Debug view ( ⇧⌘D (Windows, Linux Ctrl+Shift+D ) ).

See Debugging TypeScript to learn more about VS Code’s built-in debugging support for TypeScript and how you can configure the debugger for your project scenarios.

Next steps

This tutorial was a quick introduction to using VS Code for TypeScript development. Read on to learn more about using VS Code’s compiling and debugging support for TypeScript:

• Compiling TypeScript — Use VS Code’s powerful task system for compiling TypeScript.
• Editing TypeScript — Specific editing features for TypeScript.
• Refactoring TypeScript — Useful refactorings from the TypeScript language service.
• Debugging TypeScript — Configure the debugger for your TypeScript project.

Common questions

Cannot launch program because corresponding JavaScript cannot be found

You’ve likely not set «sourceMap»: true in your tsconfig.json and the VS Code Node.js debugger can’t map your TypeScript source code to the running JavaScript. Turn on source maps and rebuild your project.

JavaScript и TypeScript в Visual Studio

Visual Studio 2022 предоставляет обширную поддержку для разработки JavaScript, как с помощью прямого использования JavaScript, также и с помощью языка программирования TypeScript, который разработан, чтобы повышать продуктивность и интерес во время разработки на JavaScript, особенно при разработке масштабных проектов. Код JavaScript или TypeScript в Visual Studio можно написать для многих типов приложений и служб.

Языковая служба JavaScript

Интерфейс JavaScript в Visual Studio 2022 обеспечивается тем же обработчиком, что и поддержка TypeScript. Этот обработчик улучшает поддержку компонентов, функциональность и интеграцию без дополнительной настройки.

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

Поддержка TypeScript

По умолчанию Visual Studio 2022 предоставляет языковую поддержку для файлов JavaScript и TypeScript, чтобы IntelliSense можно было использовать без определенной конфигурации проекта.

Для компиляции TypeScript Visual Studio предоставляет гибкие возможности выбора версии TypeScript для каждого отдельного проекта.

В сценариях компиляции MSBuild, таких как ASP.NET Core, пакет NuGet TypeScript — это рекомендуемый метод добавления поддержки компиляции TypeScript в проект. Visual Studio позволит добавить этот пакет при первом добавлении файла TypeScript в проект. К этому пакету также можно получить доступ в любое время с помощью диспетчера пакетов NuGet. При использовании пакета NuGet в проекте будет использоваться соответствующая версия языковой службы для поддержки языка. Примечание. Минимальная поддерживаемая версия этого пакета — 3.6.

Проекты, настроенные для npm, например для проектов Node.js, могут указать собственную версию языковой службы TypeScript, добавив пакет npm TypeScript. В поддерживаемых проектах версию можно указать с помощью диспетчера npm. Примечание. Минимальная поддерживаемая версия этого пакета — 2.1.

TypeScript SDK не рекомендуется использовать в Visual Studio 2022. Существующие проекты, основанные на пакете SDK, должны быть обновлены для использования пакета NuGet. Для проектов, которые не получается обновить сразу, пакет SDK по-прежнему доступен в Visual Studio Marketplace и в качестве дополнительного компонента в установщике Visual Studio.

Для проектов, которые разработаны в Visual Studio 2022, рекомендуется использовать пакеты NuGet и npm TypeScript. Они обеспечивают лучшую переносимость между разными средами и платформами. Дополнительные сведения см. в статьях Компиляция кода TypeScript (ASP.NET Core) и Компиляция кода TypeScript (Node.js).

Шаблоны проектов

Начиная с Visual Studio 2022, существует новый тип проекта JavaScript/TypeScript (.esproj), называемый системой проектов JavaScript (JSPS), который позволяет создавать автономные проекты Angular, React и Vue в Visual Studio. Такие интерфейсные проекты создаются с помощью средств CLI платформы, установленных на локальном компьютере, поэтому версию шаблона вы можете выбрать на свое усмотрение. Сведения о миграции из существующих проектов Node.js в новую систему проектов см. в разделе «Миграция проектов Node.js». Сведения о MSBuild для нового типа проекта см. в свойствах MSBuild для JSPS

В этих новых проектах можно выполнять модульные тесты JavaScript и TypeScript, легко добавлять и подключать проекты на основе API ASP.NET Core и скачивать модули npm с помощью диспетчера npm. Чтобы приступить к работе, ознакомьтесь с краткими руководствами и другой документацией. Дополнительные сведения см. в учебниках по Visual Studio | JavaScript и TypeScript.

Упрощенный обновленный шаблон доступен начиная с Visual Studio 2022 версии 17.5. По сравнению с шаблонами SPA ASP.NET, доступными в Visual Studio, esproj SPA-шаблоны для ASP.NET Core обеспечивают лучшее управление зависимостями npm, а также улучшенную поддержку сборки и публикации.

Visual Studio 2019 предоставляет обширную поддержку для разработки JavaScript, как с помощью прямого использования JavaScript, также и с помощью языка программирования TypeScript, который был разработан с целью повышения продуктивности и интереса во время разработки на JavaScript, особенно при разработке масштабных проектов. Код JavaScript или TypeScript в Visual Studio можно написать для многих типов приложений и служб.

Служба языка JavaScript

Опыт работы с JavaScript в Visual Studio 2019 обеспечивается тем же обработчиком, что и поддержка TypeScript. Это позволяет улучшить поддержку компонентов, функциональность и интеграцию сразу в готовом виде.

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

Поддержка TypeScript

Visual Studio 2019 предоставляет несколько вариантов для интеграции компиляции TypeScript в проект.

• Пакет NuGet для TypeScript. Когда в проект устанавливается пакет NuGet или TypeScript 3.2 или более новой версии, в редактор загружается соответствующая версия языковой службы TypeScript.
• Пакет npm для TypeScript. Когда в проект устанавливается пакет npm или TypeScript 2.1 или более новой версии, в редактор загружается соответствующая версия языковой службы TypeScript.
• Также как и стандартный SDK, который можно скачать из VS Marketplace, TypeScript SDK доступен в установщике Visual Studio по умолчанию.

Для проектов, которые разработаны в Visual Studio 2019, рекомендуется использовать пакеты TypeScript NuGet и TypeScript npm. Они обеспечивают лучшую портативность в различных средах и платформах. Дополнительные сведения см. в статьях Компиляция кода TypeScript (ASP.NET Core) и Компиляция кода TypeScript (Node.js).

Проекты

Приложения UWP на JavaScript больше не поддерживаются в Visual Studio 2019. Невозможно создать или открыть проекты UWP на JavaScript (файлы с расширением JSPROJ). Дополнительные сведения см. в документации по созданию прогрессивных веб-приложений (PWA), эффективно работающих на Windows.