Deno - Importing TypeScript into a JS file

Question

In Deno, to import a TypeScript module, does your own code file have to be TypeScript? Or does Deno auto convert TypeScript to javascript before the module gets imported?

I want all my code files to be EcmaScript modules (js or mjs, but not ts).

Unlike everyone else these days, I want to avoid using TypeScript in my own code. I dislike the rigidity of static types and Typescript is not part of the EcmaScript standard. EcmaScript alone has all I need to manage big projects. To me, TypeScript is an antiquated technology that has not been necessary since the advent of ES6 modules. The types of problems TypeScript addresses are problems I do not have.

Lonnie it would be great if you could edit your question removing personal thoughts and keeping it compliant to the community guidelines, or at least more friendly. — Evandro Pomatti, May 19 '20 at 05:33
@EvandroPomatti What's unfriendly about avoiding TypeScript? Am I not entitled to state the reason for my question? Is TypeScript politically correct and it is unfriendly to avoid using it where possible? — Lonnie Best, May 20 '20 at 02:17
All the reasons you dislike Typescript, including that its "rigidity" and being "antiquated technology", are irrelevant to your question. The only reason to bring them up is to be implicitly argumentative. Pointing that out has nothing to do with being "politically correct". — Inigo, Mar 15 '22 at 22:20

Evandro Pomatti · Accepted Answer · 2020-05-19T05:35:24.117

You can write your own code with JavaScript.

Suppose you have or are using a TypeScript file/module numbers.ts:

export function isEven(n: number): boolean {
    if (n % 2 != 0) {
        return false
    }
    return true;
}

You can import and run it with an app.js JavaScript script:

import { isEven } from "./module.ts";

const one = isEven(1)
const two = isEven(2)

console.log(one)
console.log(two)

Deno does the TypeScript convertion to JavaScript internally. The process is the same when using standard or 3rd party libraries. The folks at the Deno project went even further by adding it as a goal:

https://deno.land/manual/introduction

Browser compatible: The subset of Deno programs which are written completely in JavaScript and do not use the global Deno namespace (or feature test for it), ought to also be able to be run in a modern web browser without change.

Name resolution must be fully qualified. There's a whole lot more about referencing type definitions in this dedicated page for using TypeScript:

https://deno.land/manual/getting_started/typescript

Deno supports both JavaScript and TypeScript as first class languages at runtime. This means it requires fully qualified module names, including the extension (or a server providing the correct media type)

Example:

import { config } from "https://deno.land/x/dotenv/mod.ts";

Following my example above you can use the bundle command to generate a single JavaScript file with all the dependencies. Bundling it will take my app.js and module.ts files and create a new file app.bundle.js which is JavaScript.

https://deno.land/manual/tools/bundler

$ deno bundle app.js app.bundle.js
Bundling file:///home/pomatti/projects/deno-sandbox/app.js
Emitting bundle to "app.bundle.js"
3111 bytes emmited.
$ deno run app.bundle.js
false
true

It can even be loaded in the browser:

Bundles can also be loaded in the web browser. The bundle is a self-contained ES module, and so the attribute of type must be set to "module". For example:
<script type="module" src="website.bundle.js"></script>

As for ECMAScript modules I would like to point out that TypeScript implements it as well.

https://github.com/microsoft/TypeScript/issues/2242

https://www.staging-typescript.org/docs/handbook/modules.html

Starting with ECMAScript 2015, JavaScript has a concept of modules. TypeScript shares this concept.

Now, the "static type" discussion falls out of scope of this forum so I won't touch it here, but I believe I covered everything else.

Should `numbers.ts` in 2nd line be `module.ts` as in the rest of the text? If so, can you use `numbers.ts` throughout? I'm new to server-side JS, still trying to grok all the approaches to modules. With `numbers.ts` I immediately knew *okay that'd be whatever .ts file I am using.* In a question partially about modules, `module.ts` sounds like it has special status: a convention, or something auto-generated. If it *is* what we're **supposed** to call it, please note that. But if it isn't, I think `numbers.ts` helped me more as the sample file name. Fantastic answer overall, thank you! — shanem, Jun 21 '21 at 20:05

Deno - Importing TypeScript into a JS file

1 Answers1

Linked