TypeScript
More than just a Transpiler
@basarat
(google basarat)
#TypeScript
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 = getServerFoo();
let bar = getServerBar();
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
var funcs = [];
var i = 0;
// create a bunch of functions
for (; 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
still in
Specification
JavaScript
that run in user's
Browsers
The Bridge
JavaScript
in
Specification
JavaScript
that run in user's
Browsers
The Linter
Types
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;
}
The TypeScript Type System is Optional
Just TypeScript
function add(num1, num2) {
return num1 + num2;
}
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)
}
TypeScript really is Different
Types For JavaScript 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
`any`
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 Model = {
name: string;
}
type ViewModel = {
name : string;
}
let foo: Model = { name: "hello" };
let bar: ViewModel = { name: "world" };
foo = bar = foo; // FINE
Will it outlive my project lifetime?
Most likely outlive your project framework
Syntax Debate
CoffeeScript
DART
PureScript
way too many Foo -> JS languages
Comparison
let foo: number = 123;
foo = "hello";
Its all about that Linting
your favorite lib
Essentially Documentation
that can be used by IDEs
Moment.js
Redux
IMMUTABLE
Key Takeaway
TypeScript
Deep Dive
Thank you
TypeScript Challenger Brown bag 2020
By basarat
TypeScript Challenger Brown bag 2020
- 813