README

Puddleglum允许您从您的Laravel模型和请求中自动生成TypeScript接口，以及为您的API路由生成类型安全的Axios实现。

此包基于lepikhinb/laravel-typescript。特别感谢这个出色的包！

简介

如果您像Calvient一样，有一个Laravel后端和TS前端（无论是React、Vue还是其他），您可能已经注意到，您必须手动将TypeScript接口与Laravel模型和请求保持同步。您可能还注意到，您必须手动将Axios实现与Laravel路由保持同步。

Puddleglum是一个Laravel包，通过自动生成TypeScript接口和基于Axios的简单API实现来解决这个问题。

安装

需要Laravel 8和PHP 8。您可以通过composer安装此包

composer require --dev calvient/puddleglum

您可以使用以下命令发布配置文件

php artisan vendor:publish --provider="Calvient\Puddleglum\PuddleglumServiceProvider" --tag="puddleglum-config"

这是已发布配置文件的内容

return [
   'output' => resource_path('ts/puddleglum.ts'),
];

用法

生成TypeScript接口。

php artisan puddleglum:generate

定义您的请求

在Laravel中，您可能从命令行这样定义您的请求

php artisan make:request StoreUser

如果您这样做（即，您的请求扩展了FormRequest），Puddleglum将自动为您的请求生成TypeScript接口。程序读取您的FormRequest中的规则并为您生成请求的TypeScript接口。

例如

class UserLogin extends FormRequest
{
	public function authorize()
	{
		return true;
	}

	public function rules()
	{
		return [
			'email' => 'required|email',
			'password' => [
				'required',
				Password::min(8)->mixedCase()->letters()->numbers()->symbols()->uncompromised(),
			],
		];
	}
}

变为

export interface UserLogin {
	email: string;
	password: string;
}

如果您不想定义FormRequest（例如，您想在控制器中直接使用请求验证器），您可以在控制器之前使用GlumRequest属性。

示例;

#[GlumRequest(['name' => 'string', 'email' => 'string', 'password' => 'string'])]
public function register(Request $request) {
    $request->validate([
        'name' => 'required|string|max:255',
        'email' => 'required|string|email|max:255|unique:users',
        'password' => Password::min(8)
            ->letters()
            ->mixedCase()
            ->numbers()
            ->symbols()
            ->uncompromised(),
    ]);
}

定义响应

定义响应稍微复杂一些，因为PHP缺乏对泛型的支持。然而，Puddleglum仍然可以为您生成响应的TypeScript接口。

我们通过使用PHP属性来实现这一点。

示例

#[GlumResponse(['user' => 'User', 'message' => 'string'])]
public function show(User $user): User
{
    return response()->json([
        'user' => $user,
        'message' => 'Hello, world!',
    ]);
}

在TypeScript代码中使用Puddleglum输出

将Puddleglum客户端导入到您的TypeScript代码中

import {Puddleglum} from '../../puddleglum';

然后，您可以使用Puddleglum客户端进行API调用

const login = async (email: string, password: string) => {
    const reply = await Puddleglum.Auth.LoginController.login({email, password});
    setUser(reply.data.user);
};

API客户端反映了PHP命名空间。因此，在上面的示例中，登录控制器位于\App\Http\Controllers\Auth，方法名为login。

您还可以导入各种模型和请求。

import {User} from '../../puddleglum';

const [user, setUser] = React.useState<User>();

许可证

MIT许可证（MIT）。有关更多信息，请参阅许可证文件。