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.
