Perfect Match NodeJs & Typescript 63º Meeting @ LISBON 24/09/16 Marco Talento @Talento90 

Sponsors “GOLD” Twitter: @PTMicrosoft http://www.microsoft.com/portugal 

Sponsors “Silver” 

Sponsors “Bronze” 

Presentation Rating http://bit.ly/netponto-aval-63 

Me, Myself & I ● Software Engineer at NOS Inovação (BoldInt Consultant) ● Sharednode Founder ● Open Source Contributor Github: https://github.com/Talento90 Twitter: https://twitter.com/Talento90 LinkedIn: https://www.linkedin.com/in/marcotalento Blog: http://sharednode.org/author/mtalento90/ 

Agenda ● Introduction ● TypeScript ● Tools & IDE’s ● Debugging ● Demo ● Conclusion & Thoughts 

Introduction 

JavaScript ● Dynamic and interpreted ● Simple and easy to learn ● Cross Platform ● Runs Everywhere (Browser, Server Side) ● Big Community (Most popular language on Github) ● Continuous Evolution (ES5, ES6, ES7…) 

Node.js ● Node.js was originally written in 2009 by Ryan Dahl. ● Community Driven ● Used in many different applications (Web Dev, IOT, Real Time Apps) ● Adopted by big companies (Netflix, Microsoft, Uber, etc...) 

What is Node.js? ● "Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient." - Node.Js Site ● "Node.js is an open-source, cross-platform runtime environment for developing server-side web applications." - Wikipedia ● "Node.js is a platform that runs on top of V8 Google Engine and gives the possibility to build scalable server side applications using JavaScript." - Marco Talento 

How it works? http://www.codingeek.com/tutorials/nodejs/is-nodejs-single-threaded/ 

Http Server (JavaScript) 

JavaScript Problems ● Lack of type safety ● Easy to create “spaghetti” code ● Hard to scale 

Solution? 

TypeScript ● TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. ● Includes all features of ES6 and much more: types, interfaces, generics, etc... https://johnpapa.net/es5-es2015-typescript/ 

Types Prevent Bugs 

Definitions ● Definitions give intellisense and module typification. ● TypeScript definitions are suffixed by “.d.ts” ● Maintainable by community ● To reference the modules it’s necessary to include the following line on the top of each TS file: /// ○ Typings it’s a tool to manage definitions 

Typings Typings is a tool to manage and install TypeScript definitions. It uses typings.json to handle dependencies. Github: https://github.com/typings/typings ● Install typings: npm install typings --global ● Search for typings: typings search hapi ● Install Typings: typings install dt~hapi --global --save 

Example 

Definition doesn’t exist? LAZY: Ignore the TS errors, the generated code will work! Perfect: Create and contribute to the community ○ http://definitelytyped.org/guides/contributing.html 

Typescript (BAD) ● Lack of definitions ● Additional steps (compilation, typings, etc...) 

Typescript (GOOD) ● Easy to learn ● Full OOP (interfaces, abstract classes, etc...) ● TYPES prevents bugs ● Code Scalability ● Open Source ● Supported by Microsoft 

How to “TypeScript”? 1. Install: npm install -g typescript 2. Create file app.ts 3. Compile using the command line: tsc app.ts 4. Run the result: node app.js 

Compilation Result 

Compiler Configuration Use tsconfig.json to specify the compiler options. Options: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html 

Example (tsconfig.json) 

TypeScript 2.0 ● Improve Control Flow Analyzed Types ● The readonly properties ● Simplified declaration file (npm install --save @types/lodash) ● Tsconfig supports glob patterns (Include) ● More: https://github.com/Microsoft/TypeScript/wiki/Roadmap#20 

Node.js & TypeScript 

Using TypeScript 1. Install nodejs typings 2. Create a tsconfig.json and add module “commonjs” 3. Reference definitions 4. Ready to code your application 

Http Server (TypeScript) 

Project Structure ● Build - Compilation Result (JavaScript Files) ● Src - Application source code ● Test - Application Tests ● Typings - Contains all the definitions ● Gulpfile.js - Gulp Tasks (compile, clean, tests, etc…) ● Tsconfig.json - compiler options ● Tslint.json - TypeScript linter rules 

Tools & IDE’s 

IDE & Tools TSLint - A Linter for the TypeScript language. Typings - The TypeScript Definition Manager. IDE’s ● VS Code (https://code.visualstudio.com/) ● Sublime (https://github.com/Microsoft/TypeScript-Sublime-Plugin) ● Atom (https://atom.io/packages/atom-typescript) 

Debugging 

Debugging ● Source Maps ○ Files that contains the mapping between the TS and JS ○ Debuggers know how to interpret this files ○ Suffixed by filename.map.js { "version" : 3, "file" : "database.js", "sourceRoot" : "", "sources" : ["../../src/database.ts"], "mappings" : ";AAAA,MAAY,QAAQ,WAAM,UAAU,CAAC, ..." - BASE64 VLQ } 

Node Inspector ● Node Inspector is a debugger interface for Node.js applications that uses the Blink Developer Tools (formerly WebKit Web Inspector). ● The project maintenance and support is sponsored by StrongLoop. Install: npm install -g node-inspector Run: node-debug app.js 

Node Inspector Interface 

DEMO Let’s put everything together! 

Conclusion & Thoughts 

Conclusions & Thoughts ● Easier to write scalable & reliable code ● JavaScript tools also works with TypeScript ● Improve developers productivity ● Can be used everywhere (browser, node.js) ● TypeScript it’s growing fast and adopted by big companies 

References ● https://nodesource.com/blog/needtonode-recap-best-practices-using-type script-with-node-js/ ● http://jiajizhou.com/2015/04/15/nodejs-profiling-tools.html ● http://www.typescriptlang.org/ ● https://www.gitbook.com/book/basarat/typescript/details ● http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ 

Questions? 

Thank you :)