Embed Size (px)
Citation preview
the future of JavaScript, now
TypeScript
The feature gap
The feature gap
TypeScript• Free and open-source programming language developed and maintained by Microsoft.
• Designed for development of large applications; transcompiles to JavaScript.
• Superset of JavaScript; any existing JavaScript programs are also valid TypeScript
programs.
• Supports definition files that can contain type information of existing JavaScript libraries.
• TypeScript compiler is itself written in TypeScript.
• TypeScript is included as a first-class programming language in Microsoft Visual Studio
2013 Update 2 and later.
Why add types to JavaScript?
• Types increase your agility when doing refactoring.
It's better for the compiler to catch errors than to have things fail at runtime.
• Types are one of the best forms of documentation you can have.
The function signature is a theorem, and the function body is the proof.
Basic TypesBoolean
Number
String
Array
Tuple
Enum
Any
Template Strings
• Multiline Strings
• String Interpolation
• Tagged Templates
Arrow Functions
I hate JavaScript, as it tends to lose the meaning of this all too
easily!• You don't need to keep typing function.
• It lexically captures the meaning of this.
• It lexically captures the meaning of arguments.
Things to Know about TypeScript• Types• Interfaces• Annotations/Decorators• async/await• Classes• Access Modifiers and Properties• Modules
• Static and Instance Members• Function Overloading*• Generics• Constructors• Inheritance• Interfaces
“We love TypeScript for many things… With TypeScript, several of our team members have said things like ‘I now actually understand most of our own code!’ because they can easily traverse it and understand relationships much better. And we’ve found several bugs via TypeScript’s checks. “
– Brad Green, Engineering Director - AngularJS
Angular <3 TypeScript
Transitioning from Angrular 1?So, you've skimmed a few lines of this new shiny Angular 2.0 thing, and you were like...
Eh?
Why Angular 2?• Written in TypeScript.
• One framework. Mobile & desktop.
• Leading SPA framework with “batteries included”.
• Universal. Serve the first view from .NET, node.js, PHP for instant rendering in HTML and
CSS.
• Built on five years of community feedback.
• By focusing on standards, we get twice the power with half the framework.
Building blocks• Modules
• Components
• Services
• Directives
• Data Binding
• Dependency Injection
Basic Componentimport { MyService } from ‘./my.service.ts’;
@Component({
selector: ‘my-component’,
template: `
<h1>{{title}}</h1>
`
})
export class MyComponent {
constructor(public myService: MyService) {…}
}
Data Binding
ComponentTemplate
Interpolation{{value}}
Property Binding[property]=“value”
Event Binding(event)=“handler”
Two Way Binding
[(ngModel)]=“value”
Template syntax• Interpolation – {{expression}}• Method Binding - (event)=“expression”• Property Binding - [property]=“expression”• Two Way Binding - [(target)]=“expression”• Hashtag Operator - #item – local variable in the template scope.• Asterisk Operator - *ngIf – a directive that modifies the HTML.• Elvis Operator (?.) – {{component?.property}} – safe navigation operator.
Architectural Best Practices• Include all files pertinent to a component in the same folder.• Remember CIDER for creating components: • Create class,• Import dependencies,• Decorate class,• Enhance with composition, • Repeat for sub-components.• Keep templates small enough to put the main component directly into the
file.• Delegate business logic from the component to a service.• Don’t be afraid to split a component up if it’s growing too large.• Lazy loading.
• Server-side rendering (Universal)• Native mobile applications (NativeScript)• Web Browser• Desktop App (Electron)• Progressive web apps (web workers, cache, push,
offline)• Hybrid mobile apps (ionic)
One platform to rule them all
Learning resources
https://mva.microsoft.com - Microsoft Virtual Academy
https://www.typescriptlang.org - State of the art JavaScript
https://angular.io - A step-by-step which introduces the major features of Angular
