Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

My Answer: Not Yet

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

For Example: TypeScript

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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));

Slide 10

Slide 10 text

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'.

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

And More

Slide 14

Slide 14 text

TypeScript The toolkit incudes auto completion service:

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Cons.

Slide 17

Slide 17 text

Dif culty of using JavaScript assets

Slide 18

Slide 18 text

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 :(

Slide 19

Slide 19 text

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 :(

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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());

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

The Answer in ow v0.35.0 promise is: Promise

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Thank you!