Vue3+TS中PropType导入报错：需使用类型仅导入（TS1444）

错误提示 #

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

相关代码 #

JobsList.vue 组件 #

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

src/types/Job.ts #

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

export default Job;

依赖版本 #

"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"
  }

解决方案 #

问题核心是 PropType 属于TypeScript类型而非运行时值，当preserveValueImports和isolatedModules同时启用时，必须使用类型专属导入语法。

修改JobsList.vue中的导入语句，将PropType单独用import type导入：

<script lang="ts">
import { defineComponent } from 'vue'
import type { PropType } from 'vue' // 改为类型专属导入

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

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

也可以合并为一行导入：

import { defineComponent, type PropType } from 'vue'

修改后即可满足TypeScript的类型导入规则，解决TS1444错误。

内容的提问来源于stack exchange，提问作者ShCc