9.1 Проверка кода с помощью Lint-staged и Husky
В экосистеме TypeScript существует множество утилит и библиотек, которые помогают разработчикам писать качественный, безопасный и эффективный код. Ниже мы рассмотрим некоторые из лучших утилит и библиотек для TypeScript, которые могут значительно улучшить ваш рабочий процесс и качество кода.
Lint-staged и Husky
Шаг 1: Установка необходимых пакетов
Первым шагом будет установка lint-staged и husky (инструмента, который позволяет легко настраивать git-хуки). Для этого используйте npm или yarn:
npm install lint-staged husky --save-dev
Или с помощью yarn:
yarn add lint-staged husky --dev
Шаг 2: Настройка Husky
Husky позволяет запускать скрипты на определенных этапах жизненного цикла git. Чтобы lint-staged автоматически запускался при попытке сделать коммит, нужно настроить Husky на запуск соответствующего скрипта.
Сначала инициализируйте Husky:
npx husky install
Затем создайте git-хук для выполнения проверки перед коммитом:
npx husky add .husky/pre-commit "npx lint-staged"
Эта команда создаст файл .husky/pre-commit, который будет запускать lint-staged перед каждым коммитом.
Шаг 3: Настройка Lint-staged
Теперь вам нужно настроить lint-staged для выполнения линтинга на измененных файлах. Настройка lint-staged может быть выполнена через файл package.json или через отдельный файл конфигурации .lintstagedrc.json.
Пример настройки в package.json:
{
"lint-staged": {
"*.js": "eslint --fix",
"*.ts": "eslint --fix",
"*.css": "stylelint --fix"
}
}
В этом примере lint-staged будет автоматически запускать ESLint для всех .js и .ts файлов, а также Stylelint для .css файлов. Флаг --fix указывает линтерам автоматически исправлять ошибки, где это возможно.
Вы также можете использовать отдельный файл .lintstagedrc.json для конфигурации:
{
"*.js": "eslint --fix",
"*.ts": "eslint --fix",
"*.css": "stylelint --fix"
}
Шаг 4: Проверка работы
После настройки вы можете протестировать работу lint-staged и Husky. Попробуйте сделать изменение в любом из файлов, который подпадает под линтинг, и затем выполнить коммит:
git add .
git commit -m "Test lint-staged"
Если в измененных файлах есть ошибки, lint-staged остановит процесс коммита и выведет информацию о проблемах. Это поможет вам исправить ошибки до того, как они попадут в репозиторий.
9.2 Библиотеки для типизации и утилиты
1. io-ts
io-ts — это библиотека для выполнения проверок типов во время выполнения. Она полезна для валидации данных, полученных из внешних источников.
Установка io-ts:
npm install io-ts
Пример использования:
import * as t from 'io-ts';
const User = t.type({
id: t.number,
name: t.string,
});
type UserType = t.TypeOf<typeof User>>;
const result = User.decode({ id: 1, name: 'John' });
if (result._tag === 'Right') {
const user: UserType = result.right;
console.log(user);
} else {
console.error('Invalid data');
}
2. fp-ts
fp-ts — это библиотека для функционального программирования в TypeScript. Она предоставляет структуры данных и функции для работы с ними в функциональном стиле.
Установка fp-ts:
npm install fp-ts
Пример использования:
import { Option, some, none, map } from 'fp-ts/lib/Option';
const maybeNumber: Option<number> = some(5);
const result = map((n: number) => n * 2)(maybeNumber);
console.log(result); // Some(10)
3. TypeORM
TypeORM — это ORM для TypeScript и JavaScript, который позволяет работать с базами данных в объектно-ориентированном стиле.
Установка и настройка TypeORM:
npm install typeorm reflect-metadata
Пример использования:
import 'reflect-metadata';
import { createConnection, Entity, PrimaryGeneratedColumn, Column } from 'typeorm';
@Entity()
class User {
@PrimaryGeneratedColumn()
id: number;
@Column()
name: string;
}
createConnection({
type: 'sqlite',
database: 'test.sqlite',
entities: [User],
synchronize: true,
}).then(async connection => {
const userRepository = connection.getRepository(User);
const user = new User();
user.name = 'John';
await userRepository.save(user);
console.log('User saved');
});
9.3 Инструменты для сборки
1. Webpack
Webpack — это популярный бандлер для JavaScript и TypeScript приложений. Он позволяет собирать модули в единый файл и поддерживает множество плагинов и загрузчиков.
Установка и настройка Webpack:
npm install --save-dev webpack webpack-cli ts-loader
Пример конфигурации webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
2. Parcel
Parcel — это популярный, простой в использовании сборщик модулей, который требует минимальной конфигурации и поддерживает современные возможности JavaScript "из коробки". Он идеально подходит как для небольших, так и для крупных проектов, обеспечивая быструю сборку и автоматическую оптимизацию.
Установка и использование Parcel:
npm install --save-dev parcel
Запуск Parcel:
npx parcel src/index.html
На этом все.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ