Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
LARGE SCALE JAVASCRIPT
WITH TYPESCRIPT
HH.JS - JULY 2013
Oliver Zeigermann, http://zeigermann.eu
TYPESCRIPT
Valid JavaScript is also valid TypeScript
Almost ECMAScript 6 with declared types
Introduces a compiler step
NEW CONCEPTS OF THE
LANGUAGE
Declared Types
Classes and Inheritance
Modules
Interfaces
External declarations
DECLARED, STATIC TYPING
var name: string = "Olli";
function doIt(p1: number, p2: boolean, p3: string): string {
if (p2) {
...
CLASSES
class Person {
name: string; // public is the default visibility
private age: number; // either public or private
...
INHERITANCE
class Customer extends Person {
private id: number;
constructor(name: string, age: number, id: number) {
super...
STATIC PROPERTIES
class Customer extends Person {
private static sequence: number = 1;
public static nextNumber(): number ...
MODULES
module CustomerModule {
class Person {
// ...
}
export class Customer extends Person {
// ...
}
}
// new CustomerM...
STRUCTURAL TYPING WITH INTERFACES
interface HasName {
name: string;
}
var olli: HasName = {name: 'Olli'};
olli.name; // go...
EXTERNAL DECLARATIONS
Adds tooling and type checking to existing
JavaScript libraries
Declarations disappear when compiled...
EXCERPT FROM LIB.D.TS #1
declare function parseFloat(string: string): number;
interface Function {
apply(thisArg: any, ......
EXCERPT FROM LIB.D.TS #2
interface Node extends EventTarget {
nodeType: number;
previousSibling: Node;
localName: string;
...
TOOLS
tsc: Command Line Tool for Compiler
WebStorm / Intellij IDEA
Visual Studio (Express for Web)
Syntax highlighting for...
AND THERE IS MORE...
Mapping files
External module declarations for AMD /
CommonJS
Enums
Generics
Casts
All the ES 6 goodn...
RESOURCES
These Slides on GitHub:
Code Samples on GitHub:
https://github.com/DJCordhose/typescript-hh-js
https://github.co...
EXTERNAL LINKS
Collection of external declaration files
Syntax files for other editors
Great introductory talk by Anders Hejlsberg
TypeSc...
CONCLUSION
TypeScript has the same semantics as JavaScript
Declared types bring you to the next level of (IDE)
tooling
Analyzing Code...
QUESTIONS /
DISCUSSIONOliver Zeigermann, http://zeigermann.eu
Nächste SlideShare
Wird geladen in …5
×

Large Scale JavaScript with TypeScript

1.744 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Large Scale JavaScript with TypeScript

  1. 1. LARGE SCALE JAVASCRIPT WITH TYPESCRIPT HH.JS - JULY 2013 Oliver Zeigermann, http://zeigermann.eu
  2. 2. TYPESCRIPT Valid JavaScript is also valid TypeScript Almost ECMAScript 6 with declared types Introduces a compiler step
  3. 3. NEW CONCEPTS OF THE LANGUAGE Declared Types Classes and Inheritance Modules Interfaces External declarations
  4. 4. DECLARED, STATIC TYPING var name: string = "Olli"; function doIt(p1: number, p2: boolean, p3: string): string { if (p2) { return p3; } else { return "" + p1; } }
  5. 5. CLASSES class Person { name: string; // public is the default visibility private age: number; // either public or private constructor(name: string, age: number) { this.name = name; this.age = age; } toString(): string { return "Name: " + this.name; } } var olli: Person = new Person("Olli", 42); console.log(olli.name); // => "Olli" olli.age; // => Error: Person.age' is inaccessible
  6. 6. INHERITANCE class Customer extends Person { private id: number; constructor(name: string, age: number, id: number) { super(name, age); this.id = id; } toString(): string { return super.toString() + ", id: " + this.id; } } var c1: Customer = new Customer("Oma", 88, 47); console.log(c1.toString()); // => "Name: Oma, id: 47"
  7. 7. STATIC PROPERTIES class Customer extends Person { private static sequence: number = 1; public static nextNumber(): number { return Customer.sequence++; } private id: number; constructor(name: string, age: number) { super(name, age); this.id = Customer.nextNumber(); } toString(): string { return super.toString() + ", id: " + this.id; } } var c1: Customer = new Customer("Oma", 88); console.log(c1.toString());
  8. 8. MODULES module CustomerModule { class Person { // ... } export class Customer extends Person { // ... } } // new CustomerModule.Person(...); // => undefined new CustomerModule.Customer(...); // => cool
  9. 9. STRUCTURAL TYPING WITH INTERFACES interface HasName { name: string; } var olli: HasName = {name: 'Olli'}; olli.name; // good olli.age; // not good, as not declared olli = {name: 'Olli', age: 100}; olli.age; // still not good, as not declared
  10. 10. EXTERNAL DECLARATIONS Adds tooling and type checking to existing JavaScript libraries Declarations disappear when compiled TypeScript compiler comes with external declarations for core and DOM libraries (lib.d.ts) Work in progress for a lot of other libraries
  11. 11. EXCERPT FROM LIB.D.TS #1 declare function parseFloat(string: string): number; interface Function { apply(thisArg: any, ...argArray: any[]): any; call(thisArg: any, ...argArray: any[]): any; bind(thisArg: any, ...argArray: any[]): Function; prototype: any; length: number; }
  12. 12. EXCERPT FROM LIB.D.TS #2 interface Node extends EventTarget { nodeType: number; previousSibling: Node; localName: string; parentNode: Node; nextSibling: Node; // ... }
  13. 13. TOOLS tsc: Command Line Tool for Compiler WebStorm / Intellij IDEA Visual Studio (Express for Web) Syntax highlighting for other text editors (Sublime Text, Emacs, Vim)
  14. 14. AND THERE IS MORE... Mapping files External module declarations for AMD / CommonJS Enums Generics Casts All the ES 6 goodness
  15. 15. RESOURCES These Slides on GitHub: Code Samples on GitHub: https://github.com/DJCordhose/typescript-hh-js https://github.com/DJCordhose/typescript- sandbox
  16. 16. EXTERNAL LINKS
  17. 17. Collection of external declaration files Syntax files for other editors Great introductory talk by Anders Hejlsberg TypeScript with AngularJS AngularJS + TypeScript : Controllers, Best Practice Grunt Plugin for TypeScript Version 0.9 with Generics heise.de on TypeScript Experience report Generics TypeScript deep dive
  18. 18. CONCLUSION
  19. 19. TypeScript has the same semantics as JavaScript Declared types bring you to the next level of (IDE) tooling Analyzing Code Refactoring Code completion Syntactic sugar for classes, inheritance, and modules is nice All added features aligned to ECMAScript 6 Interfaces and external declarations add the benefits of TypeScript to pure JavaScript libraries
  20. 20. QUESTIONS / DISCUSSIONOliver Zeigermann, http://zeigermann.eu

×