Typescript Fundamentals

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!