patressz's avatar

Laravel / Typescript enum

Hello guys, i have an laravel/inertia-vue app where i have defined some PHP enums, for consistency i use "spatie/typescript-transformer" package to generate native enums for typescript from PHP enums.

it looks like below:

// resources/js/types/generated.d.ts
declare namespace App.Enums {
	export enum Period {
		'EVEN_WEEK' = 0,
		'ODD_WEEK' = 1,
		'EVERY_WEEK' = 2,
	}
}

and now i wanna use it in condition in vue template, so i do something like that:

// resources/js/pages/Stores/Show.vue
<template>
    <template v-if="store.period === period.ODD_WEEK">
	    <span>odd</span>
    </template>
</template>

<script setup lang="ts">
const props = defineProps<{
	store: App.Http.Resources.Store;
}>();

const period = App.Enums.Period;
</script>

in vscode it seems that everything works fine even i don't have any underscored code and auto completion in conditions works fine, but when i compile it and check site i get an error in console.

Show.vue:237 Uncaught (in promise) 
ReferenceError: App is not defined

my tsconfig.js

{
    "compilerOptions": {
        "allowJs": true,
        "module": "ESNext",
        "moduleResolution": "bundler",
        "jsx": "preserve",
        "strict": true,
        "isolatedModules": true,
        "target": "ESNext",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "skipLibCheck": true,
        "paths": {
            "@/*": ["./resources/js/*"],
            "ziggy-js": ["./vendor/tightenco/ziggy"]
        },
        "typeRoots": ["resources/js/types/types.d.ts"]
    },
    "include": [
        "resources/js/**/*.ts", 
        "resources/js/**/*.d.ts", 
        "resources/js/**/*.vue"
    ]
}

i don't know what i do wrong, i will be glad for some advice, thanks :)

0 likes
1 reply
niewiadomsky-73797882's avatar

I know its old topic, but for future people that have the same issue.

You have to set in config/typescript-transformer.php

transform_to_native_enums' => true

Please or to participate in this conversation.