using defineComponent when using Typescript with Vue

[DevKame]

I want to start only using Typescript for any future projects. According to all the sources i found while researching, everybody was using defineComponent() in the yscript> area of a .vue file.

I could not identify WHY this is necessary. Can someone elaborate? Especially in regards to using <script setup> there is even less information about Typescript. I just startet a new vue project and did this:

<script lang="ts" setup>
import { ref } from 'vue';
const text = ref<string>("Hello");
</script>

and did not encouter one single problem. So why the defineComponent() ?

[LinusBorg]

The quick explanation: defineComponent() predates <script setup>, so before we had that, defineComponent() was essentially a no-op function whose only purpose was to allow for proper type inference in Typescript.

With <script setup>, that is no longer needed in SFCs. However, if you want to write a component with TSX, you would still use it:

const component = defineComponent({
  props: {
    msg: String
  },
  setup(props) {
   // defineComponent allows TS to infer the proper interface for the `props` argument from the props options
    return () => <div>{ props.msg }</div>
  }
})

[DevKame]

Thank you JonusBorg for all the quick and valuable answers you give!

So for me to remember:

defineComponent() was in a time where script setup didnt exist yet, and with using script setup, i dont need defineCompontent neccessarily. Did i summarize that correctly?

You mentioned some terms im not familar with. What is

• a no-op function
• TSX

i assume TSX is HTML-Template in combination with interpolation that i can use programmatically, according to your code example

<div>{ props.msg }</div>

[LinusBorg]

no-op is short for no-operation - the function doesn't actually do anything at runtime - it's just there to help with type inference.

TSX is the Typescript implementation of JSX

[DevKame]

Thanks a lot!