Typescript support

[ChrisShank]

I am adding Typescript and I am not certain what the shim for *.vue files should be? My best guess is:

// shims-vue.d.ts
declare module '*.vue' {
  import { Component } from 'vue'
  const component: Component
  export default component
}

does anyone know if this is correct?

[yyx990803]

Since *.vue files only export object-format components in v3, you can use ComponentOptions instead Component (the latter is a union type which includes FunctionalComponent)

[Timmitry]

@ChrisShank Do you have a working setup for Typescript? If so, would you be willing to share it? I struggled with including support for .ts files…

[ChrisShank]

Hi @Timmitry see my fork!

Edit : also added vue-router@next and vuex@next to my fork!

[Timmitry]

@ChrisShank Thanks a lot, adding your changes worked like a charm 🎉 Now only vetur needs to remove the The template root requires exactly one element.-error, but I can ignore that 😉

[bekalshenoy]

How To Add JSX Support

[onx2]

@ChrisShank Thanks for the fork, it is exactly what I was looking for!! 😄

Idk if you saw this too but I was receiving this error in router.ts on your fork:

[tsl] ERROR in /home/.../src/router.ts(8,18)
      TS2322: Type 'new () => ComponentPublicInstance<{}, { store: any; }, {}, {}, {}, Record<string, any>, VNodeProps>' is not assignable to type 'undefined'.

But it seems to work fine if I change the routes to async functions like:

routes: [
  { path: '/', component: async () => Home, name: 'home' },
  { path: '/about', component: async () => About, name: 'about' },
],

[ChrisShank]

@bekalshenoy JSX seems to be a work in progress right now...
https://github.com/vuejs/vue-next#official-libraries-vue-3-support-status

[ChrisShank]

@onx2 Unfortunately I haven't been able to reproduce that error. I just updated the dependencies of my fork (most notably to vuex@4.0.0-beta.1) so maybe that could fix it? Here is the commit. Let me know if there is anything else I can do! 😄

[deemaxx]

@Timmitry here is a TS version of this repo. I did not use JSX, however. Just plain render functions. Just an idea. https://github.com/deemaxx/vue-next-webpack-typescript

[janispritzkau]

I get an error when I use a imported component as a type.

import { defineComponent, ref } from "vue"
import HelloWorld from "./components/HelloWorld.vue"

export default defineComponent({
  components: { HelloWorld },
  setup() {
    const componentRef = ref<HelloWorld | null>(null)
  }
})

'HelloWorld' refers to a value, but is being used as a type here.

[ChrisShank]

@janispritzkau HelloWorld is a value here. typeof HelloWorld will give you the type of that Vue component.

[janispritzkau]

I found a solution but it feels a bit like a hack.

const componentRef = ref<InstanceType<typeof HelloWorld> | null>(null)

@ChrisShank typeof only gives you the constructor type.

[janispritzkau]

I noticed that I was only able to directly use the components as a type because I was using class components.

I also ran into another problem that you can't self reference a component, or have a child component, that has a type reference of it's parent which has the child component defined in it's components.