I have a Vue.js 3 TypeScript project scaffolded with the command npm init vue@latest
. Now I want to add reCaptcha v2 to the project from scratch instead of installing support libraries like vue3-recaptcha-v2
etc.
Then, instead of having to define the grecaptcha
object myself, I used npm i -D @types/grecaptcha
instead and in theory I should get the global variable grecaptcha
, however, my VSCode cannot recognize this variable.
Screenshot:
vite.config.js
import vueI18n from "@intlify/vite-plugin-vue-i18n";
import vue from "@vitejs/plugin-vue";
import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vueI18n({ useVueI18nImportName: true })],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});
tsconfig.json
{
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"compilerOptions": {
"baseUrl": ".",
"types": ["element-plus/global", "@intlify/vite-plugin-vue-i18n/client"],
"paths": {
"@/*": ["./src/*"]
}
},
"references": [
{
"path": "./tsconfig.config.json"
}
]
}
tsconfig.config.json
{
"extends": "@vue/tsconfig/tsconfig.node.json",
"include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
"compilerOptions": {
"composite": true,
"types": ["node"]
}
}
These files are initialized automatically by the command npm init vue@latest
. Now what should I do to make VSCode understand global variables from https://github.com/DefinitelyTyped/DefinitelyTyped.
Many thanks!
In tsconfig.json
, add @types/grecaptcha
to compilerOptions.types[]
:
{
"compilerOptions": {
"types": ["@types/grecaptcha"]
},
⋮
}