How to make VSCode recognize DefinitelyTyped global variable (grecaptcha) in Vuejs 3 TypeScript project

Question

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!

Answer 1

In tsconfig.json, add @types/grecaptcha to compilerOptions.types[]:

{
  "compilerOptions": {
    "types": ["@types/grecaptcha"]
  },
  ⋮
}