相关文章 WordPress 没有插件 - TypeScript

对于使用 WordPress 平台开发的程序员来说，可能会遇到需要使用 TypeScript 编写代码的情况，但是 WordPress 平台并没有官方的 TypeScript 插件。在这篇文章中，我们将介绍一些解决方案来使用 TypeScript 编写 WordPress 插件。

1. 使用 Webpack 打包 TypeScript

TypeScript 是一种开源的编程语言，它扩展了 JavaScript 中的类型系统。Webpack 是一个模块打包器，可以将各种资源打包成静态资源。通过使用 Webpack 打包 TypeScript 可以使 TypeScript 代码在浏览器中运行。

安装依赖

npm i -D @types/webpack ts-loader typescript webpack webpack-cli

创建 webpack 配置

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

构建打包项目

npx webpack

2. 安装第三方 TypeScript 插件

除了使用 Webpack 打包 TypeScript 外，还可以直接安装第三方 TypeScript 插件。下面是一些可以在 WordPress 平台上使用的 TypeScript 插件：

• WordPress TypeScript Definitions - WordPress TypeScript 定义文件
• WordPress Admin TypeScript Definitions - WordPress 管理员 TypeScript 定义文件
• WordPress Block Editor TypeScript Definitions - WordPress 区块编辑器 TypeScript 定义文件

安装插件

npm i -D @wordpress/block-editor @wordpress/components @wordpress/data @wordpress/element @wordpress/i18n @wordpress/type @wordpress/hooks @wordpress/api-fetch
npm i -S @wordpress/server-side-render

3. 在 WordPress 插件中使用 TypeScript

我们可以使用 tsc 命令来将 TypeScript 文件编译成 JavaScript 文件。在 WordPress 插件中，可以将所有的 TypeScript 文件编译成一个 JavaScript 文件，然后在 HTML 页面中引入该文件。

编写 TypeScript 文件

// index.ts
import { BlockControls, BlockIcon, useBlockProps } from '@wordpress/block-editor';
import { useState } from '@wordpress/element';

const MyBlock = () => {
  const [value, setValue] = useState('');

  return (
    <div {...useBlockProps()}>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </div>
  );
};

export default {
  title: 'My Block',
  icon: <BlockIcon icon="admin-site" />,
  category: 'common',
  edit: MyBlock,
  save: () => null,
};

编译 TypeScript 文件

tsc index.ts

在 HTML 页面中引入 JavaScript 文件

<script src="index.js"></script>

以上是使用 TypeScript 编写 WordPress 插件的几种方法，希望对大家有所帮助。