- TypeScript is a typed superset of JavaScript that adds types, interfaces, and classes but compiles to plain JavaScript. It allows for early detection of bugs through compile-time type checking. - Some key features of TypeScript include type annotations, access modifiers, interfaces, inheritance, enums, modules, namespaces, and generics. It supports common data types like boolean, string, number, arrays, and functions. - TypeScript works by compiling TS files to JS files and optional sourcemaps that allow debugging the original TS code. It uses the Node.js runtime and supports editors like VS Code through plugins. Modules are preferred over namespaces for organizing code in larger projects.

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!
