What is the reason for TS expressing dissatisfaction about the use of a type instead of a type entry being provided

Question

What is the reason for TS expressing dissatisfaction about the use of a type instead of a type entry being provided

Below is a snippet of code for a Vue3 component that takes in an Array of Objects as a prop:

<script lang="ts">

interface CorveesI {
  What: string,
  Who: string,
  Debit: number
}

export default {
  name: 'Corvees',
  props: {
    corvees: {
      type: CorveesI[]
    }
  },
(...)

During compilation, there is a warning specifically on the line type: CorveesI[]:

TS2693: 'CorveesI' only refers to a type, but is being used as a value here.

Uncertain about how to address this issue, as I am specifying the type of corvees, providing a type but then told it's expected as a value.

I consulted the documentation on Type Checks but couldn't connect the dots between my interface and the constructor.

Fearing my understanding of interface may be flawed, I delved into the TS doc for Object Types but found it more like a type description (similar to type in Golang, for example). Consequently, confusion heightened.

typescript vue.js types typeerror vuejs3

Answer 1

Answer №1

When defining props in Vue components, it's important to remember that the expected types are JavaScript runtime types, not TypeScript types. This means that only the types mentioned in the Vue documentation are valid for props.

If you want to properly type a prop in TypeScript, you should use PropType<>. You can learn more about this by reading the documentation on Annotating props

import { PropType } from "vue";
...
corvees: {
  type: Array as PropType<CorveesI[]>
}

Answer 2

When defining props in Vue components, it's important to remember that the expected types are JavaScript runtime types, not TypeScript types. This means that only the types mentioned in the Vue documentation are valid for props.

If you want to properly type a prop in TypeScript, you should use PropType<>. You can learn more about this by reading the documentation on Annotating props

import { PropType } from "vue";
...
corvees: {
  type: Array as PropType<CorveesI[]>
}

Answer 3

Answer №2

Give this a shot:

import { PropTypes } from "vue";
...
chores: {
  kind: Array as PropTypes<ChoresI[]>
}

For more information, check out: https://v3.vuejs.org/guide/typescript-support.html#annotating-props

Answer 4

Give this a shot:

import { PropTypes } from "vue";
...
chores: {
  kind: Array as PropTypes<ChoresI[]>
}

For more information, check out: https://v3.vuejs.org/guide/typescript-support.html#annotating-props

What is the reason for TS expressing dissatisfaction about the use of a type instead of a type entry being provided

Answer №1

Answer №2

Similar questions

Why does the Vue i18n $t('hello') not function properly within a data property until the page is refreshed, yet it works fine when used in a normal template?

typescript React-Redux challenge: Boosting Your mapDispatchToProps Skills

Challenges with Vuetify forms

What causes the error "Angular 2 checkbox params.setValue is not functioning properly"?

Using *ngFor to populate an array in an ion-list within Ionic 2

Why is it that TypeScript's flow analysis does not extend to the 'else' block?

Tips on storing and retrieving data between pages in Ionic 4/5: Saving data to a service and accessing it from a

Is there a method to retrieve Mui state classes easily?

Guide on adding checkboxes for each child component in a Vue ads table

Get React-table TS up and running on your local machine using VS Code

What could be the reason for the undefined initial state in my vuex store?

Tips on modifying the selected type key name through Pick?

Utilizing Axios for transmitting an authentication token to the server

What is GraphQl indicating when it informs me that I neglected to send arguments for the mutation

Vue.js - Trouble with Rendering Elements

Exploring Aurelia's Integration with ASP.NET Core Models

The challenge of extending a TypeScript generic to accept an Array type with unrelated elements

initialize input data in vue

Manipulating nested lists in Vuejs by removing elements

The powerful combination of harp.gl and Angular NG