Integrating TypeScript into a WordPress block development project using @wordpress/scripts improves code quality and maintainability. Follow these steps to configure TypeScript in your project.

Step 1: Install TypeScript and Type Definitions

First, install TypeScript and necessary type definitions by running the following command:

npm install --save-dev typescript @types/react @types/react-dom

Step 2: Create a tsconfig.json File

Create a tsconfig.json file in the root of your project and add the following configuration:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": "./",
    "paths": {
        "*": ["node_modules/*"],
        "@/*": ["src/*"]
      }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "build"]
}

Configuration Breakdown:

• Targets modern JavaScript (ESNext).
• Supports JSX with React.
• Enables strict type checking.
• Sets up an alias (@) for the src directory.

Step 3: Rename Files to .tsx or .ts

Rename JavaScript files to TypeScript format:

• .js → .ts
• .jsx → .tsx (if containing JSX)

Examples:

• index.js → index.tsx
• interactor-header.js → interactor-header.tsx

Step 4: Update webpack.config.js (Optional)

If you need custom Webpack configurations (e.g., for aliases), create a webpack.config.js file:

const defaultConfig = require('@wordpress/scripts/config/webpack.config');
const path = require('path');

module.exports = {
    ...defaultConfig,
    resolve: {
        ...defaultConfig.resolve,
        extensions: ['.ts', '.tsx', '.js', '.jsx'], // Add TypeScript extensions
        alias: {
            ...defaultConfig.resolve.alias,
            '@': path.resolve(__dirname, 'src'), // Alias for the 'src' directory
        },
    },
};

Step 5: Verify TypeScript Integration

Create a simple TypeScript component to test the setup:

import React from 'react';

type ExampleProps = {
    message: string;
};

const ExampleComponent: React.FC<ExampleProps> = ({ message }) => {
    return <div>{message}</div>;
};

export default ExampleComponent;

Usage:

Import and use this component in your project to verify everything works correctly.

Conclusion

By integrating TypeScript with @wordpress/scripts, you ensure a more robust and maintainable WordPress block development setup. Enjoy cleaner code, better autocompletion, and strict type safety. Happy coding!

Tags: typescript, wp-scripts

Categorised in: Wordpress