Skip to content

Typescript support

Katsuma Narisawa edited this page Sep 24, 2019 · 3 revisions

If you want to enable type inference in your vue component, please use generics.

lib/create_component.ts

import Vue from 'vue'
import Vapi from 'nuxt-resource-based-api'
import { Resource } from 'nuxt-resource-based-api'

interface Data {}
interface Methods {}
interface Props {}

export function createComponent<T>(resources: Array<Resource> = []) {
  return Vue.extend<Data, Methods, T, Props>({
    computed: Vapi.generateComputed(resources) as unknown as T,
    methods: Vapi.generateMethods(resources) as unknown as T,
  })
}

types/store/task.d.ts

import { IndexMethod } from "nuxt-resource-based-api";

export interface Task {
    id: number
    title: string
}

export interface TaskIndex {
    tasks: Task[]
    fetchTasks: IndexMethod
}

pages/index.vue

import { TaskIndex } from '../types/store/task'

export default createComponent<TaskIndex>([
  { resource: 'task', action: 'index' },
]).extend({
  methods: {
    foo() {
      return this.tasks // type inference is enabled
    }
  }
})
Clone this wiki locally