我正在创建一个 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": {
"@/*": ["./*"]
}
}
}
它仍然无法识别该类型。你能帮我吗?非常感谢!
我尝试复制您的代码,因为我不会抛出错误,但警告我
$encrypt
正在返回 any
作为类型,并且该库没有打字功能。
幸运的是,有 DefinitelyTyped,只需将
@types/crypto-js
安装为开发依赖项即可解决该问题。
在 nuxt 中,此后无需将其导入到任何地方。 现在项目应该自动识别库类型。