Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Typescript Fundamentals

944 views

Published on

Typescript Fundamentals

Published in: Education
  • Be the first to comment

Typescript Fundamentals

  1. 1. Fundamentals C# Corner – Delhi Chapter Sunny Sharma
  2. 2. • Typed SuperSet of JavaScript • Any Existing JavaScript Script/ program is also a valid TypeScript • Adds typing • No Special Runtime • Transpiles to JavaScript TypeScript
  3. 3. • Early detection of Bugs • Auto-Complete/ Intellisense • Adds typing • No Special Runtime • Transpiles to JavaScript Benefits of a Typed Language
  4. 4. TypeScript-Features • Type Annotations • Public / Private Attributes • Compile Type Checking • Type inference • Access Modifiers • Interfaces • Inheritance • Enums • Optional properties • Modules & Namespaces • Tuple Types • Mixin • Generics www.typescriptlang.org
  5. 5. The more familiar you are with the language, The easier it is to understand
  6. 6. Data Types • boolean • string • number • enum • array • interface • class • any • Function Built-in Custom
  7. 7. compile-time type checking leads to fewer bugs!
  8. 8. You will love TypeScript if: • Love C# or Java and find JS quite vague • You mostly use Visual Studio or VS Code for Refactoring Support • You like when you catch lot of your bugs by Type-Checking
  9. 9. How TypeScript Works? • TypeScript File: main.ts • > tsc main.ts  main.js • tsc main.ts -sourcemap  main.js + main.js.map Map files are used to debug TypeScript files instead of JavaScript directly.
  10. 10. TypeScript JavaScript
  11. 11. Setup & Installation
  12. 12. • Uses Node.js to run typescript compiler • Supports a number of IDE / Editors:
  13. 13. install typescript using npm
  14. 14. Type Inference
  15. 15. Access Modifiers
  16. 16. Properties
  17. 17. Arrow Functions
  18. 18. Enums
  19. 19. Type Definition • Helps TypeScript getting you the Intellisense.
  20. 20. Interface
  21. 21. Class
  22. 22. Inheritance
  23. 23. Two types of Encapsulation Containers • Modules • Namespaces
  24. 24. Modules • Way to Group Code • The file is the Container • Other files have to import • No reference path needed • TypeScript relies on a Module Loader to load the modules. • For bigger projects you need an External Module Loader. • Loaders: RequireJS, CommonJS, SystemJS … etc.
  25. 25. Modules
  26. 26. Namespaces • By default every object is added to the Global Namespace • A way to group classes. • Way to reduce confliction.
  27. 27. Namespaces
  28. 28. Modules vs Namespaces • Tool for organizing code • Native Support in Node.js • Browsers supported with Module Loaders • Code re-use • Tool for organizing code • No special loader needed • Prevents Global namespace Pollution • Best for small applications Modules Namespaces Module wins the verdict for bigger project
  29. 29. Questions?
  30. 30. Thank You! 

×