Menu
I want to use a CDN for accessing a JSON validation library, for it is supposed to be a little bit faster (it gets the file from the closest available server in the CDN).
This is the JSON validation library: https://github.com/epoberezkin/ajv#using-in-browser
It directs me to this CDN: https://cdnjs.com/libraries/ajv
So I include that in my HTML:
<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>
Now the typings... I ran npm install --save-dev @types/ajv and it installed.
node_modules/@types/ajv/package.json:
{
"_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/[email protected]",
"_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": "[email protected]"
},
"_phantomChildren": {},
"_requested": {
"raw": "@types/ajv",
"scope": "@types",
"escapedName": "@types%2fajv",
"name": "@types/ajv",
"rawSpec": "",
"spec": "latest",
"type": "tag"
},
"_requiredBy": [
"#DEV:/",
"#USER"
],
"_resolved": "https://registry.npmjs.org/@types/ajv/-/ajv-1.0.0.tgz",
"_shasum": "4fb2440742f2f6c30e7fb0797b839fc6f696682a",
"_shrinkwrap": null,
"_spec": "@types/ajv",
"_where": "C:\\Users\\si556577\\Documents\\SSWebApp\\app\\Iag.DI.Web.SupplierApp",
"author": "",
"bugs": {
"url": "https://github.com/epoberezkin/ajv/issues"
},
"dependencies": {
"ajv": "*"
},
"deprecated": "This is a stub types definition for ajv (https://github.com/epoberezkin/ajv). ajv provides its own type definitions, so you don't need @types/ajv installed!",
"description": "Stub TypeScript definitions entry for ajv, which provides its own types definitions",
"devDependencies": {},
"directories": {},
"dist": {
"shasum": "4fb2440742f2f6c30e7fb0797b839fc6f696682a",
"tarball": "https://registry.npmjs.org/@types/ajv/-/ajv-1.0.0.tgz"
},
"homepage": "https://github.com/epoberezkin/ajv#readme",
"license": "MIT",
"main": "",
"maintainers": [
{
"name": "types",
"email": "[email protected]"
}
],
"name": "@types/ajv",
"optionalDependencies": {},
"readme": "ERROR: No README data found!",
"repository": {
"type": "git",
"url": "git+https://github.com/epoberezkin/ajv.git"
},
"scripts": {},
"typings": null,
"version": "1.0.0"
}
and it also added this to package.json:
"devDependencies": {
"@types/ajv": "^1.0.0",
In code I use it like this:
validateJSONSchema(json) {
var ajv = new Ajv();
var valid = ajv.validate(this.schema, json);
if (!valid) {
console.log(ajv.errors);
return false;
} else {
return true;
}
}
The code works, however in the vs code I'm getting the compile time error: Cannot find name "Ajv"
How do I make my typings work? I have only ever used typings when I install the package locally rather than use a CDN. Can typings even work when using a CDN?
682
It's noted in ajv's package.json file that @types/ajv is now deprecated and the typings are included with the package iteself:
This is a stub types definition for ajv (https://github.com/epoberezkin/ajv). ajv provides its own type definitions, so you don't need @types/ajv installed!
However, the typings included with the package itself are intended to be used like this:
import * as Ajv from "ajv";
let ajv = new Ajv(...);
So TypeScript is not going to be happy with the typings unless import statements are used.
This means that if you want to use the CDN, you will have to configure your module bundler to do so. It's not going to be enough to include the CDN <script> and have Ajv available as a global.
How you do that depends upon the bundler you are using.
70
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
