How do I compile code with globals in Typescript?

Thony

12/8/23, 4:18 PM

Hi I'd like to use Typescript in my Drupal 9 Theme. I've setup compilation... but once I start declaring new behaviors like so:

(function ($: any, Drupal: any) {
  Drupal.behaviors.my_behavior = {
    attach: function (context: any, settings: any) {
    }
  };
})(jQuery, Drupal);

Ts compiler give me TS2304: Cannot find name 'jQuery'. and TS2304: Cannot find name 'Drupal'. while everything works fine in vanilla js. Here is my tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true
  }
}

Seems variable from the global scope are not loaded with ts files, how can I circumvent this problem and make it works with drupal js framework ?

197

1 + 7

cilefen

12/8/23, 4:24 PM

https://stackoverflow.com/questions/13252225/call-a-global-variable-inside-module

Thony

12/8/23, 4:31 PM

Thanks that did the trick. Don't know if we should close the question though: it could help other drupalers new to typescript like me

Clive

12/8/23, 4:54 PM

I’d tend to agree that this isn’t Drupal-specific enough for here (it’s the equivalent of a PHP variable not being defined). Your chosen solution isn’t ideal either, better to include the proper type definitions in your project, ie https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jquery/index.d.ts

cilefen

12/8/23, 4:55 PM

This is about TypeScript syntax—it is not Drupal-specific.

Thony

12/8/23, 5:02 PM

All true, but, when you try to declare your first ts behavior you hit this weird wall seemingly unrelated to types and get confused, wish justify a question in my book => because it helps. but whatever it is closed anyway...

leymannx

12/8/23, 5:47 PM

You should get rid of jQuery. jQuery was cool 20 years ago when there was still InTeRnOt ExPloUr 8. But nowadays you should get rid of that dependency and write Vanilla JS.

Clive

12/8/23, 6:42 PM

@Thony after a bit of thought i was probably too quick to vote to close this. The jquery part has a generic answer but `Drupal` might have some proper type definitions out there somewhere and if so it would be useful to have that documented somewhere

Score:1

Drupal

Thony

12/8/23, 4:32 PM

Thanks to cilefen and https://stackoverflow.com/questions/13252225/call-a-global-variable-inside-module

this works:

declare var jQuery: any;
declare var Drupal: any;

(function ($: any, Drupal: any) {
  Drupal.behaviors.api_table_ieceecategories_graphic = {
    attach: function (context: any, settings: any) {},
  };
})(jQuery, Drupal);

DISC: I am using "any" type to prove compilation works, good typescript should use precise typing...

+ 0

Elon Musk

I sit in a Tesla and translated this thread with Ai:

EN: How do I compile code with globals in Typescript?

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.