typescript fundamentals
TRANSCRIPT
Fundamentals
C# Corner – Delhi Chapter Sunny Sharma
• Typed SuperSet of JavaScript
• Any Existing JavaScript Script/ program is also a valid TypeScript
• Adds typing
• No Special Runtime
• Transpiles to JavaScript
TypeScript
• Early detection of Bugs
• Auto-Complete/ Intellisense
• Adds typing
• No Special Runtime
• Transpiles to JavaScript
Benefits of a Typed Language
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
The more familiar you are with the language,
The easier it is to understand
Data Types
• boolean• string• number
• enum• array• interface• class• any• Function
Built-in Custom
compile-time type checking leads to fewer bugs!
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
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.
TypeScript JavaScript
Setup & Installation
• Uses Node.js to run typescript compiler• Supports a number of IDE / Editors:
install typescript using npm
Type Inference
Access Modifiers
Properties
Arrow Functions
Shorter
Enums
Type Definition• Helps TypeScript getting you the Intellisense.
Interface
Class
Inheritance
Two types of Encapsulation Containers
• Modules• Namespaces
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.
Modules
Namespaces• By default every object is added to the Global Namespace• A way to group classes.• Way to reduce confliction.
Namespaces
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
Questions?
Thank You!