3.1 Установка Node.js и npm
Сейчас мы с вами подробно рассмотрим процесс установки и настройки TypeScript через npm (Node Package Manager), стандартный менеджер пакетов для JavaScript.
Предварительные требования
Перед установкой TypeScript необходимо убедиться, что на вашем компьютере установлены Node.js и npm. Node.js включает в себя npm, поэтому установка Node.js автоматически устанавливает и npm.
Установка Node.js и npm
Для установки Node.js и npm выполните следующие шаги:
- Перейдите на официальный сайт Node.js (https://nodejs.org/).
- Скачайте установочный пакет для вашей операционной системы.
- Запустите установочный пакет и следуйте инструкциям по установке.
После установки Node.js и npm, вы можете проверить их наличие и версии, выполнив следующие команды в терминале:
node -v
npm -v
Установка TypeScript
TypeScript можно установить глобально или локально для конкретного проекта.
Глобальная установка TypeScript
Глобальная установка TypeScript позволяет использовать команду tsc (TypeScript Compiler) из любой директории на вашем компьютере.
Для глобальной установки TypeScript выполните команду:
npm install -g typescript
После установки вы можете проверить версию TypeScript и его работоспособность, с помощью такой команды:
tsc -v
Локальная установка TypeScript
Локальная установка TypeScript полезна, если вы хотите использовать разные версии TypeScript для различных проектов. В этом случае TypeScript будет установлен в директорию node_modules вашего проекта, и вы сможете управлять зависимостями через файл package.json в той же директории.
Для локальной установки TypeScript выполните следующие шаги:
- Инициализируйте новый проект npm, если это еще не сделано:
Эта команда создаст файл package.json с настройками вашего проекта.Terminal
npm init -y - Установите TypeScript как зависимость для разработки вашего проекта:
После установки вы можете найти TypeScript в директории node_modules/.bin и использовать его в вашем проекте.Terminal
npm install --save-dev typescript
3.2 Настройка TypeScript проекта
После установки TypeScript важно правильно настроить проект для работы с ним. Настройка включает создание конфигурационного файла tsconfig.json, который определяет параметры компиляции и исходные файлы проекта.
Создание файла tsconfig.json
Файл tsconfig.json используется для настройки параметров компиляции TypeScript. Вы можете создать его вручную или автоматически с помощью команды:
npx tsc --init
Эта команда создаст базовый файл tsconfig.json с предустановленными значениями. Вы можете изменить этот файл в соответствии с требованиями вашего проекта.
Основные настройки файла tsconfig.json
Некоторые из основных настроек, которые могут быть полезны в файле tsconfig.json, включают:
- compilerOptions: опции компилятора, такие как версия ECMAScript/JavaScript браузера, модули, директории вывода и т. д.
- include: массив путей к файлам, которые должны быть включены в компиляцию
- exclude: массив путей к файлам, которые должны быть исключены из компиляции
Пример базового tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"outDir": "./dist"
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}
Где:
- target: определяет версию ECMAScript, в которую будет транслироваться TypeScript код. В данном случае используется es5
- module: определяет систему модулей. Здесь используется commonjs
- strict: включает строгий режим проверки типов
- esModuleInterop: включает совместимость с модулями ES
- skipLibCheck: пропускает проверку типов в файлах деклараций
- forceConsistentCasingInFileNames: обеспечивает консистентность регистра имен файлов
- outDir: указывает директорию для вывода скомпилированных файлов
- include: указывает директории и файлы, которые должны быть включены в компиляцию
- exclude: указывает директории и файлы, которые должны быть исключены из компиляции
Подробнее об этих параметрах мы поговорим в следующих лекциях.
3.3 Интеграция TypeScript с системой сборки
Для удобства использования TypeScript в процессе разработки можно интегрировать его с системой сборки проекта. Например, вы можете использовать такие инструменты как Webpack или Gulp для автоматической компиляции TypeScript кода.
Интеграция с Webpack
Webpack — это популярный модульный сборщик для JavaScript приложений. Вы можете использовать ts-loader для интеграции TypeScript с Webpack. Вот пример того, как это сделать:
- Установите необходимые пакеты:
Terminal
npm install --save-dev webpack webpack-cli ts-loader - Создайте файл конфигурации Webpack — webpack.config.js:
JavaScript
const path = require('path'); module.exports = { entry: './src/index.ts', module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ } ] }, resolve: { extensions: ['.tsx', '.ts', '.js'] }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } }; - Добавьте скрипт сборки в package.json:
JSON
{ "scripts": { "build": "webpack" } } - Теперь вы можете скомпилировать ваш TypeScript проект с помощью команды:
Terminal
npm run build
Интеграция с Gulp
Gulp — это инструмент автоматизации любых задач, который также может использоваться для компиляции TypeScript.
- Установите необходимые пакеты:
Terminal
npm install --save-dev gulp gulp-typescript - Создайте файл конфигурации Gulp gulpfile.js:
JavaScript
const gulp = require('gulp'); const ts = require('gulp-typescript'); const tsProject = ts.createProject('tsconfig.json'); gulp.task('scripts', function () { return tsProject.src() .pipe(tsProject()) .pipe(gulp.dest('dist')); }); gulp.task('default', gulp.series('scripts')); - Добавьте скрипт сборки в package.json:
JSON
{ "scripts": { "build": "gulp" } } - 4. Теперь вы можете скомпилировать ваш TypeScript проект с помощью команды:
Terminal
npm run build
Мы подробно рассмотрим с вами системы сборки проектов, но уже через несколько уровней — ближе к концу изучения темы TypeScript.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ