TypeScript
•Télécharger en tant que PPTX, PDF•
0 j'aime•1,792 vues
A TypeScript introduction
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (15)
Similaire à TypeScript
Similaire à TypeScript (20)
Plus de Fabian Vilers
Dernier
Dernier (20)
TypeScript
- 2. Who am I ? Founder & owner of Dev One IT consultant with more than 15 years of experience Microsoft .NET software architect & technology enthusiast Father of two daughters, gamer, photographer & poker player
- 3. Who are you ?
- 4. Application scale JavaScript development is hard Scripting language No static typing Lacks of structuring mechanisms (classes, modules, interfaces)
- 5. TypeScript is a language for application- scale JavaScript development TypeScript is a superset of JavaScript that compiles to JavaScript Any browser, any host, any OS Open source
- 6. TypeScript Starts with JavaScript All JavaScript code is TypeScript code, simply copy and paste All JavaScript libraries work with TypeScript Optional static types, classes, modules Enable scalable application development and excellent tooling Zero cost: static types completely disappear at run-time Ends with JavaScript Compiles to idiomatic JavaScript Runs in any browser or host, on any OS
- 8. Type system Formalization of JavaScript’s types Static representation of JavaScript’s dynamic type system Type inference and structural typing In practice very few type annotations are necessary Works with existing JavaScript libraries Declaration files can be written and maintained separately Not « provable type safe » Types reflect intent but do not provide guarantees
- 10. Classes and modules Scalable application structuring Classes, modules, and interfaces enable clear contracts between components Aligned with emerging standards Classes, modules, and arrow functions syntax aligns with ECMAScript 6 proposals Support popular modules systems CommonJS and AMD modules in any ECMAScript 3 compatible environment
- 11. What’s included ? Compiler Open source, written in TypeScript Tooling Visual Studio language service, browser hosted playground Source Maps Full support in upcoming Resharper 8.1 Libraries Full static typing of DOM, jQuery, node.js,… And more Lots of sample and formal language specification
- 12. Resources Official website http://www.typescriptlang.org Language specification (PDF) http://go.microsoft.com/fwlink/?LinkId=267238 Repository for high quality TypeScript type definitions https://github.com/borisyankov/DefinitelyTyped
Notes de l'éditeur
- - Greet participants
- - Fastpresentation of myself
- Ask how many participants are developersAsk participants how large are their JavaScript applicationsAsk participants if theyfindit hard to develop and why
- - Tell participants thatthere are some alternatives to JavaScript thatgenerates JavaScript like Script#, GWT,… but they are stilltoo distant from JavaScript itself
- - TypeScriptistyped and compiles to plain JavaScript
- TypeScript works with library like Node, jQuery, Backbone,…Theses libraries are important to develop enterprise application, use them at no cost!
- Start with plain JavaScript (demonstrate that it is not typed)Show Google Closure annotations but it’s not particulary expressiveShow how TypeScript set type (string, number, boolean)Show inferred variableShow string array, () => string, structured type (a: number, b: string)Show interface Thing and structure matching + call using anonymous type + inferred return type + add a member to interface and show optional memberShow function in interface foo(s: string): string + number of argument must matchShow overloading + intellisense demo + explain that only one implementation exists + real overload + property on functionShow complex interface ThingShow make accumulator with only annotations on add function + interface + function returns an accumulator + demonstrate typing errorShow event handler + navigate to declaration
- Demonstrate the playgroundautomatic translation class Point with 2 fields as number, create a pointAdd arguments to ctorwithinitialization of the fields (conforms to ECMAScript 6)Add distance method (return Math.sqrt(this.x * this.x + this.y * this.y)Add the getaccessor (ECMAScript 6)Addstaticorigin = new Point(0, 0);Addprivatemember + demonstratethat not accessible in TS but itis in JSShow syntacticsugarwith public in ctor arguments and default valuesShow inheritancewith class Point3D and injectedhelper + addctorwith z value and call super(x, y)Overridedist()Demonstrate the wrongthiswithtrackersnippet and show thatgenerate _thisisonlygenerated if neededDemonstration modules + export keyword + open ended + namespace + import to shortennamespaceDemonstrateexternal modules: CommonJs (node) or AMD (async module definition) + nodeexecution