`import type` without producing an ES module? | TypeScript Community | Page 1

west veldt Apr 28, 2023, 3:35 AM

#

We're trying to write a script to run standalone in a web browser, inside a script tag, and it's not a module.

However, there are some globals that are made available by other scripts, that we want to have typechecked by TypeScript.

Right now, we're using import type, specifically importing the type, then using declare const ... to declare the presence of the global in the surrounding environment.

However, using import type at all seems to cause TSC to conclude that our standalone script that only accesses global variables is somehow an ES module. It then randomly adds stuff to our script that crashes it at runtime and prevents it from working.

TSC emits Object.defineProperty(exports, "__esModule", { value: true });, but exports does not exist. Because the script is not a dang module. And we can't find any way to turn this off, or any alternative to import type that allows us to properly include the type definitions for the globals that already exist, that we're not importing because this is 100% not a module.

Is there any way to include these type definitions without becoming a module, or a way to stop TSC from emitting code that literally crashes when we run the code standalone and not in a module? Because it's not a module, and it shouldn't be a module.

type="module" on the script tag is an okay workaround, but we're upset with TypeScript deciding that our code is a module in the first place, because it's not. It's literally not a module and we really need TSC to see that. How?

crisp minnow Apr 28, 2023, 3:48 AM

#

can’t you import them in an ambient declaration?

#

and augment globalThis in that ambient declaration

#

The thing is as soon as you use an import statement TS sees your file as a module so you have to avoid that in the script itself

crisp minnow Apr 28, 2023, 4:12 AM

#

just to illustrate better what I mean, just create a file called for instance global.d.ts somewhere in your source folder where it will be picked up by TS, add the following contents:

import { Foo } from ‘foopkg’

declare global {
  const foo: Foo
}
 export {}

#

and you should have that var available in your script without needing an import statement

west veldt Apr 28, 2023, 4:46 AM

#

crisp minnow and you should have that var available in your script without needing an import ...

Huh, I'll give it a try, give us a moment~

west veldt Apr 28, 2023, 5:58 AM

#

crisp minnow just to illustrate better what I mean, just create a file called for instance gl...

It looks like this works for making the global variable available, but I can't figure out how to make the types available under a namespace. Right now we use this:```ts
// @ts-ignore
import type * as ort from 'onnxruntime-common'

declare const ort: typeof import('onnxruntime-common')which is hacky for reasons (including needing an `@ts-ignore`) but *with the `import type` we can then use types such as `ort.TypedTensor`* and with the `global.d.ts` approach I can't figure out how to do it. Here is the `global.d.ts`:ts
declare global {
const ort: typeof import('onnxruntime-common')
}

export * as ort from 'onnxruntime-common'```but it still requires import { ort } from './global' in order to use the ort namespace which is the nono

west veldt Apr 28, 2023, 6:16 AM

#

ugh. We are going through terrible pain again finding out that TypeScript conveniently disallows every single thing that could possibly allow this.```ts
declare global {
const ort: typeof import('onnxruntime-common')
export * as ort from 'onnxruntime-common'
}

export {}"Exports and export assignments are not permitted in module augmentations". why? because TSC hates us, of course! why else would it intentionally disallow every possible solution?ts
declare global {
const ort: typeof import('onnxruntime-common')
import * as ort from 'onnxruntime-common'
}

export {}obviously nopets
import * as ort_ from 'onnxruntime-common'

declare global {
export import ort = ort_
}

export {}
nope!ts
declare global {
namespace ort {
export * from 'onnxruntime-common'
}
}

export {}not even closets
declare global {
namespace ort {
import * from 'onnxruntime-common'
}
}

export {}syntax error!ts

declare global {
const ort: typeof import('onnxruntime-common')

type ort = import('onnxruntime-common')

}

export {}
sadhasfkjsgahfjkdgdsts
import * as ort_ from 'onnxruntime-common'

declare global {
const ort: typeof import('onnxruntime-common')

namespace ort = load the stupid package 'onnxruntime-common'

}

export {}

#

declare global {
    const ort: typeof import('onnxruntime-common')
}

export namespace ort {
    export * from 'onnxruntime-common'
}
```nopeeee

TypeScript has a dedicated error for each and every one of these telling us that the exact thing we're trying to do is disallowed because apparently "screw you that's why"

#

there's no possible way it's supposed to be this hard. everyone must have simultaneously screwed up in unison to accidentally create the world's most hostile compiler for making actual scripts that are loaded on a webpage after other scripts

#

how am I supposed to import types if trying to import types causes my script to turn into a "module" and TSC will generate code that causes it to crash? absolutely no idea

#

~~the solution, of course, is to go back to the stone age. teaching sand to think was a mistake.~~

#

we're going to go punch a wall or something. ugh

west veldt Apr 28, 2023, 6:42 AM

#

Okay, it looks like we have a partial solution if we redeclare every single type we use:```ts
declare global {
const ort: typeof import('onnxruntime-common')

namespace ort {
    type InferenceSession = import('onnxruntime-common').InferenceSession
    type TypedTensor<T> = import('onnxruntime-common').TypedTensor<T>
}

}

export {}```This is... okay I guess, but... annoying

crisp minnow Apr 28, 2023, 9:51 AM

#

Another approach could be to use reference syntax, which is actually kinda deprecated outside specific situations but

#

/// <reference types="onnxruntime-common" />

<all types in onnxruntime should be globally available here>

west veldt Apr 28, 2023, 10:27 AM

#

crisp minnow ```ts /// <reference types="onnxruntime-common" /> <all types in onnxruntime sh...

It doesn't look like that works inside the namespace

crisp minnow Apr 28, 2023, 10:27 AM

#

I meant inside the script file itself

west veldt Apr 30, 2023, 1:41 AM

#

crisp minnow I meant inside the script file itself

but that makes them globally available when I want them inside an ort namespace

#

when I call ort.InferenceSession.create(...) I want an ort.InferenceSession, not just InferenceSession

#

is there any way to do that with a reference?

crisp minnow Apr 30, 2023, 1:43 AM

#

I think I may have found a solution for you in the meantime

#

A better one than those references

#

lemme check if it works

west veldt Apr 30, 2023, 1:43 AM

#

yeah?

#

alright~

crisp minnow Apr 30, 2023, 1:49 AM

#

Yes works

#

Ok going back to those ambient files

#

just make ort.d.ts

#

put in it:

export * from 'onnxruntime-common'
export as namespace ort

#

profit

#

(you can delete the global.d.ts of course)

#

ah but wait, could it be that that doesn't export ort.TypedTensor ?

west veldt Apr 30, 2023, 1:51 AM

#

crisp minnow put in it: ```ts export * from 'onnxruntime-common' export as namespace ort ```

Wait you can export as namespace?? Hold on let me try this

crisp minnow Apr 30, 2023, 1:52 AM

#

I see ort.InferenceSession

west veldt Apr 30, 2023, 1:52 AM

#

I'll try it out when I'm busy making sure my IDE settings sync works properly

crisp minnow Apr 30, 2023, 1:52 AM

#

Yes it puts all the exports of your ambient module in a global namespace

west veldt Apr 30, 2023, 1:53 AM

#

crisp minnow Yes it puts all the exports of your ambient module in a global namespace

well that would have been helpful to know !! thank you so much I'll try it in a minute

#

I hate how terribly typescript is documented, there is no reference, only a bunch of stupid tutorials

#

if this does what we think it does .... right after we are done configuring the stupid settings sync here we'll try this

crisp minnow Apr 30, 2023, 1:55 AM

#

The strange thing is I'm not seeing all of the exports

#

ugh

#

I think it also didn't export the types

#

only the values

west veldt Apr 30, 2023, 1:57 AM

#

crisp minnow put in it: ```ts export * from 'onnxruntime-common' export as namespace ort ```

this works !!! we no longer even need to declare const ort or declare global or anything. we literally just put this in a file and it does exactly what we want. THANK YOU SO MUCH

#

!resolved

crisp minnow Apr 30, 2023, 1:59 AM

#

Are you sure?

west veldt Apr 30, 2023, 2:00 AM

#

crisp minnow Are you sure?

yes I am, our entire main script file typechecks and everything, and even builds and runs properly in the browser

#

just having that in an ort.d.ts and nothing else

#

thank you so much~

crisp minnow Apr 30, 2023, 2:00 AM

#

yw in that case 😄

west veldt Apr 30, 2023, 2:00 AM

#

that's what we have been looking for this entire time we're so upset that it was so difficult to find

#

this should be documented this should be documented

#

it is documented in the most ridiculous way as a footnote in some pages that have nothing to do with this

crisp minnow Apr 30, 2023, 2:01 AM

#

I also didn't know about it tbh

#

I went to look in lodash's DefinitelyTyped source

west veldt Apr 30, 2023, 2:01 AM

#

wooow

crisp minnow Apr 30, 2023, 2:01 AM

#

To see what they do

west veldt Apr 30, 2023, 2:01 AM

#

yeah and since ambient modules are just auto-imported regular modules ...

#

I can sorta see how that happened but it's insane that it took that

#

this should be documented

crisp minnow Apr 30, 2023, 2:02 AM

#

Yes I agree

#

I'm curious how it comes that I'm not getting all the types though, maybe it's my tsconfig

west veldt Apr 30, 2023, 2:02 AM

#

this is the most disappointing/depressing google search we have ever done https://www.google.com/search?q="export+as+namespace"+site%3Atypescriptlang.org

#

that's so terrible

crisp minnow Apr 30, 2023, 2:03 AM

#

Hey there's some templates 😄

west veldt Apr 30, 2023, 2:03 AM

#

it's so terrible that we might have to find where the stupid docs are and make a pull request because it's actually outrageous

#

one second

#

(re "find where the stupid docs are") https://github.com/microsoft/TypeScript-Website/blob/v2/packages/documentation/copy/en/reference/Namespaces and Modules.md and friends

GitHub

TypeScript-Website/Namespaces and Modules.md at v2 · microsoft/Type...

The Website and web infrastructure for learning TypeScript - TypeScript-Website/Namespaces and Modules.md at v2 · microsoft/TypeScript-Website

crisp minnow Apr 30, 2023, 2:05 AM

#

https://www.typescriptlang.org/docs/handbook/modules.html#umd-modules

Documentation - Modules

How modules work in TypeScript

#

That's the section

#

But yeah

#

hard to find if you don't know what you're looking for

west veldt Apr 30, 2023, 2:05 AM

#

crisp minnow That's the section

did just post a google search

crisp minnow Apr 30, 2023, 2:05 AM

#

Ah right didn't see it was in there

west veldt Apr 30, 2023, 2:06 AM

#

it was a google search for all occurrences of "export as module" across the entire docs website

#

and there are only like 3 hits, only one of which even mentions the thing in prose

#

we might PR to edit this section https://github.com/microsoft/TypeScript-Website/blob/78b88c3c6cf5ee3d2287f43dec4f720f11a85ef4/packages/documentation/copy/en/reference/Modules.md#ambient-modules to mention ambient modules that use export as namespace to represent something like other script files in a browser

GitHub

TypeScript-Website/Modules.md at 78b88c3c6cf5ee3d2287f43dec4f720f11...

The Website and web infrastructure for learning TypeScript - TypeScript-Website/Modules.md at 78b88c3c6cf5ee3d2287f43dec4f720f11a85ef4 · microsoft/TypeScript-Website

#

because that's where we would look

crisp minnow Apr 30, 2023, 2:09 AM

#

Myeah maybe

west veldt Apr 30, 2023, 2:10 AM

#

oh great that's the page you just linked

#

I guess we'll just improve the UMD modules section if we can

crisp minnow Apr 30, 2023, 2:10 AM

#

Heh

#

It can also be used as a global variable, but only inside of a script. (A script is a file with no imports or exports.)

#

it's right there 😄

west veldt Apr 30, 2023, 2:12 AM

#

it's not, because the package published to npm is not a UMD module, so I ignored that section. I'm going to try to make something that can be skimmed by someone who has been suffering for over two hours straight, i.e. not reading every single word of every page because they're having a panic attack

#

anyway, to PR, no need to chat any more, thank you

crisp minnow Apr 30, 2023, 2:17 AM

#

I'm sorry, didn't mean to offend you. I agree discovery is kind of terrible in the TS docs.

west veldt Apr 30, 2023, 2:19 AM

#

you didn't really offend me but I really did not want to explain exactly why "containing some form of correct information via a technicality" is not a substitute for "being discoverable for this use case"

#

having "export as namespace is good for UMD modules" and "these modules can be accessed through a global variable" is cool but we were looking for "having an ambient module that re-exports an existing package under a global namespace" and it never registered that export as namespace could redirect re-exports as well because it's Literally Never Stated

#

not to mention that we didn't even try re-exports in the first place because we thought having them at the top level would be useless, so it absolutely wasn't on our mind to have anything involving those

#

but anyway yeah done with that lol

crisp minnow Apr 30, 2023, 2:25 AM

#

makes sense

#

anyway, glad I could help you

west veldt Apr 30, 2023, 2:28 AM

#

thank you~

#`import type` without producing an ES module?