Double colon types in JS 🚀

to-comment.md

Source

// test-code.js

add :: (number, number) => number

function add (x, y) {
  return x + y
}

Command

babel --plugins=transform-dctypes-comments --no-babelrc test-code.js

Output

// add :: (number, number) => number
function add(x, y) {
  return x + y;
}

Fork / Setup

Babel as well as its parser Babylon had to be patched/extended in order to parse the double-colon type syntax. You can find the Babylon fork here. Clone the feature branch and run yarn && npm run build && npm link.

The Babel fork can be found here. Clone the feature branch and run yarn && lerna bootstrap && npm run build in the project root directory, then cd packages/babel-core && rm -rf node_modules/babylon && npm link babylon. Finally cd ../babel-types && npm link.

To set up the samples in dctypes-test/ in the babel root directory:

cd dctypes-test/
npm i
rm -rf node_modules/babylon node_modules/babel-types
npm link babylon
npm link babel-types

npm run will show you the samples to run.

See also

It is worth mentioning that the double colon operator has already been introduced by the Function bind operator proposal and works well along with this proposed features. They don't really interfere with eatch other, since the double colon function-bind syntax only really makes sense when used as part of expressions, whereas the double colon types can only be written as separate statements.

to-flow-runtime.md

Source

// test-code.js

add :: (number, number) => number

function add (x, y) {
  return x + y
}

Command

NODE_ENV=development babel --plugins=transform-dctypes-to-flow,flow-runtime --no-babelrc test-code.js

Output

/* @flow */import t from "flow-runtime";


function add(x: number, y: number): number {
  let _xType = t.number();

  let _yType = t.number();

  const _returnType = t.return(t.number());

  t.param("x", _xType).assert(x);
  t.param("y", _yType).assert(y);

  return _returnType.assert(x + y);
}
t.annotate(add, t.function(t.param("x", t.number()), t.param("y", t.number()), t.return(t.number())));

See also

First turning the double-colon types into flow types, then utilizing flow-runtime to add runtime type assertions.

to-flow.md

Source

// test-code.js

name :: string

let name = 'Harry'

add :: (number, number) => number

function add (x, y) {
  return x + y
}

Command

babel --plugins=transform-dctypes-to-flow --no-babelrc test-code.js

Output

/* @flow */

let name: string = 'Harry';

function add(x: number, y: number): number {
  return x + y;
}

Getting the following error

Any idea what is causing this? What additional information should I provide to make debugging easier?

@amilajack Could reproduce it eventually. Try this in dctypes-test/:

rm -rf node_modules/babylon node_modules/babel-types
npm link babylon
npm link babel-types

PS: Created a repo for the idea: https://github.com/andywer/proposal-double-colon-types

@amilajack Ping. Since github tends to not notify its users about gist comments/replies ;)