Nette, Typescript, Ajax, jQuery

vosy

Ahoj, potřeboval bych poradit s nette, jQuery v TypeScriptu.
Používám VSCODE a když do souboru .ts napíšu

$(function () {
	$.nette.init();
});

typescript píše
Property 'nette' does not exist on type 'JQueryStatic'.

v @latte mám

<script src="./plugin/jquery/3.6.0/jquery.min.js"></script>
<script src="./plugin/nette.ajax.js/nette.ajax.js"></script>

v souboru package.json mam

  "devDependencies": {
    "@types/jquery": "^3.5.14",
    "typescript": "^4.6.3"
  },
  "dependencies": {
    "jquery": "^3.6.0"
  }

jak se s tou hláškou
Property 'nette' does not exist on type 'JQueryStatic'.
vypořádat?

Editoval vosy (18. 4. 2022 15:21)

jiri.pudil

Ahoj, nette.ajax.js je neudržovaný a neexistují pro něj typové definice, bez kterých se TS prostě neobejde. Bohužel jediné, co s tím myslím můžeš udělat, je dopsat si je sám.

Alternativně bych ti doporučil svou knihovnu Naja, která se hodně inspirovala v nette.ajax.js, takže řadu věcí dělá podobně, a v těch nejjednodušších situacích se dá dokonce použít jako drop-in replacement za nette.ajax.js. Navíc je Naja sama napsaná v TS, takže v tomhle ohledu nebudeš mít žádný problém ji zprovoznit.

vosy

Díky, na NAJU jsem narazil a koukal jsem se na tvé video z 2019.
Tak na problém jsem narazil, nedaří se mi to implementovat do TS.
Jsem v TS celkem novej.

dal jsem
npm install naja

pak jsem do .ts souboru dal

import naja from 'naja';
naja.initialize();

když se mi vykompiluje soubor .js

"use strict";
exports.__esModule = true;
var naja_1 = require("naja");
naja_1["default"].initialize();

tak prohlížeč hlásí
Uncaught ReferenceError: require is not defined

tsconfig.json mam nastaven takto:

{
    "compilerOptions": {
      "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
      "module": "commonjs",                                /* Specify what module code is generated. */
      "rootDir": "./__dev/ts",                                  /* Specify the root folder within your source files. */
      "outDir": "./www/js",                                   /* Specify an output folder for all emitted files. */
      "removeComments": true,                           /* Disable emitting comments. */
      "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
      "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
      "strict": true,                                      /* Enable all strict type-checking options. */
      "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
    }
}

nevím si s tím vůbec rady.

jiri.pudil

Moduly commonjs jsou určené pro Node, browser si s nimi neporadí. Nejspíš tam chceš použít es2020 nebo esnext a následně to ještě prohnat nějakým bundlerem jako třeba Webpack, Vite, Parcel, …

vosy

Takže "module": "commonjs" odstranit nebo tam dát „module“: „es2020“

Pak to proháním přes GULP

vosy

tak tsconfig.json jsem nastavil na

{
  "compilerOptions": {
    "target": "es2020",
    "module": "es2020",
    "rootDir": "./__dev/ts",
    "outDir": "./www/js",
    "removeComments": true
  }
}

v .ts souboru mám

import naja from 'naja';
naja.initialize();

když se .ts soubor vykompiluje do .js tak výsledek je tento

"use strict";
exports.__esModule = true;
var naja_1 = require("naja");
naja_1["default"].initialize();

a prohlížeč mi hlásí
Uncaught ReferenceError: require is not defined

David Kudera

gulp není bundler ale „jen“ glorifikovaný package.json / "scripts". Takže jak psal @jiripudil – Webpack, Vite, Parcel, …