![Page 1: HOW TO JAVASCRIPT BETTER€¦ · What is TypeScript? Tech Talks Conference –Sofia 2015 5 Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs. TypeScript is a typed](https://reader034.vdocuments.site/reader034/viewer/2022042908/5f39969cec12ee5e112f2c35/html5/thumbnails/1.jpg)
HOW TO JAVASCRIPT BETTER
A TypeScript STORY
Tech Talks Conference – Sofia 2015 1
By Viktor Mitev
![Page 2: HOW TO JAVASCRIPT BETTER€¦ · What is TypeScript? Tech Talks Conference –Sofia 2015 5 Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs. TypeScript is a typed](https://reader034.vdocuments.site/reader034/viewer/2022042908/5f39969cec12ee5e112f2c35/html5/thumbnails/2.jpg)
The problem?
Tech Talks Conference – Sofia 2015 2
Can break silently and be discovered months later.
Lack of standardised set of development tools.
JavaScript is a dynamic language: 𝑬𝑟𝑟𝑜𝑟𝑠= 𝒎𝑜𝑟𝑒𝒄𝑜𝑑𝑒𝟐
![Page 3: HOW TO JAVASCRIPT BETTER€¦ · What is TypeScript? Tech Talks Conference –Sofia 2015 5 Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs. TypeScript is a typed](https://reader034.vdocuments.site/reader034/viewer/2022042908/5f39969cec12ee5e112f2c35/html5/thumbnails/3.jpg)
The reaction...
Tech Talks Conference – Sofia 2015 3
© This video is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License
![Page 4: HOW TO JAVASCRIPT BETTER€¦ · What is TypeScript? Tech Talks Conference –Sofia 2015 5 Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs. TypeScript is a typed](https://reader034.vdocuments.site/reader034/viewer/2022042908/5f39969cec12ee5e112f2c35/html5/thumbnails/4.jpg)
The solution?
Tech Talks Conference – Sofia 2015 4
Compiled JavaScript
![Page 5: HOW TO JAVASCRIPT BETTER€¦ · What is TypeScript? Tech Talks Conference –Sofia 2015 5 Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs. TypeScript is a typed](https://reader034.vdocuments.site/reader034/viewer/2022042908/5f39969cec12ee5e112f2c35/html5/thumbnails/5.jpg)
What is TypeScript?
Tech Talks Conference – Sofia 2015 5
Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs.
TypeScript is a typed superset of JavaScript that compiles to standard JavaScript.
TypeScript is Microsoft‘s solution for large-scale JavaScript development.
![Page 6: HOW TO JAVASCRIPT BETTER€¦ · What is TypeScript? Tech Talks Conference –Sofia 2015 5 Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs. TypeScript is a typed](https://reader034.vdocuments.site/reader034/viewer/2022042908/5f39969cec12ee5e112f2c35/html5/thumbnails/6.jpg)
Tech Talks Conference – Sofia 2015 6
At a glance…var __extends = (this && this.__extends) || function (d,b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];function __() { this.constructor = d; }__.prototype = b.prototype;d.prototype = new __();
};
var Animal = (function () {function Animal(name) {
this.name = name;}Animal.prototype.move = function (meters) {
alert(this.name + " moved " + meters + "m.");};return Animal;
})();
var Snake = (function (_super) {__extends(Snake, _super);function Snake(name) {
_super.call(this, name);}Snake.prototype.move = function () {
alert("Slithering...");_super.prototype.move.call(this, 5);
};return Snake;
})(Animal);
The reality
class Animal {
constructor(public name) { }
move(meters) {
alert(this.name + " moved " + meters + "m.");
}
}
class Snake extends Animal {
constructor(name) { super(name); }
move() {
alert("Slithering...");
super.move(5);
}
}
The dream
What a mess!
![Page 7: HOW TO JAVASCRIPT BETTER€¦ · What is TypeScript? Tech Talks Conference –Sofia 2015 5 Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs. TypeScript is a typed](https://reader034.vdocuments.site/reader034/viewer/2022042908/5f39969cec12ee5e112f2c35/html5/thumbnails/7.jpg)
Then… Why?
Tech Talks Conference – Sofia 2015 7
Optimized output depending on compilation target levels: ES3, ES5 or even ES6.
Interfaces and classes (messy for ES3 & 5, but with shared syntax when ES6 comes).
JavaScript code is valid TypeScript code. You can start off with JavaScript and just add types.
Static typing and compile-time errors help catch mistakes and bugs much, much earlier.
As the name suggests… TYPES!
![Page 8: HOW TO JAVASCRIPT BETTER€¦ · What is TypeScript? Tech Talks Conference –Sofia 2015 5 Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs. TypeScript is a typed](https://reader034.vdocuments.site/reader034/viewer/2022042908/5f39969cec12ee5e112f2c35/html5/thumbnails/8.jpg)
Primitive types
• var isDone: boolean = false;
• var height: number = 6;
• var name: string = "bob";
• var list: number[] = [1, 2, 3];
• var object: Object = { property: "value" };
• function warnUser(): void {alert("There is no return value!");return;
}
Tech Talks Conference – Sofia 2015 8
![Page 9: HOW TO JAVASCRIPT BETTER€¦ · What is TypeScript? Tech Talks Conference –Sofia 2015 5 Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs. TypeScript is a typed](https://reader034.vdocuments.site/reader034/viewer/2022042908/5f39969cec12ee5e112f2c35/html5/thumbnails/9.jpg)
Complex types
• Functional typing
var add: (x: number, y: number) => number;add = function (x, y) { return x + y; };
• Structural definitions (inline interfaces)
function print(obj: { label: string }) {console.log(obj.label);
}print({ lable: "Dyslexia" });
• Built-in objects (or defined classes)
var currentDate: Date = new Date();var regExp: RegExp = /qwerty/;
Tech Talks Conference – Sofia 2015 9
![Page 10: HOW TO JAVASCRIPT BETTER€¦ · What is TypeScript? Tech Talks Conference –Sofia 2015 5 Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs. TypeScript is a typed](https://reader034.vdocuments.site/reader034/viewer/2022042908/5f39969cec12ee5e112f2c35/html5/thumbnails/10.jpg)
Any types
• var notSure = 4; // type inferencenotSure = "it can't be a string";
• var notSure: any = 4;
notSure = "maybe a string instead";notSure = false;
• function acceptsString(s: string) { ... }
acceptsString(<any>4);
Tech Talks Conference – Sofia 2015 10
![Page 11: HOW TO JAVASCRIPT BETTER€¦ · What is TypeScript? Tech Talks Conference –Sofia 2015 5 Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs. TypeScript is a typed](https://reader034.vdocuments.site/reader034/viewer/2022042908/5f39969cec12ee5e112f2c35/html5/thumbnails/11.jpg)
More syntax
• “Fat-arrow” functions
• Interfaces
• Classes
• Generic types
• Modules (Namespaces)
• Ambient definitions
Tech Talks Conference – Sofia 2015 11
![Page 12: HOW TO JAVASCRIPT BETTER€¦ · What is TypeScript? Tech Talks Conference –Sofia 2015 5 Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs. TypeScript is a typed](https://reader034.vdocuments.site/reader034/viewer/2022042908/5f39969cec12ee5e112f2c35/html5/thumbnails/12.jpg)
Demonstration
Tech Talks Conference – Sofia 2015 12
Migrate an existing JavaScript application1
![Page 13: HOW TO JAVASCRIPT BETTER€¦ · What is TypeScript? Tech Talks Conference –Sofia 2015 5 Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs. TypeScript is a typed](https://reader034.vdocuments.site/reader034/viewer/2022042908/5f39969cec12ee5e112f2c35/html5/thumbnails/13.jpg)
Demonstration - Recap
• Install and configure the IDE plug-in + NodeJS
• Change .js files to .ts ones
• Add necessary .d.ts files for external libraries
• Fix variables declared with one type and then reused as another
• Fix caught invalid function calls and/or object access
• Add types wherever possible
Tech Talks Conference – Sofia 2015 13
![Page 14: HOW TO JAVASCRIPT BETTER€¦ · What is TypeScript? Tech Talks Conference –Sofia 2015 5 Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs. TypeScript is a typed](https://reader034.vdocuments.site/reader034/viewer/2022042908/5f39969cec12ee5e112f2c35/html5/thumbnails/14.jpg)
Demonstration
Tech Talks Conference – Sofia 2015 14
Upgrade the migrated application2
![Page 15: HOW TO JAVASCRIPT BETTER€¦ · What is TypeScript? Tech Talks Conference –Sofia 2015 5 Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs. TypeScript is a typed](https://reader034.vdocuments.site/reader034/viewer/2022042908/5f39969cec12ee5e112f2c35/html5/thumbnails/15.jpg)
Resources
• TypeScript official Handbook by Microsoft ®
• “TypeScript - JavaScript for tools” presentation by Ben Smith
• List of languages that compile to JavaScript by David Bonnet
• DefinitelyTyped by Boris Yankov
Tech Talks Conference – Sofia 2015 15
![Page 16: HOW TO JAVASCRIPT BETTER€¦ · What is TypeScript? Tech Talks Conference –Sofia 2015 5 Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs. TypeScript is a typed](https://reader034.vdocuments.site/reader034/viewer/2022042908/5f39969cec12ee5e112f2c35/html5/thumbnails/16.jpg)
Tech Talks Conference – Sofia 2015 16
var questions: any = attendees.ask("?");
![Page 17: HOW TO JAVASCRIPT BETTER€¦ · What is TypeScript? Tech Talks Conference –Sofia 2015 5 Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs. TypeScript is a typed](https://reader034.vdocuments.site/reader034/viewer/2022042908/5f39969cec12ee5e112f2c35/html5/thumbnails/17.jpg)
Tech Talks Conference – Sofia 2015 17
![Page 18: HOW TO JAVASCRIPT BETTER€¦ · What is TypeScript? Tech Talks Conference –Sofia 2015 5 Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs. TypeScript is a typed](https://reader034.vdocuments.site/reader034/viewer/2022042908/5f39969cec12ee5e112f2c35/html5/thumbnails/18.jpg)
Tech Talks Conference – Sofia 2015 18