vue-typescript-util

write vue with typescript

Usage no npm install needed!

<script type="module">
  import vueTypescriptUtil from 'https://cdn.skypack.dev/vue-typescript-util';
</script>

README

vue-typescript-util

Version Downloads

write vue with type check
this module only work with /.tsx?/ file

important

to make VueComponent active.
you have to create a jsx.d.ts file in project root like this

you may need this => how it worked and preview

exposed

  • vue
    • VueComponent
  • vuex
    • MakeVuexModule
    • BindToRootMutation
    • BindToRootActions
    • InjectStore

usage

see folder demo

  • VueComponent<Props={}, store extends Store<any> = Store<any>>
    with vue-class-component you can use type checking
    import Component from "vue-class-component";
    import { Prop } from "vue-property-decorator"
    import { VueComponent } from "vue-typescript-util";
    import { CreateElement } from "vue";
    
    export type MyComponentPropsType = {
      name:string;
      title?:string;
    }
    //define a component MyComponent
    @Component
    export class MyComponent extends VueComponent<MyComponentPropsType>{
      @Prop()
      name:string;
      @Prop()
      title:string;
      render(h: CreateElement){
    
      }
    }
    //use MyComponent in MyComponent1
    @Component
    export class MyComponent1 extends VueComponent{
      render(h: CreateElement){
        // type ckeck error 
        return <MyComponent></MyComponent>
      }
    }
    

about vuex

  • define vuex module State

    export type EventState = {
      name: string;
    }
    const state = {
      name: ''
    }
    // declartion migration globalState
    declare module "../.." {
      interface AppStoreStates {
        event: EventState
      }
    }
    
  • define vuex module getters

    type EventGetters = {
      // name : return type
      nameLength: number;
    }
    const getters: GetterModule<EventGetters, EventState> = {
      nameLength(state) {
        return state.name.length;
      }
    }
    //AppStoreGetters globalGetters type
    declare module "../.." {
      // common module
      interface AppStoreGetters extends EventGetters { }
      // namespaced module
      interface AppStoreGetters {
        event:EventGetters
      }
    }
    
  • define vuex mutations

    type EventMutations = {
      setName: string
    }
    const mutations: MutationModule<EventMutations, EventState> = {
      setName(state, payload) {
        state.name = payload;
      }
    }
    // AppStoreMutations global mutation type
    declare module "../.." {
      interface AppStoreMutations {
        // EventModule result of MakeVuexModule
        event: typeof EventModule.mutations
      }
    }
    
  • define vuex Actions

      type EventActions = {
        clearName: boolean
      }
    
      const actions: ActionModule<EventActions, EventState, EventGetters> = {
        clearName(context, payload) {
          if (payload) {
            // commit from root
            context.commit(StoreMutations.event.setName, '', { root: true })
          } else {
            // commit from module
            context.commit(ModuleMutations.setName, '')
            console.info(`commit from module`)
          }
        }
      }
      declare module "../.." {
        interface AppStoreActions {
          // EventModule result of MakeVuexModule
          event: typeof EventModule.actions
        }
      }
    
  • define vuex module
    MakeVuexModule(moduleTree:_moduleTree,moduleName: string,namespace: boolean = false)

    const moduleInstance = {
      state,
      getters,
      mutations,
      actions
    }
    // no namespaced
    const EventModule = MakeVuexModule(moduleInstance, 'event',false);
    const ModuleMutations = EventModule.moduleMutations;
    // wrap of BindToRootActions
    registeActions(EventModule.actions, 'event');
    // wrap of BindToRootMutation
    registeMutations(EventModule.mutations, 'event')
    export default EventModule.module;//this is vuex module
    
  • global store
    type define global Store

    export interface AppStoreStates { }
    export interface AppStoreGetters { }
    export interface AppStoreActions { }
    export interface AppStoreMutations { }
    export interface AppStore extends InjectStore<AppStoreStates, AppStoreGetters> { }
    

    define global Actions and Mutaions , then we can use declaration migration to enhance them;

    export const StoreActions: AppStoreActions = {} as any;
    export const StoreMutations: AppStoreMutations = {} as any;
    //wrap of Bindings to StoreActions/StoreMutations
    export function registeActions<Actions = any>(actions: ActionNames<Actions>, namespace: string) {
      BindToRootActions(actions, namespace, StoreActions)
    }
    export function registeMutations<Mutations = any>(mutations: MutationNames<Mutations>, namespace: string) {
      BindToRootMutation(mutations, namespace, StoreMutations);
    }
    

    type define utils of GetterModule,MutationModule,ActionModule

    export type GetterModule<Typedef, State> = AbstractGetterModule<Typedef, State, AppStoreStates, AppStoreGetters>;
    export type MutationModule<Typedef, State> = AbstractMutationModule<Typedef, State>;
    export type ActionModule<Typedef, State, Getters> = AbstractActionModule<Typedef, State, Getters, AppStoreStates, AppStoreGetters>;
    

    define vuex store and InjectIt

    import dom from './modules/dom';
    import event from './modules/event';
    
    const store: AppStore = new Vuex.Store({
      modules: {
        dom,
        event
      }
    }) as any;
    InjectStore(store);
    // after 
    //you can use store.Commit with StoreMutations
    //you can use store.Dispatch with StoreMutations
    export { store }
    
    // define a class Injected AppStore
    export interface PageComponent<Props = {}> extends VueComponent<Props, AppStore> { }
    export class PageComponent<Props = {}> extends VueComponent<Props, AppStore>{ }