NuxtApp 助手返回“类型未知”

Question

我正在创建一个 Nuxt 插件，这通常是一个简单的过程。我在

cryptography.ts

文件夹中创建了一个名为

plugins/

的文件，并编写了以下代码：

// plugins/cryptography.ts

import CryptoJs from "crypto-js"


export default defineNuxtPlugin(() => {
  return {
    provide: {
      encrypt: (value: string, secret_key: string) => {
        var bytes = CryptoJS.AES.encrypt(value, secret_key).toString();

        return bytes;
      },
      decrypt: (value: string, secret: string) => {
        var decrypted = CryptoJS.AES.decrypt(value, secret).toString(
          CryptoJS.enc.Utf8
        );

        return decrypted;
      },
    },
  };
});

完成后，我在我的一个组件中使用了该插件：

<script setup lang="ts">
 const { $encrypt } = useNuxtApp()
 $encrypt('somekey', 'secretkey')
</script>

不幸的是 $encrypt 抛出了以下错误：

'$encrypt' is of type 'unknown'.ts-plugin(18046)

为了解决此问题，我尝试将其添加到根文件夹中的 d.ts 文件中。

declare module "#app" {
  interface NuxtApp {
    $encrypt: any;
  }
}

declare module "vue" {
  interface ComponentCustomProperties {
    $encrypt: any;
  }
}

export {};

还是不行。我不确定根本原因是什么。甚至尝试将 .d.ts 文件放在

/types/

中并将我的

ts-config.json

配置为以下内容：

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": ".",
    "target": "ES2022",
    "module": "ESNext",
    "types": ["./types/**/*.d.ts"],
    "paths": {
      "@/*": ["./*"]
    }
  }
}

它仍然无法识别该类型。你能帮我吗？非常感谢！

Answer 1

我尝试复制您的代码，因为我不会抛出错误，但警告我

$encrypt

正在返回

any

作为类型，并且该库没有打字功能。

幸运的是，有 DefinitelyTyped，只需将

@types/crypto-js

安装为开发依赖项即可解决该问题。

在 nuxt 中，此后无需将其导入到任何地方。 现在项目应该自动识别库类型。