TypeScript
More than just a Transpiler
Less Wat
What is Wat
Awwwww
WAT
JavaScript
[].asdf()
TypeError: [].asdf is not a function
JavaScript
[] + []
JavaScript
[] + []
""
JavaScript
[] + {}
JavaScript
[] + {}
"[object Object]"
JavaScript
{} + []
!= {} + []
JavaScript
{} + []
0
JavaScript
{} + {}
JavaScript
{} + {}
"[object Object][object Object]"
V8
JavaScript
{} + {}
NaN
IE
JavaScript
"hello " + 1
Hello 1
JavaScript
"hello " + (-1)
Hello -1
JavaScript
"hello " - 1
JavaScript
NaN
"hello " - 1
But we can lint this
"hello" - 1
Can we lint this
function add(a,b){ return a+b }
add([], {})
Can we lint this
function add(a,b){ return a+b }
add(foo, bar)
Can we lint this
let foo = getFoo();
let bar = getBar();
someModule.add(foo,bar);
Linter on Steroids
JavaScript
let foo = [] + []
let bar = {} + []
let baz = [] + {}
let qux = {} + {}
let tix = "" - 123
TypeScript
What is
Just JavaScript
Linter
+
Transpiler
=
Why Transpiler?
Quick Example
node.on('click', function() {
console.log('clicked!');
})
Quick Example
node.on('click', () => {
console.log('clicked!');
})
node.on('click', function() {
console.log('clicked!');
})
Transpiled
Another Example
var funcs = [];
// create a bunch of functions
for (var i = 0; i < 3; i++) {
funcs.push(function() {
console.log(i);
})
}
// call them
for (var j = 0; j < 3; j++) {
funcs[j]();
}
Another Example
var funcs = [];
// create a bunch of functions
for (var i = 0; i < 3; i++) {
funcs.push(function() {
console.log(i);
})
}
// 3 , 3 , 3
Another Example
const funcs = [];
// create a bunch of functions
for (let i = 0; i < 3; i++) { // Note the use of let
funcs.push(function() {
console.log(i);
})
}
// call them
for (let j = 0; j < 3; j++) {
funcs[j]();
}
Another Example
var funcs = [];
// create a bunch of functions
for (let i = 0; i < 3; i++) { // Note the use of let
funcs.push(function() {
console.log(i);
})
}
// 0 , 1 , 2
But we won't need transpilation soon
The GAP
JavaScript
in
Specification
JavaScript
that run in user's
Browsers
The Bridge
JavaScript
in
Specification
JavaScript
that run in user's
Browsers
The linter
Static
vs.
Dynamic
Testing Claim
But I have tests
Fact
You can never provide good documentation without mentioning the types
Example
function leftPad (str, len, ch) {
Just JavaScript
function add() {
return arguments[0] + arguments[1];
}
Just JavaScript
function add(num1, num2) {
return num1 + num2;
}
Just TypeScript
function add(num1, num2) {
return num1 + num2;
}
The TypeScript Type System is Optional
Just TypeScript
function add(num1: number, num2: number): number {
return num1 + num2;
}
Conventions Claim
conventions are more powerful and less obtrusive than types
Conventions
People's name should be called `displayName`
People have a `userId`
Conventions
type Person = {
displayName: string,
userId: string,
}
function logName(person: Person) {
console.log(person.displayName)
}
Types For Developer
Convenience
over
Soundness
Conventional TypeSystems
class ThrowItAll
{
void show() throws Exception
{
throw new Exception("turtles");
}
void show2() throws Exception // Why throws is necessary here ?
{
show();
}
void show3() throws Exception // Why throws is necessary here ?
{
show2();
}
public static void main(String s[]) throws Exception // Why throws is necessary here ?
{
ThrowItAll o1 = new ThrowItAll();
o1.show3();
}
}
TypeScript's
TypeSystem
let foo = 123;
// .... later
foo.toPrecision(3); // FINE
Can move completely out of your way
TypeScript's
TypeSystem
let foo: any;
foo = 123;
foo = "Hello world";
// .... later
foo.toPrecision(3); // FINE
`any`
You Drive
Structural Type System
TypeScript's
TypeSystem
type Foo = {
name: string;
}
type Bar = {
name : string;
}
let foo: Foo = { name: "hello" };
let bar: Bar = { name: "world" };
TypeScript's
TypeSystem
type Foo = {
name: string;
}
type Bar = {
name : string;
}
let foo: Foo = { name: "hello" };
let bar: Bar = { name: "world" };
foo = bar = foo; // FINE
Will it outlive my project lifetime?
Most likely outlive your project framework
Syntax Debate
CoffeeScript
Its all about that Linting
your favorite lib
Essentially Documentation
that can be used by IDEs
Moment.js
Redux
IMMUTABLE
Demo
alm.tools
npm install alm -g
Website : alm.tools
Thank you
TypeScript Presentation Melbourne FEnders
By basarat
TypeScript Presentation Melbourne FEnders
- 1,601