TypeScript: Angular's Secret Weapon
-
Upload
laurent-duveau -
Category
Technology
-
view
260 -
download
1
Transcript of TypeScript: Angular's Secret Weapon
![Page 1: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/1.jpg)
TypeScriptAngular's Secret Weapon
Laurent Duveau
![Page 2: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/2.jpg)
TypeScriptAngular's Secret Weapon
Laurent Duveau
![Page 3: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/3.jpg)
Laurent Duveau
@LaurentDuveau
http://angular.ac/blog
Microsoft MVP and RD
![Page 4: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/4.jpg)
• TypeScript ?
• Weapons
Types
Classes
Interfaces
Enums
• Tooling
• Generics
• Future
Agenda
![Page 5: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/5.jpg)
TypeScript?
![Page 6: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/6.jpg)
Wait...Why TypeScript?
![Page 7: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/7.jpg)
JavaScript
The Good• It’s everywhere
• Huge amount of
libraries
• Flexible
The Bad• Dynamic typing
• Lack of modularity
• Verbose patterns
(IIFE)
In short: JavaScript development scales badly.
![Page 8: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/8.jpg)
Wish list
Scalable HTML5 clientside development
Modular code
Easily learnable for Java or C# developers
Non-invasive (existing libs, browser support)
Long-term vision
Clean Js output (exit strategy)
![Page 9: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/9.jpg)
TypeScript!
Scalable HTML5 clientside development
Modular code
Easily learnable for Java or C# developers
Non-invasive (existing libs, browser support)
Long-term vision
Clean Js output (exit strategy)
![Page 10: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/10.jpg)
“TypeScript? It’s like
coding JavaScript but
without the pain”- Someone on Hacker News
![Page 11: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/11.jpg)
TypeScript
![Page 12: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/12.jpg)
TypeScript
• Open Source
• https://github.com/Microsoft/TypeScript
• Apache License 2.0
![Page 13: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/13.jpg)
Who's No. 1 in open source?
Microsoft!
Source:
https://octoverse.github.com/
![Page 14: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/14.jpg)
What is TypeScript?
• TypeScript is a typed superset of JavaScript that
compiles to plain JavaScript
• Any browser. Any host. Any OS
• Any valid JavaScript is valid Typescript
Visual Studio 2015: NuGet
Visual Studio 2017: built-in
Visual Studio Code: built-in
> npm install -g typescript
![Page 15: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/15.jpg)
TypeScript
ES2016
ES2015
ES5
![Page 16: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/16.jpg)
How Does TypeScript Work?
TypeScriptfile.ts
JavaScriptfile.js
TypeScript Compiler
Output ES5/ES6/… compliant code
“Transpiling”
![Page 17: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/17.jpg)
Type Support
![Page 18: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/18.jpg)
TypeScript TypesCore types (optional but very helpful):
• string
• number
• boolean
• Date
• Array
• any
Custom types
![Page 19: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/19.jpg)
TypeScript Type Annotations
name: string;
age: number;
isEnabled: boolean;
pets: string[];
accessories: string | string[];
![Page 20: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/20.jpg)
Why Use Types?@Component({...})export class CalculatorComponent implements OnInit {total: number = 0;
add(x: number, y: number) : number {return x + y;
}}
ngOnInit() {
this.total = this.add('26', 20);
}
Oops!
![Page 21: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/21.jpg)
Errors at compile-time!
var a = 54a.trim()
TypeError:
undefined is not a
function
var a: string = 54a.trim()
Cannot convert
‘number’ to ‘string’
JavaScript TypeScript
runtime… compile-time!
![Page 22: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/22.jpg)
“It feels just like writing
JavaScript, but with a thin
layer of type annotations
that bring you the familiar
advantages of static
typing”
![Page 23: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/23.jpg)
Types in Action
![Page 24: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/24.jpg)
Classes
![Page 25: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/25.jpg)
Class, ctor, public/private, prop
class Auto {
constructor(private _engine:string) {}
get engine():string {return this._engine;
}
set engine(val:string) {this._engine = val;
}
start() {console.log("Take off using: " + this._engine);
}}
constructor
get/set property
blocks
method
![Page 26: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/26.jpg)
Classes in Action
![Page 27: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/27.jpg)
Interfaces
![Page 28: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/28.jpg)
What is an Interface?
A code contract
![Page 29: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/29.jpg)
Interface Example
var person: ICustomer = {firstName: 'Dave',
};
interface ICustomer {firstName: string;lastName: string;age?: number;
}
lastName: 'Johnson'
Valid! Satisfied contract.
Invalid! Didn't satisfy contract.
Interface are only for compiler, do not generate Js code
![Page 30: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/30.jpg)
Interfaces in Action
![Page 31: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/31.jpg)
Enums
![Page 32: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/32.jpg)
Enum
enum Language {TypeScript,JavaScript,C#
}
var lang = Language.C#;var ts = Language[0]; // ts === “TypeScript”
![Page 33: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/33.jpg)
Functions
![Page 34: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/34.jpg)
Functions
function buildName(firstName: string, lastName?: string) {
if (lastName)return firstName + " " + lastName;
elsereturn firstName;
}
function buildName(firstName: string, lastName = "Doe") {
return firstName + " " + lastName;}
optional param
default param
![Page 35: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/35.jpg)
Functions in Action
![Page 36: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/36.jpg)
Tooling Support
![Page 37: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/37.jpg)
Tooling Support Examples
![Page 38: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/38.jpg)
Key Tooling Support Features
Code Help/
IntellisenseRefactoring Peek/Go To
Find
References
![Page 39: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/39.jpg)
Tooling in Action
![Page 40: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/40.jpg)
Generics
![Page 41: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/41.jpg)
What are Generics?
Code Templates
![Page 42: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/42.jpg)
What's a Code Template?export class List<T> {
add(item: T) {...}}
...
var custs = new List<ICustomer>();
custs.add({ firstName: 'Ted', lastName: 'James'});
custs.add(205); //not valid
List<T> can be used in many
different ways
![Page 43: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/43.jpg)
Generics in Action
![Page 44: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/44.jpg)
The Future Today
![Page 45: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/45.jpg)
The Future TodayIn 2016 decorators were an integral part of Angular
via TypeScript
…While still being a Proposal in the ES2016 spec
Use "future" features today:
async/await
Many more...
https://github.com/Microsoft/TypeScript/wiki/Roadmap
![Page 46: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/46.jpg)
async/await demo
![Page 47: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/47.jpg)
TypeScript Secret Weapon Review
Types Tooling Interfaces GenericsFuture
Today
![Page 48: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/48.jpg)
"Angular technically
doesn't require TypeScript
kind of like technically a
car doesn't require
brakes.“ – Joe Eames
![Page 49: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/49.jpg)
Thanks!
![Page 50: TypeScript: Angular's Secret Weapon](https://reader031.fdocuments.in/reader031/viewer/2022021503/5a6497767f8b9a31568b57dd/html5/thumbnails/50.jpg)
Need Onsite Training?
Need Onsite training on Angular and TypeScript?
Contact me at [email protected]!