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

Введение

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

Предпосылки

Последняя версия Node, установленная на вашем устройстве.
Знакомство нпм

Шаг 1 — Начните проект TypeScript

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

mkdir typescript-project

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

cd typescript-project

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

npm i typescript --save-dev

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

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

npx tsc --init

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

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

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

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

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 и его компиляции.

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

Теперь вы можете начать писать код для своего проекта TypeScript. Создайте новый файл с именем индекс.ts Откройте его в редакторе. Вставьте следующий код TypeScript. индекс.ts Писать:

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

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

npx tsc

Вы заметите, что скомпилированный файл JavaScript index.js и файл исходной карты index.js.map добавлены в папку сборки, если вы указали это в файле 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 каждый раз при внесении изменений может быть утомительным. Чтобы решить эту проблему, можно перевести компилятор в режим наблюдения, который будет перекомпилировать код при каждом внесении изменений.

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

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:

npm i gts --save-dev

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

npx gts init

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

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

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

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

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

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

Результат

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