README

Warning: This package only supports Laravel 11+

To

Laravel TypeScript

The package lets you generate TypeScript interfaces from your Laravel models.

Introduction

Say you have a model which has several properties (database columns) and multiple relations.

class Product extends Model
{
    public function category(): BelongsTo
    {
        return $this->belongsTo(Category::class);
    }

    public function features(): HasMany
    {
        return $this->hasMany(Feature::class);
    }
}

Laravel TypeScript will generate the following TypeScript interface:

declare namespace App.Models {
    export interface Product {
        id: number;
        category_id: number;
        name: string;
        price: number;
        created_at: string | null;
        updated_at: string | null;
        category?: App.Models.Category | null;
        features?: Array<App.Models.Feature> | null;
    }
    ...
}

Laravel TypeScript supports:

• Database columns
• Model relations
• Model accessors
• Casted attributes

Installation

Laravel 11 and PHP 8 are required. You can install the package via composer:

composer require lumore/laravel-typescript

You can publish the config file with:

php artisan vendor:publish --provider="Lumore\TypeScript\TypeScriptServiceProvider" --tag="typescript-config"

This is the contents of the published config file:

return [
    'generators' => [
        Model::class => ModelGenerator::class,
    ],

    'output' => resource_path('js/models.d.ts'),

    // load namespaces from composer's `dev-autoload`
    'autoloadDev' => false,
];

Usage

Generate TypeScript interfaces.

php artisan typescript:generate

Example usage with Vue 3:

import { defineComponent, PropType } from "vue";

export default defineComponent({
    props: {
        product: {
            type: Object as PropType<App.Models.Product>,
            required: true,
        },
    },
}

Testing

composer test

Credits

• Adil Rakhimbayev
• Boris Lepikhin
• All Contributors

License

The MIT License (MIT). Please see License File for more information.