Best way to share a js object between a Typescript frontend and NodeJs backend

Question

I\'m writing an application that uses Angular2 with Typescript as frontend, and NodeJS as backend. I\'ve written a javascript object I wish to share between the frontend and

Answer 1

The "cleanest" way I know to do this is to write modular script on both ends and create a library of objects you want to share (so that the shared objects are defined in a single location)

Set-up

Frontend: Typescript with either

• target ES6, module: commonjs + Babel (requires Typescript 1.7)
• or target ES5, module: commonjs

bundled using webpack or browserify

Backend: ES6 (with --harmony flag on node) or ES5

Library

Create a library, say shared, written in Typescript and create the exported Object class

export default class MyObject{ ... }

Make sure the library is compiled with declaration: true (in tsconfig for instance): tsc will generate the js + the typings (declarations).

In the package.json of the shared library, make sure the entry typings is set to point to the generated MyObject.d.ts file. If there are multiple objects; create an index.ts file that re-exports all the objects and point typings to index.d.ts

Usage

Frontend: since you are now using modular JS/TS, import your object directly from Typescript

import MyObject from 'shared'

The typescript transpiler will automatically find the .d.ts definition from the typings entry of shared's package.json.

Backend: simply require('shared')

Note: if there are multiple shared objects, do not use default exports in shared: they cannot be re-exported.