How can I furnish TSC with TypeScript definitions for URI imports in a comprehensive manner?

Question

How can I furnish TSC with TypeScript definitions for URI imports in a comprehensive manner?

import Vue from 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5b3b0a085f7ebf0ebf7f4">[email protected]</a>/dist/vue.esm.js'

If I submit the above code to TSC for compilation, it raises a valid concern about not being able to locate definitions for that module. However, finding a way to provide TypeScript with the definition file has proven elusive. Using

declare module 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8bebdad88fae6fde6faf9">[email protected]</a>/dist/vue.esm.js' { ... }

doesn't yield the desired result, and

https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1878494b1c3dfc4dfc3c0">[email protected]</a>/dist/vue.esm.js

isn't a recognized filename, making it impossible to create a file with that name. The alternative approach of using tsconfig.json paths proves equally fruitless.

What is the secret behind getting TypeScript to recognize my Vue type definitions?

Note: An optimal solution would allow for compatibility with

//cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c1a19092c5e4259425e5d">[email protected]</a>/dist/vue.esm.js

as well as ./vue.esm.js and ./vue.js. The latter two entail relative paths for which I struggle to establish a definition path.

typescript ecmascript-6

Answer 1

Answer №1

Here is the solution you're looking for:

stubs.d.ts

declare module 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98eeedfdd8aab6adb6aaa9">[email protected]</a>/dist/vue.esm.js' {
  const Vue: typeof import ('vue');

  export default Vue;
}

However, relying on an import statement to load a module from a CDN is not a typical approach in using modules — and as far as I know, no bundler supports it.

If you intend to use Vue as a module, you should install it locally (npm install vue) and then import it from your local node_modules directory.

import Vue from 'vue';

Alternatively, if you want to use it as a UMD package (meaning that the browser downloads it from a CDN rather than your bundle), you will need to install the typings and include them in your project.

Note that Vue bundles its declaration files (*.d.ts) alongside the actual executable code, so you cannot solely install the types. You will have to download the entire package regardless.

npm install vue

Once installed, add the type definitions to your project. In your tsconfig.json, make sure to include "vue" in the compilerOptions.types array.

{
  "compilerOptions": {
    "types": ["vue"]
  }
}

This will make the typings accessible globally within your scripts.

Answer 2

Here is the solution you're looking for:

stubs.d.ts

declare module 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98eeedfdd8aab6adb6aaa9">[email protected]</a>/dist/vue.esm.js' {
  const Vue: typeof import ('vue');

  export default Vue;
}

However, relying on an import statement to load a module from a CDN is not a typical approach in using modules — and as far as I know, no bundler supports it.

If you intend to use Vue as a module, you should install it locally (npm install vue) and then import it from your local node_modules directory.

import Vue from 'vue';

Alternatively, if you want to use it as a UMD package (meaning that the browser downloads it from a CDN rather than your bundle), you will need to install the typings and include them in your project.

Note that Vue bundles its declaration files (*.d.ts) alongside the actual executable code, so you cannot solely install the types. You will have to download the entire package regardless.

npm install vue

Once installed, add the type definitions to your project. In your tsconfig.json, make sure to include "vue" in the compilerOptions.types array.

{
  "compilerOptions": {
    "types": ["vue"]
  }
}

This will make the typings accessible globally within your scripts.

How can I furnish TSC with TypeScript definitions for URI imports in a comprehensive manner?

Answer №1

Similar questions

Guide to configuring a not null property in Typescript Sequelize:

Issue: The system needs the 'image' property to proceed (Dall E's image variation API by OpenAI)

Is it possible to conceal a table element using [hidden] in Angular 2?

What is the reason for encountering an error when attempting to use a let variable in a new block before reassigning it

Various types of generics within an object

What improvements can I make to enhance my method?

The module cannot be located due to an error: Package path ./dist/style.css is not being exported from the package

Utilizing Javascript to load and parse data retrieved from an HTTP request

"This error message states that the use of an import statement outside a module is not allowed

Template literal types in TypeScript and Visual Studio Code: An unbeatable duo

Using TypeORM with a timestamp type column set to default null can lead to an endless loop of migrations being

How can I combine multiple styles using Material-UI themes in TypeScript?

Unable to define an object within the *ngFor loop in Angular

What is the best way to evaluate typing into an input field?

Only JSON objects with a boolean value of true will be returned

While working on a project that involves TypeScript, Material-UI, and Formik, I encountered an error that originated from

What are the repercussions of labeling a function, TypeScript interface, or TypeScript type with export but never actually importing it? Is this considered poor practice or is there a potential consequence?

Discovering the category for ethereum, provider, and contract

Storing Json data in a variable within Angular 2: a step-by-step guide

TypeScript async function that returns a Promise using jQuery