Making Vue components more Typescript friendly #867
Labels
Comments
|
I'll check with @taylorotwell 👍 |
|
If that is the only change I don't have a problem with it. If there are other, larger changes I would need a list of them. |
|
This would be mainly it. Everything else is mainly additive. For example, adding a Another additional thing, that could be added with a later PR would be adding a |
|
Thanks @studnitz. I think the next step would be a PR for the minimal changes you mentioned. Feel free to send that in 👍 |
|
If this is helpful to someone, I added a types.d.ts file with the following content for jetstream: and then use the object inside the SFC like this: |
|
Just to complement @jrrmcalcio suggestion for anyone that found this helpful, a more complete types for jetstream (and in this case Inertia but you get the idea) would be: import { PageProps } from "@inertiajs/inertia";
declare namespace App.Models {
export interface Team {
id: number
user_id: number
name: string
personal_team : boolean
created_at: string
updated_at: string
}
export interface TeamMember {
team_id: number
user_id: number
role: string
created_at: string
updated_at: string
}
export interface User {
id: number
name: string
email: string
email_verified_at: string | null
current_team_id: number | null
profile_photo_path: string | null
created_at: string | null
updated_at: string | null
two_factor_confirmed_at: string | null
profile_photo_url: string
}
export interface UserSession {
agent: {
browser: string
is_desktop: boolean
platform: string
}
ip_address: string
is_current_device: boolean
last_active: string
}
export interface TeamInvitation {
id: number
team_id: number
email: string
role: string
created_at: string | null
updated_at: string | null
}
export type CRUDPermissions = ('create' | 'read' | 'update' | 'delete')[]
export interface Role {
description: string
key: string
name: string
permissions: CRUDPermissions[]
}
export interface ApiToken {
id: number
name: string
abilities: CRUDPermissions
last_used_ago: string | null
last_used_at: string | null
created_at: string | null
updated_at: string | null
tokeneable_id: number
tokeneable_type: string
}
}
declare module "@inertiajs/inertia" {
export interface PageProps {
jetstream: {
canCreateTeams: boolean;
canManageTwoFactorAuthentication: boolean;
canUpdatePassword: boolean;
canUpdateProfileInformation: boolean;
hasEmailVerification: boolean
flash: {
bannerStyle?: 'success' | 'danger',
banner?: string,
token?: string
}
hasAccountDeletionFeatures: boolean;
hasApiFeatures: boolean;
hasTeamFeatures: boolean;
hasTermsAndPrivacyPolicyFeature: boolean;
managesProfilePhotos: boolean;
},
user: App.Models.User & {
all_teams?: Array<App.Models.Team> | null
current_team?: App.Models.Team
two_factor_enabled: boolean
membership?: TeamMember
};
}
} |
|
@flick36 that was perfect though I was still getting a type error w/ the I swapped out for Assuming I might have to append to that if I get to other types down the road, but for now that works. |
|
Hi everybody. I am a bit confused with Jetstream and Inertia stack as a normal Vue user. So I have in Jetstream installed vue flavour of it and want now create a page what does "setup" in script mean? how can i add normal things like mounted, reated, data , etc ? Should I change lang="ts" in script so it works? |
|
@gelinger777 https://vuejs.org/api/sfc-script-setup.html
If you don't want to use the composition API, then you can remove the |
|
@jessarcher thanks for hint, but as I am habited on Vue 2 , I am a bit still confused how can I define old good mounted() and data() parts in this new way of doing things. Should I convert setup script to type=ts like @jrrmcalcio has shown ? I would appreciate if anybody could share a full Component or page example which has mounted and data parts ? |
|
For example I have created a simple page in Jetstream Inertia Vue Example and when for example I remove the "setup" from script, the whole UI disappears , and only the component is left, so I need to keep it, but I need to define some data properties and functions to work with them plus mounted to load some initial data.. Will try to read the Vue 3 Docs, but I think here also there are some specifics which come from Inertia and Jetstream... So any hint in right direction regarding the Page Structure would be appreciated. |
|
@gelinger777 if you remove Also please check out the following support channels as this issue board is not intended for support. Thanks! |
|
To clarify, considering Breeze's I could try implementing the option, but I am not sure why don't we have it in the first place. Is it specifically absent for an exact reason? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, I'm not sure if here is the right place to open this, but this repo doesn't have Github discussions enabled, where I would post this instead.
#829 made the development with Vite out of the box better.
As I'm finding myself using Typescript more and more as Vue 3 came out I had now several projects where I converted the Jetstream components to a Typescript version.
The most basic conversion is done by adding a no-op wrapper around
export default { ... }calleddefineComponent, which just is there to tell Typescript that the enclosed object indeed is a component.So the change is mainly:
So before opening a PR with these changes made I wanted to ask, whether this would be considered to be merged. As I said, this change would not affect users who do not use Typescript, it would just make life easier for users, who want to add Typescript to their Jetstream project and get proper typings.
If that is not planned, I save some time creating the PR. :)
The text was updated successfully, but these errors were encountered: