Mastering Husky with TypeScript: A Comprehensive Guide

Table of Contents#

1. Fundamental Concepts
2. Installation and Setup
3. Usage Methods
4. Common Practices
5. Best Practices
6. Conclusion
7. References

Fundamental Concepts#

What is Husky?#

Husky is a Git hook manager that simplifies the process of setting up and managing Git hooks. Git hooks are scripts that Git executes before or after certain events, such as committing, pushing, or merging. Husky allows you to define these scripts in a more user-friendly way, making it easier to enforce rules and automate tasks in your development workflow.

What is TypeScript?#

TypeScript is a statically typed superset of JavaScript that compiles to plain JavaScript. It adds optional static typing to JavaScript, which helps catch errors at compile-time rather than runtime. TypeScript is widely used in modern web development to build large-scale applications with better maintainability and code quality.

Why Combine Husky and TypeScript?#

Combining Husky and TypeScript allows you to enforce TypeScript-specific rules during the Git workflow. For example, you can run TypeScript compilation and linting before a commit to ensure that only valid TypeScript code is committed to the repository. This helps prevent bugs from being introduced into the codebase and maintains a high level of code quality.

Installation and Setup#

Prerequisites#

• Node.js and npm (Node Package Manager) installed on your machine.
• A TypeScript project set up with a tsconfig.json file.

Installing Husky#

First, navigate to your project directory in the terminal and run the following command to install Husky as a development dependency:

npm install husky --save - dev

Initializing Husky#

After installation, initialize Husky by running the following command:

npx husky install

This command creates a .husky directory in your project root, where all the Git hooks will be stored.

Integrating with npm Scripts#

To make it easier to manage Husky hooks, you can add a prepare script to your package.json file. This script will automatically install Husky hooks when the project is set up.

{
  "scripts": {
    "prepare": "husky install"
  }
}

Usage Methods#

Adding a Pre-commit Hook for TypeScript Compilation#

To add a pre-commit hook that runs the TypeScript compiler before every commit, you can use the following command:

npx husky add .husky/pre - commit "npx tsc --noEmit"

This command creates a pre - commit hook in the .husky directory that runs the TypeScript compiler in --noEmit mode. The --noEmit option checks the TypeScript code for errors without generating any output files. If there are any compilation errors, the commit will be aborted.

Adding a Pre-push Hook for Linting#

You can also add a pre-push hook to run a TypeScript linter, such as ESLint, before pushing changes to the remote repository. First, install ESLint and the necessary TypeScript plugins:

npm install eslint @typescript - eslint/parser @typescript - eslint/eslint - plugin --save - dev

Then, create a pre-push hook:

npx husky add .husky/pre - push "npx eslint src/**/*.ts"

This hook will run ESLint on all TypeScript files in the src directory. If there are any linting errors, the push will be aborted.

Common Practices#

Running Multiple Commands in a Hook#

You can run multiple commands in a single hook by separating them with semicolons. For example, to run both TypeScript compilation and linting before a commit, you can modify the pre-commit hook as follows:

npx husky add .husky/pre - commit "npx tsc --noEmit; npx eslint src/**/*.ts"

Skipping Hooks#

Sometimes, you may need to skip the Git hooks, for example, when you are making a quick fix and don't want to run all the checks. You can use the --no - verify flag when committing or pushing:

git commit --no - verify -m "Quick fix"
git push --no - verify

Best Practices#

Keeping Hooks Lightweight#

Avoid running time-consuming tasks in Git hooks, as this can slow down the development workflow. For example, instead of running a full test suite in a pre-commit hook, you can run only the relevant unit tests or use a caching mechanism.

Documenting Hooks#

Add comments to your hook scripts to explain what each command does. This makes it easier for other developers to understand the purpose of the hooks and maintain them in the future.

# Run TypeScript compilation and linting before commit
npx tsc --noEmit; npx eslint src/**/*.ts

Using Conditional Execution#

You can use conditional statements in your hook scripts to run commands only when certain conditions are met. For example, you can run the TypeScript compiler only if there are changes to TypeScript files:

if [ $(git diff --name - only --cached | grep -c '\.ts$') -gt 0 ]; then
  npx tsc --noEmit
fi

Conclusion#

Husky and TypeScript are powerful tools that, when combined, can significantly improve the development workflow and code quality. By using Husky to enforce Git hooks, you can catch TypeScript errors early in the development process and maintain a high level of code consistency. By following the installation steps, usage methods, common practices, and best practices outlined in this blog post, you can effectively integrate Husky with your TypeScript projects.

References#

• Husky Documentation
• TypeScript Documentation
• ESLint Documentation