Mixing JavaScript and TypeScript in Node js

0 votes
While having parts of a Node.js in plain ES6, is it possible to mix in some Typescript modules within the same project?

E.g. having some Types defined in TypeScript that are imported via require into plain ES6 files?
Jun 14 in TypeSript by Logan
• 2,140 points
10 views

1 answer to this question.

0 votes

Combine the following TypeScript compiler options

  1. --allowJs

    Explicitly supports mixed JavaScript and TypeScript sources

  2. --outDir

Since all files will be transpiled, it is necessary to output the resulting JavaScript into a different directory otherwise the input .js files would be overwritten1.

  1. --checkJs

This is completely optional. If specified, the compiler will typecheck JavaScript files, reporting errors just as in TypeScript files, where as it would otherwise tolerate inconsistencies.

As to using types declared in a TypeScript file in a JavaScript file, this can indeed be done.

TypeScript actually powers all of the JavaScript intellisense in tools like Visual Studio Code.

Types may be placed in JSDoc2 comments. These comments can reference types imported from TypeScript (.ts/.tsx/.d.ts) files. IDEs like Visual Studio Code will provide syntax-highlighting and auto completion within these comments.

There's a caveat however. Because there's no manifest syntax for types in JavaScript, they cannot be imported individually but must be attached to a value which is imported. This is most conveniently achieved via TypeScript's declaration merging as shown below.

Example:

a.ts

export default createThing;

function createThing(...args): createThing.Thing  {...}

namespace createThing {
  export interface Thing {...}
}

b.js

import createThing from './a';

/**
 * @param {createThing.Thing} thing
 */
export function takesThing(thing) {}

Notes:

1: --outDir is not necessary if you additionally specify the --noEmit flag. You would do this when using a tool such as SystemJS (with plugin-typescript) or Webpack (with ts-loader) to host the TypeScript transpiler. The same applies if you are using TS Node.

2: Although called JSDoc comments, they are interpreted in the context of the TypeScript type system, not the JSDoc system. Languages and tools like TypeScript, and Google's Closure Compiler, effectively hijack the JSDoc syntax for their own purposes and thereby confer potentially conflicting meanings to its constructs. This isn't usually a problem but it's worth knowing because it can be difficult to determine the applicability and correctness of these comments and the compatibility of the types that they reference or declare.

Remarks:

Although this question and answer is all about importing types for use in JavaScript files, it's very often unnecessary as the compiler will infer the types from the values of your expressions.

It's also worth mentioning that if you find yourself needing to write a lot of JSDoc style type annotations you are almost certainly better off converting the file to TypeScript as the syntax for expressing types in JSDoc is clumsy. Thanks to the --allowJs option, you can do this on a file by file basis, as described above.

answered Jun 15 by Nina
• 3,020 points

Related Questions In TypeSript

0 votes
0 answers

What is TypeScript and why would I use it in place of JavaScript?

Can you please describe what the TypeScript ...READ MORE

Jul 18 in TypeSript by Logan
• 2,140 points
8 views
0 votes
1 answer

How to declare and initialize a Dictionary in Typescript

Apparently this doesn't work when passing the ...READ MORE

answered May 31 in TypeSript by Nina
• 3,020 points
179 views
0 votes
1 answer

How to use moment.js library in angular 2 typescript app?

REFERENCE: https://momentjs.com/docs/#/use-it/typescript/ You can install this by using: npm install ...READ MORE

answered Jun 1 in TypeSript by Nina
• 3,020 points
52 views
0 votes
1 answer

How to install and run Typescript locally in npm?

It took me a while to figure ...READ MORE

answered Jun 8 in TypeSript by Nina
• 3,020 points
155 views
0 votes
0 answers

Typescript open-api cilent generation and usage of `fetch`

I am trying to generate a typescript ...READ MORE

Jul 18 in TypeSript by Logan
• 2,140 points
13 views
0 votes
1 answer

Truffle tests not running after truffle init

This was a bug. They've fixed it. ...READ MORE

answered Sep 11, 2018 in Blockchain by Christine
• 15,790 points
998 views
0 votes
1 answer

What is TypeScript and why would I use it in place of JavaScript?

TypeScript is a superset of JavaScript which primarily ...READ MORE

answered May 31 in TypeSript by Nina
• 3,020 points
10 views
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP