Incorporate typings into your CDN integration

I'm interested in utilizing a CDN to access a JSON validation library, as it's expected to provide faster performance (due to retrieving the file from the nearest server within the CDN).

The JSON validation library in question can be found here: https://github.com/epoberezkin/ajv#using-in-browser

Upon clicking on the link, I was directed to this CDN:

To integrate it into my HTML code:

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ajv/4.10.4/ajv.min.js" integrity="sha256-LtA3VfycAam30/5e2Fq1f2tg8eIiFMOVWp1NDd6jmUU=" crossorigin="anonymous"></script>
</head>

Next, regarding typings... I executed

npm install --save-dev @types/ajv
and the installation went smoothly.

The path to the package.json file for @types/ajv is:

{
  "_args": [
    [
      {
        "raw": "@types/ajv",
        "scope": "@types",
        "escapedName": "@types%2fajv",
        "name": "@types/ajv",
        "rawSpec": "",
        "spec": "latest",
        "type": "tag"
      },
      "C:\\Users\\si556577\\Documents\\SSWebApp\\app\\Iag.DI.Web.SupplierApp"
    ]
  ],
  "_from": "@types/ajv@latest",
  "_id": "@types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3253584472031c021c02">[email protected]</a>",
  "_inCache": true,
  "_installable": true,
  "_location": "/@types/ajv",
  "_npmOperationalInternal": {
    "host": "packages-12-west.internal.npmjs.com",
    "tmp": "tmp/ajv-1.0.0.tgz_1482502603556_0.6872997884638608"
  },
  "_npmUser": {
    "name": "types",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="681c1b45061805451c11180d1b2805010b1a071b070e1c460b0705">[email protected]</a>"
  },
  "_phantomChildren": {},
  "_requested": {
    "raw": "@types/ajv",
    "scope": "@types",
    "escapedName": "@types%2fajv",
    "name": "@types/ajv",
    "rawSpec": "",
    "spec&q...

This also resulted in an addition to the package.json file:

"devDependencies": {
    "@types/ajv": "^1.0.0",

In my actual code, I utilize these typings like so:

validateJSONSchema(json) {
    var ajv = new Ajv();
    var valid = ajv.validate(this.schema, json);
    if (!valid) {
        console.log(ajv.errors);
        return false;
    } else {
        return true;
    }
}

While the code functions correctly, I encountered a compile-time error in VS Code: Cannot find name "Ajv"

Is there a way to resolve this issue with the typings? My experience with typings has only involved locally installed packages rather than CDNs. Can typings even function properly when a CDN is being used?

Answer №1

Within the package.json file of ajv, it is mentioned that @types/ajv is now deprecated and the typings are included within the package itself:

The types definition for ajv (https://github.com/epoberezkin/ajv) has been stubbed. Ajv provides its own type definitions, eliminating the need for @types/ajv installation!

However, the included typings within the package should be utilized in this manner:

import * as Ajv from "ajv";
let ajv = new Ajv(...);

TypeScript will not accept these typings without the use of import statements.

This implies that configuring your module bundler is necessary if you intend to utilize the CDN. Simply including the CDN via <script> tag will not make Ajv globally available.

The method for doing so varies based on the bundler being used.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtaining the value of an ion-toggle in Ionic2 using the ionChange

Below is the toggle I am referring to: <ion-toggle (ionChange)="notify(value)"></ion-toggle> I am looking for a way to retrieve the value of the toggle when it is clicked in order to pass it as a parameter to the notify method. Any suggestion ...

Struggling to understand how to define and utilize Static variables in TypeScript? If you're finding that they are consistently coming up

export class myClass implements OnInit { counter = 0; static counter: any; onListItemClick(PackDef: PackDefinition): void { this.itemClicked.emit(PackDef); this.counter++; console.log(this.counter); } } and.. import { myClass } from '. ...

How Keyof can render an object undefined and prevent accurate verification

Encountering TS2532 error: Object is possibly 'undefined' while attempting to access an object's value by dynamically selecting the key. TypeScript seems to be restricting me from checking the field values, and I'm unsure of the underly ...

Swapping out numerical value and backslash with Angular

I am encountering an issue with replacing URL parameters in my code. Take a look at the following code snippet: getTitle() { const title = this.router.url.replace(/\D\//g, ''); return title; } However, it seems to only be removin ...

The path mappings specified in the tsconfig.json file are not resolving correctly during the

Everything runs smoothly with my imports during coding, but after building the project using tsc, the imported files are not resolving to valid paths. This is how my tsconfig.json looks: { "compilerOptions": { "target": "ES2 ...

Tips for accessing the 'index' variable in *ngFor directive and making modifications (restriction on deleting only one item at a time from a list)

Here is the code snippet I'm working with: HTML: <ion-item-sliding *ngFor="let object of objectList; let idx = index"> <ion-item> <ion-input type="text" text-left [(ngModel)]="objectList[idx].name" placeholder="Nam ...

Mastering the art of accessing properties in typescript post implementing Object.defineProperty

I was experimenting with the TypeScript playground trying to figure out decorators and encountered some questions. class PathInfo { functionName: string; httpPath: string; httpMethod: string; constructor(functionName: string, httpPath: str ...

Unable to invoke a function in TypeScript from a Kendo template within the Kendo TreeList component

In my TypeScript file for class A, I am encountering an issue with the Kendo TreeList code. I am trying to call a function from the Kendo template. export class A{ drillDownDataSource: any; constructor() { this.GetStatutoryIncomeGrid ...

Guide on dividing a URL string in Angular framework

Is there a way to include a value directly in the URL, like so: http://example.com/component/july2021 I need to extract july2021 from the component and separate it into "july" and "2021". How can I achieve this? ...

Deleting a key from a type in TypeScript using subtraction type

I am looking to create a type in TypeScript called ExcludeCart<T>, which essentially removes a specified key (in this case, cart) from the given type T. For example, if we have ExcludeCart<{foo: number, bar: string, cart: number}>, it should re ...

The navigation function in Angular, this.router.navigate, is causing issues and

I've encountered a peculiar issue. There's a logout function that is activated whenever I receive a 401 response from any API I interact with. The function looks like this: constructor( private router: Router, ) {} logout(router1: Router ...

Encountered an issue in Typescript with error TS2554: Was expecting 0 arguments but received 1 when implementing useReducer and useContext in React

I've encountered several errors with my useReducers and useContext in my project. One specific error (TS2554) that I keep running into is related to the AuthReducer functionality. I'm facing the same issue with each Action dispatch. I've tri ...

Utilizing a fixed array as the data source for a mat-table

I am currently working on implementing the Angular Material table into my project. I am encountering an issue when trying to define the [dataSource]="data", even though I am using code similar to the examples provided. My question may seem basic, but my t ...

exploring the ins and outs of creating computed properties in TypeScript

How can I store an object with a dynamically assigned property name in an array, but unsure of how to define the array properly? class Driver { public id: string; public name: string; constructor(id , name) { this.id = id; th ...

Cannot display data in template

After successfully retrieving JSON data, I am facing trouble displaying the value in my template. It seems that something went wrong with the way I am trying to output it compared to others. My function looks like this, getUserInfo() { var service ...

'This' loses its value within a function once the decorator is applied

Scenario: Exploring the creation of a decorator to implement an interceptor for formatting output. Issue at Hand: Encountering 'this' becoming undefined post application of the decorator. // custom decorator function UseAfter(this: any, fn: (.. ...

Upon executing the `npm start` command, the application experiences a crash

When I tried following the steps of the Angular quickstart guide, I encountered some errors after running "npm start". Here are the errors displayed: node_modules/@angular/common/src/directives/ng_class.d.ts(46,34): error TS2304: Cannot find name 'Se ...

Encountered a hiccup during the installation of ssh2-sftp-client on Next.js

I'm looking for a way to save uploaded files in my domain's storage using SFTP. I came across the multer-sftp package, but when I attempted to run the command yarn add multer-sftp ssh2-sftp-client, I encountered a strange error with the second pa ...

Writing Data to Google Cloud Firestore Map using NextJS and Typescript with nested objects

I could use some assistance. I'm developing an application using NextJS (React), TypeScript, and Google Cloud Firestore. Everything seems to be working fine so far. However, I'm facing an issue with storing the address and phone number in a neste ...

Enhancing Angular Material: requiring more user engagement for rendering to occur

Encountering an unusual issue with Angular Material: certain components require an additional event, like a click or mouse movement on the targeted div, to trigger the actual rendering process. For instance, when loading new rows in mat-table, some empty ...