Поиск по сайту:

Как настроить новый проект TypeScript

Введение

Возможно, вы уже работали с TypeScript, когда использовали стартовый проект или такой инструмент, как Angular CLI. В этом руководстве вы узнаете, как настроить проект TypeScript без помощи новичка. Вы также узнаете, как работает компиляция в TypeScript и как использовать линтер с вашим проектом TypeScript.

Предпосылки

Для выполнения этого урока вам потребуется следующее:

  • Последняя версия Node, установленная на вашем компьютере. Этого можно добиться, следуя руководству по установке Node.js и созданию локальной среды разработки.
  • Знакомство с npm. npm поставляется с Node. Чтобы узнать больше о работе с npm, ознакомьтесь с этим руководством по использованию модулей Node.js с npm и package.json.

Шаг 1 — Запуск проекта TypeScript

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

  1. mkdir typescript-project

Теперь перейдите в каталог вашего проекта:

  1. cd typescript-project

После настройки каталога проекта вы можете установить TypeScript:

  1. npm i typescript --save-dev

Важно включить флаг --save-dev, потому что он сохраняет TypeScript как зависимость разработки. Это означает, что TypeScript абсолютно необходим для разработки вашего проекта.

Установив TypeScript, вы можете инициализировать свой проект TypeScript с помощью следующей команды:

  1. npx tsc --init

npm также включает инструмент под названием npx, который запускает исполняемые пакеты. npx позволяет нам запускать пакеты без необходимости их глобальной установки.

Здесь используется команда tsc, так как это встроенный компилятор TypeScript. Когда вы пишете код на TypeScript, запуск tsc преобразует или скомпилирует ваш код в JavaScript.

Использование флага --init в приведенной выше команде инициализирует ваш проект путем создания файла tsconfig.json в каталоге вашего проекта typescript-project. Этот файл tsconfig.json позволит вам дополнительно настроить взаимодействие TypeScript и компилятора tsc. Вы можете удалять, добавлять и изменять конфигурации в этом файле в соответствии с вашими потребностями.

Откройте tsconfig.json в своем редакторе:

  1. nano tsconfig.json

Вы, и вы найдете конфигурацию по умолчанию. Вариантов будет много, большинство из которых закомментированы:

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Projects */
    // "incremental": true,                              /* Enable incremental compilation */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
    
    . . .
  }
}

Вы можете настроить конфигурацию TypeScript. В файле tsconfig.json. Например, вы можете раскомментировать запись outDir и установить для нее значение ./build, что поместит все ваши скомпилированные файлы TypeScript в этот каталог.

Установив TypeScript и файл tsconfig.json, вы можете перейти к кодированию своего приложения TypeScript и его компиляции.

Примечание. Шаг 3 ниже заменит многие из ваших конфигураций разумными значениями по умолчанию, но эти изменения помогут вам сразу начать работу.

Шаг 2 — Компиляция проекта TypeScript

Теперь вы можете приступить к кодированию вашего проекта TypeScript. Откройте новый файл с именем index.ts в вашем редакторе. Напишите следующий код TypeScript в index.ts:

const world = 'world';

export function hello(who: string = world): string {
  return `Hello ${who}! `;
}

С этим кодом TypeScript ваш проект готов к компиляции. Запустите tsc из каталога вашего проекта:

  1. npx tsc

Вы заметите, что скомпилированный файл JavaScript index.js и файл исходной карты index.js.map были добавлены в папку build, если вы указали это в файле tsconfig.js.

Откройте index.js, и вы найдете следующий скомпилированный код JavaScript:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.hello = void 0;
const world = 'world';
function hello(who = world) {
    return `Hello ${who}! `;
}
exports.hello = hello;

Запуск компилятора TypeScript каждый раз, когда вы вносите изменения, может быть утомительным. Чтобы исправить это, вы можете перевести компилятор в режим наблюдения. Установка компилятора в режим наблюдения означает, что ваш файл TypeScript будет перекомпилироваться каждый раз, когда вносятся изменения.

Вы можете активировать режим просмотра с помощью следующей команды:

  1. npx tsc -w

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

Шаг 3 — Использование стиля Google TypeScript для линтинга и исправления кода

Использование линтера при кодировании поможет вам быстро найти несоответствия, синтаксические ошибки и упущения в вашем коде. Кроме того, руководство по стилю не только поможет вам убедиться, что ваш код правильно оформлен и непротиворечив, но и позволит вам использовать дополнительные инструменты для обеспечения соблюдения этого стиля. Распространенным инструментом для них является eslint, который хорошо работает со многими IDE, помогая в процессе разработки.

Теперь, когда ваш проект настроен, вы можете использовать другие инструменты в экосистеме TypeScript, чтобы избежать необходимости вручную настраивать линтинг и конфигурацию в файле tsconfig.json. Google TypeScript Style — один из таких инструментов. Google TypeScript Style, известный как GTS, представляет собой руководство по стилю, линтер и автоматический корректор кода — все в одном. Использование GTS поможет вам быстро запустить новый проект TypeScript и не сосредотачиваться на мелких организационных деталях, чтобы сосредоточиться на разработке вашего проекта. GTS также предлагает самостоятельную конфигурацию по умолчанию. Это означает, что вам не придется делать много настроек конфигурации.

Начните с установки GTS:

  1. npm i gts --save-dev

Отсюда инициализируйте GTS с помощью следующей команды:

  1. npx gts init

Приведенная выше команда сгенерирует все, что вам нужно для начала работы с TypeScript, включая файл tsconfig.json и настройку linting. Также будет создан файл package.json, если у вас его еще нет.

Запуск npx gts init также добавит полезные скрипты npm в ваш файл package.json. Например, теперь вы можете запустить npm run compile для компиляции своего проекта TypeScript. Чтобы проверить наличие ошибок линтинга, теперь вы можете запустить npm run check.

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

Кроме того, поскольку линтер eslint TypeScript имеет ряд поддерживаемых версий TypeScript, более новые версии языка могут выходить за пределы этого диапазона. В этом случае eslint предупредит вас о таком. Есть большая вероятность, что он продолжит работать нормально, но если у вас возникнут проблемы, вы можете понизить версию TypeScript, указав ее при установке. Например, npm i typescript@4.4.2 --save-dev.

Теперь GTS установлен и правильно интегрирован в ваш проект TypeScript. Использование GTS в будущих проектах позволит вам быстро настроить новые проекты TypeScript с необходимыми конфигурациями.

Поскольку GTS предлагает самоуверенный подход без настройки, он будет использовать свои собственные разумные правила проверки и исправления ошибок. Они следуют многим рекомендациям, но если вам нужно каким-либо образом изменить правила, вы можете сделать это, расширив правила eslint по умолчанию. Для этого создайте в каталоге вашего проекта файл с именем .eslintrc, который расширяет правила стиля:

---
extends:
  - './node_modules/gts'

Это позволит вам добавлять или изменять правила стиля, предоставляемые GTS.

Заключение

В этом руководстве вы начали проект TypeScript с настроенными конфигурациями. Вы также интегрировали стиль Google TypeScript в свой проект TypeScript. Использование GTS поможет вам быстро приступить к работе с новым проектом TypeScript. С GTS вам не нужно вручную настраивать конфигурацию или интегрировать линтер в рабочий процесс.

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