Vuejs | import { PropType } from 'vue' Error-CodePudding

Error: 'PropType' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.ts(1444)

my "JobsList.vue" Component:

<script lang="ts">
import { defineComponent, PropType } from 'vue'

import type Job from '../types/job'

export default defineComponent({
    props: {
        jobs: {
            required: true,
            type: Array as PropType<Job[]>
        }
    }
})
</script>


<template>
    <section>
        <ul>
            <li v-for="job in jobs" :key="job.id">{{ job.title }}</li>
        </ul>
        
    </section>
</template>

My src/types/Job.ts:

interface Job {
    title: string;
    location: string;
    salary: number;
    id: string;
}

export default Job;

dependencies versions:

  "dependencies": {
    "vue": "^3.2.41"
  },
  "devDependencies": {
    "@types/node": "^16.11.68",
    "@vitejs/plugin-vue": "^3.1.2",
    "@vue/tsconfig": "^0.1.3",
    "npm-run-all": "^4.1.5",
    "typescript": "~4.7.4",
    "vite": "^3.1.8",
    "vue-tsc": "^1.0.8"
  }

and I just tried to change "isolatedModules" & "preserveValueImports" boolean values in tsconfig.config.json

CodePudding user response：

You need to change this line:

import { defineComponent, PropType} from 'vue'

To these lines:

import { defineComponent } from 'vue'
import type { PropType } from 'vue'