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