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