0

I'm trying to build a JS full stack framework so, as the 2nd step, I wanna import something globally. let me explain, I'm tryna use tsx without react, so I needed a lib to give me createElement function.

so I used this lib type-html as tHTML. it just works fine. my query here is, how to avoid manual import tHTML file into every .tsx?
eg:

// Home.tsx
import * as tHTML from "typed-html";
{*...code...*}

// Button.tsx
import * as tHTML from "typed-html";
{*...code...*}

So, I wanna remove the part of manually importing tHTML. i wanna make the users to directly write their tsx and not importing thtml on every tsx they make

Here's what ive tried:
I created a .ts file named "global" and inside that, i wrote:

declare global {
    const tHTML = type import("typed-html")
}

it kinda worked ig. coz it made all Cannot find name 'tHTML' errors disappear. but when i checked the browser, it said Can't find variable: tHTML

1 Answers1

0

This is how you should do it -

import tHTML from "typed-html";

declare global {
  type tHTML = typeof tHTML;
  
  export var tHTML: tHTML;

  export interface Global {
   tHTML: tHTML;
  }
}

global.tHTML = tHTML; // Add this in the main script, so that `tHTML` is added on the `global` object and is available for use.
0xts
  • 2,411
  • 8
  • 16
  • thanks [@0xts](https://stackoverflow.com/users/7028056/0xts) i came up with this. minimal and working version of your code. thanks. thanks a lot ```import tHTML from "typed-html"; declare global { var tHTML: any;} global.tHTML = tHTML;``` –  Aug 15 '23 at 09:55
  • Why would you type it with any? Don't you need typings? My version adds an extra `Global` interface export so it works in pre v12 of Node. Also, it's nice to have typings for an object which's in global scope to have exported them globally, because you don't want to use `typeof` in all the places. Consider upvoting and accepting the answer if it helped you solve the issue. – 0xts Aug 15 '23 at 10:02