Automatically Generating TypeScript Types from PHP Classes for WordPress Backend

When using WordPress as a backend, keeping PHP and TypeScript types in sync can be difficult; this article presents a method to automatically generate TypeScript type definitions from PHP classes, establishing a clear contract between front‑end and back‑end.

Problem: Keeping Types Synchronized

In projects that combine a PHP (WordPress) backend with a TypeScript (React) frontend, manually maintaining two sets of type definitions is error‑prone and can cause mismatched data structures.

The proposed strategy generates TypeScript types directly from PHP class definitions, ensuring consistent data types across both sides.

Step 1: Define PHP Class

The core JWT PHP class is shown below, defining properties such as iat, iss, exp, and uid.

final class JWT {
    public string $iat;
    public string $iss;
    public string $exp;
    public string $uid;

    public function __construct(
      string $iat,
      string $iss,
      string $exp,
      string $uid
    ) {
        $this->exp = $exp;
        $this->iat = $iat;
        $this->iss = $iss;
        $this->uid = $uid;
    }

    public function toArray(): array {
        return [
            'iat' => $this->iat,
            'iss' => $this->iss,
            'exp' => $this->exp,
            'uid' => $this->uid
        ];
    }
}

Step 2: Generate JSON Schema

A script converts the PHP class properties into a JSON schema; running npm run generate:types produces a JSON file that maps each class and its property types.

{
  ...
    "JWT": {
        "iat": "string",
        "iss": "string",
        "exp": "string",
        "uid": "string"
    },
  ...
}

Step 3: Generate TypeScript Types

A Node.js script reads the JSON schema and writes corresponding TypeScript type definitions, for example:

export type JWT = {
    iat: string,
    iss: string,
    exp: string,
    uid: string,
};

Step 4: Establish a Trusted Contract

Running the generation command after any backend change automatically updates the TypeScript definitions, keeping the contract up‑to‑date without manual effort.

Conclusion: Type‑Safe Development Workflow

The automated approach saves time, reduces the risk of mismatched data structures, and improves maintainability by ensuring that backend PHP classes and frontend TypeScript types stay synchronized.