Setting Up TypeScript with Webpack or Vite

TypeScript has emerged as a powerful superset of JavaScript, adding static typing to the dynamic JavaScript language. This static typing helps catch errors early in the development process, making the codebase more robust and maintainable. When it comes to building web applications with TypeScript, two popular build tools - Webpack and Vite - can be used to set up the development environment. Webpack is a well - established module bundler that can handle a wide variety of assets and has a large ecosystem of plugins. Vite, on the other hand, is a relatively new build tool that offers extremely fast development server startup times, especially for large projects. In this blog, we will explore how to set up TypeScript projects using both Webpack and Vite.

Table of Contents

  1. Prerequisites
  2. Setting Up TypeScript with Webpack
    • Installation
    • Configuration
    • Example Project
  3. Setting Up TypeScript with Vite
    • Installation
    • Configuration
    • Example Project
  4. Common Practices
  5. Best Practices
  6. Conclusion
  7. References

Prerequisites

Before we start, make sure you have Node.js and npm (Node Package Manager) installed on your machine. You can download Node.js from the official website (https://nodejs.org/), and npm comes bundled with Node.js.

Setting Up TypeScript with Webpack

Installation

First, create a new directory for your project and navigate into it using the terminal. Then, initialize a new package.json file:

mkdir typescript-webpack-project
cd typescript-webpack-project
npm init -y

Next, install the necessary dependencies:

npm install typescript webpack webpack-cli ts-loader html-webpack-plugin --save-dev
  • typescript: The TypeScript compiler.
  • webpack and webpack-cli: The core Webpack packages.
  • ts-loader: A loader for Webpack to compile TypeScript files.
  • html-webpack-plugin: A plugin to generate an HTML file with the bundled JavaScript.

Configuration

Create a tsconfig.json file in the root of your project:

{
    "compilerOptions": {
        "target": "ES6",
        "module": "ESNext",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true
    }
}

Create a webpack.config.js file:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};

Example Project

Create a src directory in the root of your project. Inside the src directory, create an index.ts file:

function greet(name: string) {
    return `Hello, ${name}!`;
}

const message = greet('TypeScript with Webpack');
console.log(message);

Create an index.html file in the src directory:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript with Webpack</title>
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>

Add a build script to your package.json:

{
    "scripts": {
        "build": "webpack --config webpack.config.js"
    }
}

Run the build command:

npm run build

Setting Up TypeScript with Vite

Installation

Create a new directory for your Vite project and navigate into it:

mkdir typescript-vite-project
cd typescript-vite-project
npm init -y

Install Vite and TypeScript:

npm install vite typescript @types/node --save-dev

Configuration

Create a tsconfig.json file similar to the one in the Webpack project:

{
    "compilerOptions": {
        "target": "ES6",
        "module": "ESNext",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true
    }
}

Create a vite.config.ts file:

import { defineConfig } from 'vite';

export default defineConfig({
    resolve: {
        extensions: ['.ts', '.js']
    }
});

Example Project

Create a src directory and an index.ts file inside it:

function sayHi(name: string) {
    return `Hi, ${name}!`;
}

const greeting = sayHi('TypeScript with Vite');
console.log(greeting);

Create an index.html file in the root of your project:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript with Vite</title>
</head>
<body>
    <script type="module" src="/src/index.ts"></script>
</body>
</html>

Add scripts to your package.json:

{
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    }
}

Start the development server:

npm run dev

Common Practices

  • Separation of Concerns: Keep your TypeScript code organized into modules and classes. This makes the code more modular and easier to maintain.
  • Use Interfaces and Types: Define clear interfaces and types for your data structures. This helps in understanding the data flow and catches type - related errors early.
  • Error Handling: Implement proper error handling in your TypeScript code. Use try - catch blocks for asynchronous operations.

Best Practices

  • Linting: Use ESLint with TypeScript support to enforce coding standards and catch common errors. You can install eslint and @typescript-eslint/eslint-plugin and configure them according to your project needs.
  • Testing: Write unit tests for your TypeScript code using testing frameworks like Jest or Mocha. This helps in ensuring the correctness of your code.
  • Code Splitting: In Webpack projects, use code splitting techniques to reduce the initial bundle size. In Vite, take advantage of its built - in support for code splitting.

Conclusion

Both Webpack and Vite are powerful tools for setting up TypeScript projects. Webpack offers a more traditional and feature - rich approach with a large ecosystem of plugins, while Vite provides a faster development experience, especially for modern projects. By following the steps and best practices outlined in this blog, you can efficiently set up and develop TypeScript projects using either of these tools.

References