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 [email protected]) 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.

[vsimko]

I almost got it working using the following approach:

<template>
  <hello-world ref="hello">
</template>

<script lang="ts">
import { ComponentOptions } from 'vue';
import HelloWorld from "./components/HelloWorld.vue"

// helper function to attach type to a vue reference
function typesafeComponentRef<T>(elementRef: Element, vueComponent: T) {
  type ExtractVueComponentType<X> = X extends ComponentOptions<any, infer Data, any, any, any, any> ? Data : never;
  return elementRef as ExtractVueComponentType<typeof vueComponent>;
}

export default defineComponent({
  setup(props, context) {
    watchEffect(() => {
      const helloWorld = typesafeComponentRef(context.refs.hello, HelloWorld)
      // here code completion works in Intellij
      // but the type of helloWorld is always `unknown`
      const x = helloWorld.someDataVariable // autocompleted someDataVariable
      ...
    });
  }
});
</script>

[way2ex]

@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 😉

you can set this for vetur "vetur.validation.template": false
see this vuejs/vetur#1976

Also I create a project with vue3 and webpack, you can take a look here

[DrMabuse23]

@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 😉

you can set this for vetur "vetur.validation.template": false
see this vuejs/vetur#1976

Also I create a project with vue3 and webpack, you can take a look here

thx for your link can you translate your comments in the webpack.config in english please ?