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

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

Требования

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

  • Последняя версия Node, установленная на вашем компьютере. Инструкции по установке зависят от вашего дистрибутива: mac OSDebianCentOSUbuntu.
  • Умение работать с npm. Пакетный менеджер npm поставляется с Node. Чтобы узнать больше о работе с npm, ознакомьтесь с руководством Управление модулями Node.js с помощью npm и package.json.

1: Инициализация проекта TypeScript

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

mkdir typescript-project

Перейдите в него:

cd typescript-project

Сюда вы можете установить TypeScript:

npm i typescript --save-dev

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

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

npx tsc --init

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

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

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

Откройте файл tsconfig.json в любом редакторе кода, и вы увидите следующие конфигурации по умолчанию:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true
  }
}

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

Вы можете внести свои правки в конфигурацию TypeScript. Откройте файл tsconfig.json и добавьте следующие пары ключ-значение:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "outDir": "dist",
    "sourceMap": true
  }
}

Если присвоить outDir значение dist, при компиляции будет создана папка по имени dist. При запуске команды npx tsc для компиляции файла TypeScript скомпилированный файл JavaScript будет помещен в файл dist.

Также при компиляции файла TypeScript будет создан sourcemap – это файл, который сопоставляет новый скомпилированный файл JavaScript с исходным файлом TypeScript. Если в вашем коде есть ошибки или вам необходимо внести изменения, лучше отлаживать исходный код, а не скомпилированный. Вот почему полезны файлы sourcemap. Установив для параметра sourceMap значения true, вы сможете быстро устранять ошибки в исходном файле TypeScript.

Переходим к написанию кода приложения TypeScript и его компиляции.

2: Компиляция проекта TypeScript

Прежде чем приступить к написанию кода своего проекта TypeScript, создайте в проекте typescript папку src, а внутри src создайте файл index.ts.

Затем откройте index.ts в редакторе кода и вставьте в этот файл следующий код TypeScript:

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

Имея этот код, index.ts готов к компиляции:

npx tsc index.ts

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

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var world = 'world';
function hello(word) {
    if (word === void 0) { word = world; }
    return "Hello " + world + "! ";
}
exports.hello = hello;
//# sourceMappingURL=index.js.map

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

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

npx tsc -w

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

3: Настройка TSLint для проекта TypeScript

Использование линтера при написании кода поможет вам быстро выявить несоответствия, синтаксические ошибки и упущения. Стандартный линтер TypeScript называется TSLint (он считается устаревшим и вместо него рекомендуется использовать ESLint).

Читайте также: Форматирование кода в Visual Studio Code с помощью ESLint

Чтобы установить TSLint, выполните следующую команду:

npm i tslint --save-dev

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

npx tslint --init

Команда инициализации TSLint создаст файл tslint.json, в нем хранятся все конфигурации TSLint в tslint.json. Откройте tslint.json в редакторе кода. Вы увидите следующие стандартные конфигурации:

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended"
  ],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

Линтеры подчеркивают ошибки в коде. Чтобы включить это поведение в редакторе кода, необходимо установить расширение TSLint.

Примечание: Если после установки расширение не будет работать, попробуйте установить в редакторе расширение ESLint.

Вернитесь в файл index.ts в редакторе кода. Вы заметите, что в двух местах появилось подчеркивание: одинарные кавычки должны быть двойными, а сам файл должен заканчиваться новой строкой. Оба этих замечания не являются ошибками как таковыми, это стилистические рекомендации, которые отслеживает TSLint. Вы можете изменить это поведение в файле tslint.json. Это делается в рамках пары ключ-значение rules:

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended"
  ],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

Допустим, вы не хотите включать новую строку в конец каждого файла. Вы можете отключить эту рекомендацию с помощью правила eofline. Установите для eofline значение false, после чего подчеркивание пропадет:

"rules": {
  "eofline": false
},

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

Чтобы использовать руководство по стилю Airbnb, сначала необходимо установить его:

npm install tslint-config-airbnb

Установив его, нужно убедиться, что конфигурации в tslint.json поддерживают его. Ключ extends должен указывать на недавно установленный tslint-config-airbnb:

{
    "defaultSeverity": "error",
    "extends": "tslint-config-airbnb",
    "jsRules": {},
    "rules": {
        "eofline": false
    },
    "rulesDirectory": []
}

После интеграции руководства по стилю Airbnb в tslint.json линтер больше не будет выдавать сообщение об ошибке при использовании одинарных кавычек. У Google также есть широко используемое руководство по написанию кода TypeScript под названием gts, в котором есть еще более полезные функции.

4: Использование gts

Установив линтер, вы можете использовать сторонние инструменты, чтобы избежать необходимости настраивать линтинг и конфигурацию в файле tsconfig.json. Google TypeScript Style (сокращенно gts) – один из таких инструментов. Он представляет собой руководство по написанию кода, линтер и автоматический корректор кода – все в одном. Инструмент gts поможет вам быстро запустить новый проект TypeScript и избежать сбоев в его работе. Также gts предлагает довольно необычную конфигурацию по умолчанию, которую не придется долго настраивать.

Чтобы протестировать gts, давайте попробуем создать новую папку проекта. Когда папка проекта будет готова, инициализируйте gts с помощью следующей команды:

npx gts init

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

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

Примечание: Изучите документацию по gts, чтобы узнать, как интегрировать gts с линтером ESLint.

Чтобы использовать TSLint в проекте TypeScript, вам все равно необходимо установить TSLint и запустить npx tslint –init, чтобы создать конфигурационный файл tslint.json. В предыдущем разделе мы расширили TSLint, интегрировав руководство Airbnb. Для gts нужно сделать то же самое:

{
  "defaultSeverity": "error",
  "extends": [
    "./node_modules/gts/tslint.json"
  ],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

Теперь TSLint будет следовать правилам линтинга, установленным gts.

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

Заключение

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

Читайте также: Использование TypeScript в Visual Studio Code

Tags: , , ,

Добавить комментарий