How Do We Get Along With Static Types Lightning Talk by @__gfx__ Tokyo Node Fest 2016, 2016/11/13, Markcity

No content

My Activities on JavaScript 2012: Developed DeNA JSX (jsx.github.io) 2016: bitjourney/ci-npm-update in TypeScript 2016: Try to introduce TypeScript to an webservice, but resulted in failure TypeScript+React/JSX is just an ealy stage

Q: Do you use static-typed altJS in production?

My Answer: Not Yet

Static Typed altJS TypeScript (TS) Flowtype (Flow) Dart, Haxe, Kotlin, and so on

For Example: TypeScript

TypeScript Lead by Microsoft First-class support in Visual Studio Code Modern Static Typing Support Facebook JSX and ES2017 async & await

TypeScript Syntax: ES2017 + type annotations class Pair { first: F; second: S; constructor(first: F, second: S) { this.first = first; this.second = second; } } console.log(new Pair("foo", 10));

TypeScript Static Typing = A system that analizes program ow and validate its semantics i.e. kind of "Powerful Lint" function multiply(a: number, b: number) { return a * b; } console.log(multiply("a", "b")); // Error! // Argument of type '"a"' is not assignable // to parameter of type 'number'. console.log(multiply(2, 3).length); // Error! // Property 'length' does not exist on type 'number'.

TypeScript In TS and Flow: Type ≒ Set of Values // name must be "foo" or "bar" function f(name: "foo" | "bar") { console.log(name); } console.log(f("foo")); console.log(f("FOO")); // Error! Event names in addEventListener() Nullable type is represented in string | null

So as Flowtype $ flow f.flow.js f.flow.js:8 8: f("FOO"); ^^^^^^^^ function call 8: f("FOO"); ^^^^^ string. This type is incompatible with 3: function f(name: "foo" | "bar") { ^^^^^^^^^^^^^ string enum Found 1 error

And More

TypeScript The toolkit incudes auto completion service:

Flowtype Flowtype is also considered as "powerful lint" owtype.org says "a static type checker for JavaScript" auto completion ready: flow autocomplete

Cons.

Dif culty of using JavaScript assets

How Flowtype uses JS assets Flow is a JavaScript extension and thus can import ".js" les as owtype scripts (!) flow suggest $jsfile generates a patch to add type annotations to the speci ed pure JavaScript code ow-typed: the type de nition registry for Flow However, ow-typed does not cover all the libraries of the world :(

How owtype uses JS assets TypeScript requres type de nition les (".d.ts") require('foo.js') is possible but returns any :( De nitelyTyped: the type de nition registry for TypeScript However, De nitelyTyped does not cover all the libraries of the world :(

How Dart uses JS assets Dart requires type de nitions source_gen , like Java annotation processor, generates source code in compile time dts2dart: a tool to convert ".d.ts" to Dart type de nitions Migration to Dart is too dif cult because Dart is very different from JavaScript

Dif culty of Static Typing Do you know the return type of the promise ? class Promise { static resolve(T value): Promise; static resolve(): Promise; } const promise = (isX() ? Promise.resolve("foo") : Promise.resolve());

The Answer in tsc v2.1.1 promise is: Promise | Promise not: Promise nor: Promise

The Answer in ow v0.35.0 promise is: Promise

Okey, how can I use static- typed altJS nowadays?

Flowtype is acceptable IMO: Extending ".js" les is a bad idea :( but TypeScript is too dif cult to use in production because of missing type de nitions If TypeScript compiler supported plugins to hook reading script les, it would can read pure JavaScript and/or Flowtype source les. power-assert transpiler could also be implemented as a tsc plugin

The Future I have a dream that there's the standard of static- typed JavaScript, based on Flowtype and TypeScript It's not just a dream because the syntaxes of Flow and TS are very alike Not neseccarily an internaltional standard, but a standard made by cooperation of Microsoft and Facebook I HOPE IT, REALLY

Thank you!