TypeScript
Antoni Huguet Vives
Senior front-end developer
@GatMesquer

What's the JavaScript comunity saying about TypeScript ?
“I now actually understand most of our own code!”
-- Brad Green
"The type system mimics the actual JS spec as well as the common JS practices in the community really closely and so it feels very natural to use"
-- Misko Hevery
“TypeScript helped us to reuse the team’s knowledge and to keep the same team velocity by providing the same excellent developer experience as C# ... A huge improvement over plain JavaScript.”
-- Valio Stoychev


What is this fuss all about ?
Large scale JavaScript development is hard
- JavaScript was originally developed in 10 days by Brendan Eich while he was working for Netscape.
Large scale JavaScript development is hard
- JavaScript was originally developed in 10 days by Brendan Eich while he was working for Netscape.
Large scale JavaScript development is hard
!!!
- JavaScript was originally developed in 10 days by Brendan Eich while he was working for Netscape.
Large scale JavaScript development is hard
- Was intended for 100 / 1000 lines of code.
- JavaScript was originally developed in 10 days by Brendan Eich while he was working for Netscape.
Large scale JavaScript development is hard
- Was intended for 100 / 1000 lines of code scripts.

- JavaScript was originally developed in 10 days by Brendan Eich while he was working for Netscape.
Large scale JavaScript development is hard
- Was intended for 100 / 1000 lines of code scripts.




- JavaScript was originally developed in 10 days by Brendan Eich while he was working for Netscape.
Large scale JavaScript development is hard
- Was intended for 100 / 1000 lines of code scripts.





- JavaScript was originally developed in 10 days by Brendan Eich while he was working for Netscape.
Large scale JavaScript development is hard
- Was intended for 100 / 1000 lines of code scripts.

- JavaScript was originally developed in 10 days by Brendan Eich while he was working for Netscape.
Large scale JavaScript development is hard
- Was intended for 100 / 1000 lines of code scripts.
100 / 1000 lines turned into 100.000

In "spaghetti code" the pieces of code are so tangled that it's nearly impossible to add or change something without unpredicably breraking something somewhere else.
/*
All hope abandon, ye who enter to debug here!
.___.
/) ,-^ ^-.
// / \
.-------| |--------------/ __ __ \-------------------.__
|WMWMWMW| |>>>>>>>>>>>>> | />>\ />>\ |>>>>>>>>>>>>>>>>>>>>>>:>
`-------| |--------------| \__/ \__/ |-------------------'^^
\\ \ /|\ /
\) \ \_/ /
| |
|+H+H+H+|
\ /
^-----^
*/
fs.readdir(source, function (err, files) {
if (err) {
console.log('Error finding files: ' + err)
} else {
files.forEach(function (filename, fileIndex) {
console.log(filename)
gm(source + filename).size(function (err, values) {
if (err) {
console.log('Error identifying file size: ' + err)
} else {
console.log(filename + ' : ' + values)
aspect = (values.width / values.height)
widths.forEach(function (width, widthIndex) {
height = Math.round(width / aspect)
console.log('resizing ' + filename + 'to ' + height + 'x' + height)
this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(err) {
if (err) console.log('Error writing file: ' + err)
})
}.bind(this))
}
})
})
}
})
/////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////
/// ///
/// DO NOT CHANGE THE ORDER OF THESE IMPORTS ///
/// If you do, the website will blow up ///
/// ///
/////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////
@import "settings";
@import "fonts/clarendon.woff";
@import "fonts/clarendon.woff2";
@import "fonts/opensans.woff";
@import "fonts/opensans.woff2";

Front-end developer of the early XXI century
I have no memory of this code #_#

:(
TypeScript

Code JavaScript like a sir
TypeScript: JavaScript that scales
TypeScript

Open source
TypeScript

Any Browser. Any host. Any OS
TypeScript

A statically typed superset of JavaScript that compiles to plain JavaScript
TypeScript

A statically typed superset of JavaScript that compiles to plain JavaScript
TypeScript

{Js}
Starts and ends with JavaScript
TypeScript

ES 5
TypeScript

ES 5
ES2015
Core + Decorators
TypeScript

ES2016
ES 5
ES2015
Async / await
Core + Decorators
TypeScript

ES2016
TypeScript
ES 5
ES2015
Async / await
Core + Decorators
Static type checking
Support for JavaScript packaging
TypeScript

Great tooling enabled by static types
Features from the future, today!



TypeScript


TypeScript




TypeScript


TypeScript

TypeScript

Show me the money code !!!
TypeScript

Demo time !
Let's refactor together
TypeScript

Step 1: Convert your project to TypeScript
TypeScript

Step 1: Convert your project to TypeScript
- Rename your files to TypeScript
- Create a compiler config file
TypeScript

Step 2: Define your types
- string
- number
- boolean
- array
- union type
- custom ( via interfaces )
- any ( literally, anything )
TypeScript

Step 3: Create your custom types
- string
- number
- boolean
- array
- union type
- custom ( via interfaces )
- any ( literally, anything )
TypeScript

What is an interface ?
TypeScript

What is an interface ?
A code contract
TypeScript



You were asked to build this:
But built this:
TypeScript

You were asked to build this:
But built this:


TypeScript

Which is like coding this:
Instead of this:
let person = {
fName: ‘Dave’,
lName: ‘Johnson
}
let person = {
firstName: ‘Dave’,
lastName: ‘Johnson
}
TypeScript

Step 4: Use future features, today
- Lambda functions () =>
- Template literals
- ...
TypeScript

Step 5: Benefit from IDE features
There are only two hard things in Computer Science:
cache invalidation and naming things.
-- Phil Karlton
TypeScript

Step 6: Make the types flow (generics)

TypeScript

Step 7: Put some architecture
- Real world libraries.
TypeScript

DefinitelyTyped

TypeScript

Step 8: Modularise
- Import
- Export
- Implement
TypeScript

Step 9: Meet the compiler
- Generate typings automatically
- Source-maps

TypeScript


TypeScript

TypeScript


TypeScript

Muito obrigado : )
Thank you !
TypeScript
By ajrkemp
TypeScript
- 1,050