Upload
laurent-duveau
View
261
Download
1
Embed Size (px)
Citation preview
TypeScriptAngular's Secret Weapon
Laurent Duveau
TypeScriptAngular's Secret Weapon
Laurent Duveau
Laurent Duveau
@LaurentDuveau
http://angular.ac/blog
Microsoft MVP and RD
• TypeScript ?
• Weapons
Types
Classes
Interfaces
Enums
• Tooling
• Generics
• Future
Agenda
TypeScript?
Wait...Why TypeScript?
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.
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)
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)
“TypeScript? It’s like
coding JavaScript but
without the pain”- Someone on Hacker News
TypeScript
TypeScript
• Open Source
• https://github.com/Microsoft/TypeScript
• Apache License 2.0
Who's No. 1 in open source?
Microsoft!
Source:
https://octoverse.github.com/
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
TypeScript
ES2016
ES2015
ES5
How Does TypeScript Work?
TypeScriptfile.ts
JavaScriptfile.js
TypeScript Compiler
Output ES5/ES6/… compliant code
“Transpiling”
Type Support
TypeScript TypesCore types (optional but very helpful):
• string
• number
• boolean
• Date
• Array
• any
Custom types
TypeScript Type Annotations
name: string;
age: number;
isEnabled: boolean;
pets: string[];
accessories: string | string[];
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!
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!
“It feels just like writing
JavaScript, but with a thin
layer of type annotations
that bring you the familiar
advantages of static
typing”
Types in Action
Classes
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
Classes in Action
Interfaces
What is an Interface?
A code contract
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
Interfaces in Action
Enums
Enum
enum Language {TypeScript,JavaScript,C#
}
var lang = Language.C#;var ts = Language[0]; // ts === “TypeScript”
Functions
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
Functions in Action
Tooling Support
Tooling Support Examples
Key Tooling Support Features
Code Help/
IntellisenseRefactoring Peek/Go To
Find
References
Tooling in Action
Generics
What are Generics?
Code Templates
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
Generics in Action
The Future Today
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
async/await demo
TypeScript Secret Weapon Review
Types Tooling Interfaces GenericsFuture
Today
"Angular technically
doesn't require TypeScript
kind of like technically a
car doesn't require
brakes.“ – Joe Eames
Thanks!
Need Onsite Training?
Need Onsite training on Angular and TypeScript?
Contact me at [email protected]!