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

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

Область применения:Visual Studio Visual Studio для Mac Visual Studio Code

Используйте пакет 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 в Visual Studio Code

Любой JavaScript это по сути TypeScript, а все TypeScript-коды компилируются в хороший, чистый JavaScript. С официально разрешенным ES6 (EcmaScript2015), TypeScript продолжает предлагать отличную совместимость и новые функции и, таким образом, TypeScript остается отличным языком для разработки JavaScript. Этот фантастический язык теперь имеет великого компаньона: Visual Studio Code — нового редактора кода от Microsoft, который, кстати, был создан с помощью TypeScript! Поэтому, вполне естественно, что они прекрасно работают друг с другом.

Установка Visual Studio Code

Скачайте Visual Studio Code с официального сайта и запустите процесс установки. После завершения инсталляции вы можете приступить к написанию скриптов.

Если раньше вы пользовались разными версиями TypeScript, убедитесь, что %PATH% (системная переменная) обновлена и указывает на последнюю установленную версию. В противном случае некоторые вещи могут не работать.

Работа с TypeScript

Несмотря на то, JavaScript полностью поддерживается, потребуется кое-что сделать, чтобы добавить поддержку TypeScript в вашем проекте. Прежде всего, необходимо создать каталог, в котором будут храниться файлы проекта, например C:\projects\VSTest . Создайте в этой папке файл tsconfig.json. Этот файл будет вашим файлом проекта TypeScript, и он содержит настройки проекта TypeScript, опции компилятора и т.д. Выберите Файл -> Новый файл и нажмите на Файл -> Сохранить или клавиши Ctrl+S . Сохраните новый файл под именем tsconfig.json. Этот файл будет вашим файлом проекта TypeScript (что-то типа файла *.sln в C #), который содержит все настройки для компиляции и управления *.ts файлами. Подробнее о нем можно прочитать на официальном сайте, где имеется документация по tsconfig.json . Добавьте фигурные скобки <> чтобы открыть IntelliSense. Как только вы начнете печатать, вам будет показан такой экран:

Стандартная конфигурация выглядит следующим образом:

< "compilerOptions": < "target": "ES5", "noImplicitAny": true, "removeComments": true, "preserveConstEnums": true, "out": "output/project.js", "sourceMap": true >, "files": [ ] > 

Теперь, когда у нас есть файл проекта, мы можем начать создавать ts-файлы с кодом. Выберите в меню Файл -> Новый файл. Добавьте в него следующие строки и сохраните как hello-world.ts:

class Startup < public static main():number< console.log('Привет, мир!'); return 1; >> 

Здесь ничего сложного: обычный класс, который выводит текст на консоль и возвращает целое число 1 .

Билдинг и компиляция

Для начала нажмите Ctrl+Shift+B . Если это ваша первая попытка создания проекта, VS Code предложит вам создать Task Runner (Средство выполнения задач). Нажмите на Configure Task Runner (Настроить средство выполнения задач) для настройки конфигурационного файла.

Task Runner использует файл конфигурации, который дает VS Code указание использовать специальные исполнительные файлы с определенными параметрами. В нашем случае нам интересен TypeScript компилятор

После завершения процесса вы должны увидеть папку .vscode с файлом task.json.

Откройте файл task.json для редактирования. Создайте конфигурацию для того, чтобы VS Code запустил tsc.exe с hello-world.ts в качестве аргумента по аналогии с приведенным ниже примером:

Хоть всё и выглядит нормально, давайте попробуем воспользоваться возможностями файла tsconfig.json чтобы поменять некоторые параметры билдинга. Вы можете изменить предыдущее задание, чтобы оно выглядело так:

Опишем кратко определение задания:

• version: версия таска
• command: какой исполнительный файл вызвать
• showOutput: [ silent , always , never ]
• isShellCommand: запускает команду tsc (VS Code напрямую исполняет ее)
• args : пустой, т.к. переписан tsconfig.json
• problemMatcher: строка массива строк, основанная на предопределенных сопоставителях задач. Сейчас нет смысла это трогать

Информация об ошибках, возникающих в процессе разработки очень важна. Вот почему я всегда устанавливаю «showOuput»: «always» . Это изменяет поведение Окна Вывода, заставляя его всегда быть на виду в процессе разработки. Доступные значения определяют, как ведет себя окно вывода:

• silent: окно вывода появляется только в случае, если нет никаких ошибок в коде. Это значение по умолчанию
• always: окно вывода всегда на виду
• never: пользователь должен самостоятельно открывать окно вывода через меню «Вид», либо через сочетание клавиш Ctrl+Shift+U

На данном этапе можно нажать Ctrl+Shift+B чтобы начать разработку. Однако, хоть это и не выведет никаких сообщений об ошибках, никаких *.js или sourcemap файлов также не будет создано. Это потому, что мы не включили наш файл hello-world.ts в настройках tsconfig.json>files[] . Добавьте это, сохраните файл и начните заново.

Теперь в каталоге вашего проекта вы должны увидеть следующие файлы:

С добавлением новых файлов и ростом вашего проекта, обязательно убедитесь в том, что включили все *.ts -файлы, которые хотите скомплировать, в tsconfig.json file . Это поможет убедиться в том, что весь ваш код переводится в JavaScript и сливается в один файл, как в наших предыдущих настройках.

Ошибки при создании

Visual Studio Code отличная система предупреждения об ошибках. У вас появляется несколько вариантов отображения ошибок. Первый – через IntelliSense, как на картинке ниже:

Второй – маленький значок, говорящий о том, что что-то идет не так. Значок располагается в левом нижнем углу на панели задач:

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

Резюме

Visual Studio Code отлично подходит при работе с TypeScript. В следующем посте Gulp и Visual Studio Code я расскажу как добавить Gulp к проекту для выполнения различных задач: компиляции ваших *.ts файлов, минимизации кода, компиляции LESS/SASS и т.д.

Использование 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 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.

Installing 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 

Another option is to install the TypeScript compiler locally in your project ( npm install —save-dev typescript ) and has the benefit of avoiding possible interactions with other TypeScript projects you may have.

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

IntelliSense shows you intelligent code completion, hover information, and signature help so that you can write code more quickly and correctly.

VS Code provides IntelliSense for individual TypeScript files as well as TypeScript tsconfig.json projects.

Hover information

Hover over a TypeScript symbol to quickly see its type information and relevant documentation:

You can also show the hover information at the current cursor position with the ⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I ) keyboard shortcut.

Signature help

As you write a TypeScript function call, VS Code shows information about the function signature and highlights the parameter that you are currently completing:

Signature help is shown automatically when you type a ( or , within a function call. Use ⇧⌘Space (Windows, Linux Ctrl+Shift+Space ) to manually trigger signature help.

Snippets

In addition to smart code completions, VS Code also includes basic TypeScript snippets that are suggested as you type.

You can install extensions to get additional snippets or define your own snippets for TypeScript. See User Defined Snippets for more information.

Tip: You can disable snippets by setting editor.snippetSuggestions to «none» in your settings file. If you’d like to see snippets, you can specify the order relative to suggestions; at the top ( «top» ), at the bottom ( «bottom» ), or inlined ordered alphabetically ( «inline» ). The default is «inline» .

Errors and warnings

The TypeScript language service will analyze your program for coding problems and report errors and warnings:

• In the Status bar, there is a summary of all errors and warnings counts.
• You can click on the summary or press ⇧⌘M (Windows, Linux Ctrl+Shift+M ) to display the PROBLEMS panel with a list of all current errors.
• If you open a file that has errors or warnings, they will be rendered inline with the text and in the overview ruler.

To loop through errors or warnings in the current file, you can press F8 or ⇧F8 (Windows, Linux Shift+F8 ) which will show an inline zone detailing the problem and possible Code Actions (if available):

Code navigation

Code navigation lets you quickly navigate TypeScript projects.

• Go to Definition F12 — Go to the source code of a symbol definition.
• Peek Definition ⌥F12 (Windows Alt+F12 , Linux Ctrl+Shift+F10 ) — Bring up a Peek window that shows the definition of a symbol.
• Go to References ⇧F12 (Windows, Linux Shift+F12 ) — Show all references to a symbol.
• Go to Type Definition — Go to the type that defines a symbol. For an instance of a class, this will reveal the class itself instead of where the instance is defined.
• Go to Implementation ⌘F12 (Windows, Linux Ctrl+F12 ) — Go to the implementations of an interface or abstract method.

You can navigate via symbol search using the Go to Symbol commands from the Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ).

• Go to Symbol in File ⇧⌘O (Windows, Linux Ctrl+Shift+O )
• Go to Symbol in Workspace ⌘T (Windows, Linux Ctrl+T )

Formatting

VS Code includes a TypeScript formatter that provides basic code formatting with reasonable defaults.

Use the typescript.format.* settings to configure the built-in formatter, such as making braces appear on their own line. Or, if the built-in formatter is getting in the way, set «typescript.format.enable» to false to disable it.

For more specialized code formatting styles, try installing one of the formatting extensions from the VS Code Marketplace.

Refactoring

VS Code includes some handy refactorings for TypeScript such as Extract function and Extract constant. Just select the source code you’d like to extract and then click on the light bulb in the gutter or press ( ⌘. (Windows, Linux Ctrl+. ) ) to see available refactorings.

See Refactoring TypeScript for more information about refactorings and how you can configure keyboard shortcuts for individual refactorings.

Rename

One of the simplest refactorings is to rename a method or variable. Press F2 to rename the symbol under the cursor across your TypeScript project:

Debugging

VS Code comes with great debugging support for TypeScript, including support for sourcemaps. Set breakpoints, inspect objects, navigate the call stack, and execute code in the Debug Console. See Debugging TypeScript and the overall Debugging topic to learn more.

Debug client side

You can debug your client-side code using a browser debugger such as the built-in Edge and Chrome debugger, or the Debugger for Firefox.

Debug server side

Debug Node.js in VS Code using the built-in debugger. Setup is easy and there is a Node.js debugging tutorial to help you.

Linters

Linters provides warnings for suspicious looking code. While VS Code does not include a built-in TypeScript linter, TypeScript linter extensions available in the Marketplace.

ESLint is a popular linter, which also supports TypeScript. The ESLint extension integrates ESLint into VS Code so you can see linting errors right in the editor and even quickly fix many of them with Quick Fixes. The ESLint plugin guide details how to configure ESLint for your TypeScript projects.

TypeScript extensions

VS Code provides many features for TypeScript out of the box. In addition to what comes built-in, you can install an extension for greater functionality.

Tip: Click on an extension tile above to read the description and reviews to decide which extension is best for you. See more in the Marketplace.

Next steps

To learn more, see:

• TypeScript tutorial — Create a simple Hello World TypeScript in VS Code.
• Editing TypeScript — Specific editing features for TypeScript.
• Refactoring TypeScript — Useful refactorings from the TypeScript language service.
• Compiling TypeScript — Compile TypeScript to a JavaScript target version.
• Debugging TypeScript — Learn about debugging TypeScript both server and client-side with VS Code.

Common questions

Can I use the version of TypeScript that ships with VS 2022?

No, the TypeScript language service that ships with Visual Studio 2019 and 2022 isn’t compatible with VS Code. You will need to install a separate version of TypeScript from npm.

How can I use the latest TypeScript beta with VS Code?

The simplest way to try out the latest TypeScript features in VS Code is to install the JavaScript and TypeScript Nightly extension.