Transpiling with Deno

Deno is a fun environment to work in for learning TypeScript. As I have become comfortable writing server side TypeScript code I know I want to also be able to use some modules in JavaScript form browser side. The question is then how to you go from TypeScript to JavaScript easily with getting involved with a bunch-o-npm packages? Turns the solution in deno is to use the deno_emit module. Let’s say I have a TypeScript module called hithere.ts. I want to make it available as JavaScript so I can run it in a web browser. How do I use the deno_emit module to accomplish that?

• Write a short TypeScript program
  • include the transpiler module provided with emit
  • use the transpiler to generate the JavaScript code
  • output the JavaScript code

Here’s what transpile.ts might look like:

/* Get the transpiler module from deno's emit */
import { transpile } from "https://deno.land/x/emit/mod.ts";

/* Get the python to my CL.ts as a URL */
const url = new URL("./hithere.ts", import.meta.url);
/* Transpile the code returning a result */
const result = await transpile(url);

/* Get the resulting code and write it to standard out */
const code = result.get(url.href);
console.log(code);

Here’s the hithere.ts module:

/**
 * hithere takes a name and returns a string of "hi there ", a name and "!". If the name is null
 * it returns "Hello World!".
 *
 * @param {string | null} name
 * @returns {string}
 */
function hithere(name: string | null): string {
    if (name === null) {
        return "Hello World!";
    }
    return `hi there ${name}!`;
}

To compile the module I need to give transpile.ts some permissions.

• –allow-read (so I can read my local module
• –allow-env (the transpiler needs the environment)
• –allow-net (the deno emit module is not hosted locally)

The command line could look like this.

deno run --allow-read --allow-env --allow-net \
  transpile.ts

The result is JavaScript. It still has my comments in the code but doesn’t have the TypeScript specific annotations.

/**
 * hithere takes a name and returns a string of "hi there ", a name and "!". If the name is null
 * it returns "Hello World!".
 *
 * @param {string | null} name
 * @returns {string}
 */ function hithere(name) {
  if (name === null) {
    return "Hello World!";
  }
  return `hi there ${name}!`;
}