Search code examples
typescriptvue.js

vue + typescript typing errors

Example component:

<script setup type="ts">

interface Props {
    items: string[]
}

const props = defineProps<Props>();

</script>

<template>
    <ul>
        <li v-for="item in props.items">
            {{ item }}
        </li>
    </ul>
</template>

I see these errors:

  • interface declarations can only be used in TypeScript files.
  • Expression expected.

It fails to compile/start. There is an additional error that is visible in vs code:

Vue official plugin, v2.0.7 is installed

package.json:

{
  "name": "some-project",
  "private": true,
  "version": "0.1.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "generate": "vite-ssg build",
    "preview": "vite preview",
    "typecheck": "vue-tsc --noEmit"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "@intlify/unplugin-vue-i18n": "^4.0.0",
    "dayjs": "^1.11.11",
    "element-plus": "^2.6.2",
    "oh-vue-icons": "^1.0.0-rc3",
    "pinia": "^2.1.7",
    "unplugin-auto-import": "^0.18.2",
    "unplugin-icons": "^0.19.0",
    "vue": "^3.4.21",
    "vue-i18n": "^9.13.1",
    "vue-router": "^4.4.0"
  },
  "devDependencies": {
    "@iconify-json/ep": "^1.1.15",
    "@types/node": "^22.5.1",
    "@vitejs/plugin-vue": "^5.0.4",
    "sass": "1.77.8",
    "typescript": "^5.4.3",
    "unocss": "^0.62.3",
    "unplugin-vue-components": "^0.27.4",
    "vite": "^5.2.5",
    "vite-ssg": "^0.23.6",
    "vue-tsc": "^2.0.7"
  },
  "license": "MIT"
}

What is wrong with this?

Solution

  • Shouldn't it be like that?

    
    <script setup lang="ts"></script>