https://github.com/foolishchow/vue-typescript-util
https://github.com/foolishchow/vue-typescript-util
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/foolishchow/vue-typescript-util
- Owner: foolishchow
- License: mit
- Created: 2018-06-07T05:54:02.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-04T02:14:31.000Z (almost 8 years ago)
- Last Synced: 2025-10-27T17:41:41.416Z (8 months ago)
- Language: JavaScript
- Size: 54.7 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-typescript-util
> 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](https://github.com/foolishchow/vue-typescript/blob/master/jsx.d.ts)
you may need this => [how it worked](https://github.com/foolishchow/vue-typescript) and [preview](http://htmlpreview.github.io/?https://github.com/foolishchow/vue-typescript/blob/preview/dist/index.html)
### exposed
- vue
- VueComponent
- vuex
- MakeVuexModule
- BindToRootMutation
- BindToRootActions
- InjectStore
### usage
> see folder `demo`
- `VueComponent = Store>`
with `vue-class-component` you can use type checking
```typescript
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{
@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
}
}
```
#### about `vuex`
- define vuex module State
```typescript
export type EventState = {
name: string;
}
const state = {
name: ''
}
// declartion migration globalState
declare module "../.." {
interface AppStoreStates {
event: EventState
}
}
```
- define vuex module getters
```typescript
type EventGetters = {
// name : return type
nameLength: number;
}
const getters: GetterModule = {
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
```typescript
type EventMutations = {
setName: string
}
const mutations: MutationModule = {
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
```typescript
type EventActions = {
clearName: boolean
}
const actions: ActionModule = {
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)`
```typescript
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
```typescript
export interface AppStoreStates { }
export interface AppStoreGetters { }
export interface AppStoreActions { }
export interface AppStoreMutations { }
export interface AppStore extends InjectStore { }
```
define global Actions and Mutaions , then we can use declaration migration to enhance them;
```typescript
export const StoreActions: AppStoreActions = {} as any;
export const StoreMutations: AppStoreMutations = {} as any;
//wrap of Bindings to StoreActions/StoreMutations
export function registeActions(actions: ActionNames, namespace: string) {
BindToRootActions(actions, namespace, StoreActions)
}
export function registeMutations(mutations: MutationNames, namespace: string) {
BindToRootMutation(mutations, namespace, StoreMutations);
}
```
type define utils of GetterModule,MutationModule,ActionModule
```typescript
export type GetterModule = AbstractGetterModule;
export type MutationModule = AbstractMutationModule;
export type ActionModule = AbstractActionModule;
```
define vuex store and InjectIt
```typescript
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 extends VueComponent { }
export class PageComponent extends VueComponent{ }
```