Nuxt options API with typescript no code completion

Question

如标题中所述，我将 Nuxtjs 与打字稿一起使用，但模板和脚本中没有代码补全。

这是我的代码

<script lang="ts">
import Vue from 'vue';
import { FeaturedJobs } from '../../types/featuredJobs';

export default Vue.extend({
  data() {
    return {
      transform: 0,
      movedTimes: 0,
      featuredJobs: {} as FeaturedJobs,
    }
  },
  
  mounted() {
    console.log(this.featuredJobs.title) // here i expect code completion to suggest title and othere properties (or anywhere else inside the template same situation)
  }

})

这是我的 nuxt 配置构建模块，在安装时添加了 nuxt typescript 构建

buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
]

这是我的 package.json 开发依赖项

 "devDependencies": {
   "@nuxt/types": "^2.15.8",
   "@nuxt/typescript-build": "^2.1.0",
   "@nuxtjs/dotenv": "^1.4.1",
   "@nuxtjs/style-resources": "^1.2.1",
   "@nuxtjs/tailwindcss": "^4.2.1",
 }

这是 tsconfig

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@nuxt/types",
      "@types/node",
      "@nuxtjs/axios",
    ]
  },
  "exclude": [
    "node_modules",
    ".nuxt",
    "dist"
  ]
}

当我键入 featuredJobs. 时，完成和建议并非来自 FeaturedJobs 类型。

Answer 1

我找到了答案，我的设置没问题，它适用于选项 API 我只需要在安装 vetur 后在我的 settings.json 文件中添加以下行，尽管这个功能可以工作在实验中。

在settings.json中：

"vetur.experimental.templateInterpolationService": true

Nuxt options API with typescript no code completion

Nuxt options API with typescript no code completion

typescript

vue.js

nuxt.js