是否可以在 Nuxt 2 项目中同时运行 Javascript 和 TypeScript？

Question

我有一个

Nuxt 2.17.2

100% Javascript 项目，我需要运行一些 100% TypeScript 的 SDK。

我希望能够配置我的项目，以便我可以运行 TypeScript 和 Javascript，这样我就不会影响现有的代码。

我怎样才能做到这一点？

在遵循

https://typescript.nuxtjs.org

中的步骤之后，我尝试通过注入一个非常简单的函数（通过

plugins

）和*.ts扩展来测试这一点。

这是我到目前为止所拥有的：

src/plugins/myInjectedFunction.ts

import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    $myInjectedFunction(message: string): void
  }
}

Vue.prototype.$myInjectedFunction = (message: string) => console.log(message)

myInjectedFunctionTest.vue

<template>
  <div>
    <button @click="$myInjectedFunction('Test')">Click me !</button>
  </div>
</template>

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

export default defineComponent({
  mounted () {
    this.$myInjectedFunction('works in mounted')
  }
})
</script>

vue-shim.d.ts

declare module "*.vue" {
    import Vue from 'vue'
    export default Vue
}

tsconfig.json

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

问题是，当我运行这个时，我得到：

TypeError: this.$myInjectedFunction is not a function
    at VueComponent.mounted (myInjectedFunction.vue:6:1)
    at invokeWithErrorHandling (vue.runtime.esm.js:3017:1)
    at callHook$1 (vue.runtime.esm.js:4032:1)
    at Object.insert (vue.runtime.esm.js:4427:1)
    at invokeInsertHook (vue.runtime.esm.js:6946:1)
    at Vue.patch [as __patch__] (vue.runtime.esm.js:7094:1)
    at Vue._update (vue.runtime.esm.js:3765:1)
    at Vue.updateComponent (vue.runtime.esm.js:3868:1)
    at Watcher.get (vue.runtime.esm.js:3446:1)
    at new Watcher (vue.runtime.esm.js:3436:1)

我错过了什么或做错了什么？

Answer 1

问题是我没有导入文件中的插件

nuxt.config.js

。

我最近一直在使用 Nuxt 3，这不是必需的，因为它会自动导入

src/plugins

目录。