Typescript Fundamentals

1. Fundamentals
C# Corner – Delhi Chapter Sunny Sharma

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. • Early detection of Bugs
• Auto-Complete/ Intellisense
• Adds typing
• No Special Runtime
• Transpiles to JavaScript
Benefits of a Typed Language

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. The more familiar you are with the language,
The easier it is to understand

6. Data Types
• boolean
• string
• number
• enum
• array
• interface
• class
• any
• Function
Built-in Custom

7. compile-time type checking leads to fewer bugs!

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. 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. TypeScript JavaScript

11. Setup & Installation

12. • Uses Node.js to run typescript compiler
• Supports a number of IDE / Editors:

13. install typescript using npm

14. Type Inference

15. Access Modifiers

16. Properties

17. Arrow Functions

18. Enums

19. Type Definition
• Helps TypeScript getting you the Intellisense.

20. Interface

21. Class

22. Inheritance

23. Two types of Encapsulation Containers
• Modules
• Namespaces

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. Modules

26. Namespaces
• By default every object is added to the Global Namespace
• A way to group classes.
• Way to reduce confliction.

27. Namespaces

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. Questions?

30. Thank You!
