![IDE'S:
It provides an Integrated Development Environment to Build, Debug, Test and
Deploy Applications.
DTP:
Publishing Tools Required for Publishing Images and Animation for web
Note:
A Software Stack can be used for building End to End Application, Which includes
MEAN, MERN etc.
M-MongoDB [Database]
E-Express [Middleware]
A-Angular [Client Side]
N-Nodejs [Server Side]
R-Reactjs[ClientSide]
Challenges in Modern Web Development:
1. Unified UX
A web application must reach broad range of devices ie.from Browser to mobile
• It must Work on low Bandwidth devices.
• It should not optimize its content.
• Mobile users must get access to everything.
• Application must have the same feel and look across devices.
2. Fluid User Experience
It is nothing but User must get access to everything from one Page.](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-13-320.jpg)
!["BootStrapping".
Q11.What is AngularJs?
Ans: AngularJs is an open source cross platform.JavaScript based Framework to
build Single Page Application.It uses "Apache Cordova" a cross platform
framework for bulding Mobile Apps. It is developed by Google and maintained a
community of Developers and organisation.The Latest version is "1.7.8" [2019].
Q12.What are issues with AngularJs?
Ans: It is not Designed for what we use are using.It have lot of Gap's.
[As-Is,To-be,GAP]
As-Is :What your technology supports
To-be:What Client needs?
GAP:What you can't satisfy with your technology?
It uses a legacy of library that makes rendering slow.
It have version compatability issues.
It is maintained by different technolgy developers.Hence to do the same thing
there are so many alternatives.It leads to priority issues.
Q13.What is Angular?
Ans:1.Angular is TypeScript based open source front end Web Application
Platform.
2.It is lead by Angular Google team at Google and by a community of indiviuals
and corporations.
3.Angular is a complete rewrite from the same team that buld AngularJs.
4.Angular uses TypeScript ,which is class based OOP and Strictly Typed.
Angular leverage the benfits of OOP to achieve code reusability,code](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-18-320.jpg)
![process.
1.Download and Install NodeJs
Package Manager->NPM,Composer,Grunt,Growl,yarn,Nuget
First we need to install NPM
"www.NodeJs.org" =>10.15.3 LTS
Recomended for Most Users
Window ->windows installer
C:UsersAdministrator>node _v v10.15.0
c:UsersAdministrator>
2)Learn Download Visual Studio Code[IDE]
WebStrom,Sublime,Vs,Ecllipse
[IDE]-Build ,Test,Application
Visual Studio Code-official site,windows,MAC OS
Windows
window 7,8 etc
Download and install TypeScript Languagecommand prompt:
>npm install -g TypeScript
npmJs is the officialwebsite.Package is a Collection of Library.you will get
Information about that Package there are several other option also.
2.Dowload Visual Studio Code[IDE]
3.Download and Install TypeScript
SetUp Environment for TypeScript:](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-22-320.jpg)
![Download and Install NodeJs onyour Computer
https://nodejs.org/en/download/[.msi] file
2.Download and Install TypeScript.
>open windows command prompt
>Type the following Command
>npm install _g TYPESCRIPT
Test:
>node _v ->nodejs version
>npm -v ->npm version
Note:
you can get the Package names their various and bugs information and goto site
Test:>node -v->nodejs version
>npm -v->"https://www.npmjs.com"
Angular App
_TypeScript
ctrl+backTick[`]~
PS D: TypeScript>tsc demo.ts
D: TypeScript>tsc demo.js
Search
Open in Browser=>Install this Extension.
Creating a new Project for TypeScript:](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-23-320.jpg)
![1.Open your pc location in Explorer
2.Create a new Folder
D:TypeScript
3.Open Visual Studio Code IDE
4.Go to "File->Open Folder"
5.Select "D:TypeScript" and open
Add a new TypeScript File:-
1.Open Project Explorer
2.Click on "[+]" new file button
3.Name it as "demo.ts"
4.Write the following code
console.log("welcome to TypeScript");
Transcompile into JavaScript
1.Open Terminal
ctrl+`[backtick]
2.Use TypeScript compiler command
D:/ TypeScript>tsc demo.ts
3.This will generate a new file "demo.js"
Run JavaScript File:
1.open Terminal
ctrl +
2.Type the following command](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-24-320.jpg)
![I. It reduce OverHead by storing values in Sequential Order.
II. It reduce the Complexity by storing multiple values under one Reference.
III. Array naturally can store various types of values.
IV. But TypeScript can restrict the values to similar Types.
Q.Your technology restricts according to your nature [ ]?
Ans: MetaCharacters * ? + [ ]
* Astrik=Many
+=One or More
?=one
[ ]=Range
dir p*.*
dir t p*.*
Array Type in TypeScript:
1.Array in Programming are used to reduce overhead and complexity
2.Array reduce overhead by storing values in sequential order
3.Array reduce complexity by storing multiple values under one reference name.
4.TypeScript Array can handle various types of values.
5.TypeScript Array Size can be changed dynamically.
6.TypeScript Array can also restrict an Array to handle specific type of Values.
7.The Array Types are defined by using the meta character the open close brase "[
]"
Syntax: Array Constructor](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-45-320.jpg)
![let values :string[ ]=new Array("A","B");
let values:any[ ]=["A",20,true];
Syntax: Rendering Values into Array
let Values:string[ ];
Values[0]="A";
Values[1]="B";
In Client Side Scripting array is an object
Example: let cities:string[ ]=new Array( );
let products:string[ ]=[ ];
Values are dynamically assigned values into array.If you are not resolving error
Q.What is the difference between the Values for Square and Array Constructor?
Ans: Initialize with [ ] is resolved during compile time
Initialize with Array[ ] is resolved during runtime.
Array Manipulations:
i. Reading Values from an Array.
• toString( )
• join( )
• Slice( )
toString( )->Reads the values from Array and return Values from Array
CSV->Comma Seperated Values.
Join( )->It allows you to use your own delimeter
Slice( )->Allow you to read values from specific location.](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-46-320.jpg)
![Example: let products : string[ ]=["Tv","Mobile"];
console.log(products.join());
or Slice(1,3)
Starting will include with 1 ending with -1 .
If you want to extract we need to extract.
Note:
Reading values from Array:-
Function Description
toString( ) It reads all Values of an Array and
returns them as string
Seperated with "," as delimeter.
join( ) It reads all values of an Array and
return them as string seperated with any
specified delimeter.
"|","-->"
Slice( ) It reads the Values from an Array
based on Specified index and return a
new Array.
Example:
let products :string[ ]=["Tv","Mobile","Sunglasses","Watch"];
console.log(products.toString());
//output:Tv,Mobile...
console.log(products.join("|"))
//output: Tv/Mobile/...](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-47-320.jpg)
![console.log(products.slice(1,3));
//output[ 'Mobile','Sunglasses']
2.Adding Element /Values into Array
• push( )
• unshift( )
• splice()
Example:
let products :string [ ]=["Tv","Mobile"];
console.log(products.toString( ));
products.push("watch","Mouse");
console.log(products.toString( ));
command prompt
>tsc arraytype.ts
>node arraytype.js
push.ts
Output:](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-48-320.jpg)
![Json Type:
Json type will be Array of object.
Array of object[JSON-JavaScript object Notation]
"json.ts"
let products:any[ ]=[
{
Name:"Tv",Price:34000
Name:"Shoe",Price:12000
}
];
console.log("Shoe Price="+products[1].Price);
},
output:](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-58-320.jpg)
![It refer any
Entity within the Expression.
$ It matches
the ending position within a string.
* It matches
the string preciding with zero or
more Elements
? It matches
the preciding element zero or one
time
+ It matches
the preciding element one or
more times
w It matches a
word that is alpha numeric with(under
score) _
W It represents a
Non-word
d It Specifies a
Number with decimal places
D It is to refer
UnSigned Number.
s allows
leading spaces.
S no space
allowed.
[ ] It defines range or
Specific Value.
[A-Z] only uppercase
letters allowed.](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-60-320.jpg)
![[a-z] only lowercase
allowed.
[a-zA-Z] or [a-Z] Both Upper & Lower case .
[0-9] Only numeric.
[a-zA-Z0-9] or w alpha numeric
[a,d,f] only specified
characters
[^a,d,f] exclude specified
chars.
[a-mA-M4-9] chars in specified range.
+--$@ special chars group
[!@#$%&] special char group
(?=.*[A-Z]) Atlest one uppercase
letter
(?=.*[0-9]) Atleast one number
(?=.*[!@#$%&] Atlest one special character.
Qunatifiers
Description
{n} Exactly n-number of
chars
{n,m}
minimum-n,maximum-m
{n, } minimum-n,maximum
any
{4}
{4,10}
{ 4 }](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-61-320.jpg)
![Syntax:
let regExp:any=/[A-Z]{4,10}|;
Note: A regular Expression is verified with the value using "match( )" function.It is
a boolean function that returns true,when the expression matched.
Example:- Regular Expression
let pwd:string="Jonson123";
let regExp:any=/(?=.*[A-Z])w{4,15};
if(pwd.match(regExp)){
console.log("Verified");
}
else{
console.log("Invalid Password")
}
output:](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-62-320.jpg)
![fromTime.
getSeconds( ) Returns the Second Number.
getDate( ) Returns the Current date number ie
"7"
[05/07/2019]
getDay( ) Return the weekday number
0=Sunday
getMonth( ) Return Month number 0=Jan
getFullYear( ) Return full year 2019.
getYear( ) Return full year as
per y2k/19.
toLocale DateString( ) Return shortdate
toLocale TimeString( ) Return shorttime
let mfd:any=new Date("2019/05/06");
let month:string[ ]=["Jan","Feb","Mar","Apr","May"];
console.log("Manufacture
Month="+months[mfd.getMonth()]);
console.log("Mfd Year="+mfd.getFullYear( ));
console.log("Mfd="+mfd.toLocaleDateString( ));
output:](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-64-320.jpg)
![Ternary Operator:
It is a Special Operator used to Evaluate a value based on Boolean Condition.
Syntax: (condition)?Value If True:Value If False
Example:
let pin:number=3030;
console.log((pin==3040)? "Valid" :"Invalid");
2."new" Operator
"new" Dynamic memory alocating operator
It is a Dynamic Memory allocating operator that allocates Memory for Specified
Object type and loads its members into Memory.
Syntax: let values:string[ ]=new Array( );
let Mfd:any=new Date( );
let pic:any=new Image( );
values.length;
values.push( );
Mfd.getMonth( );
pic.src="Image/Car.jpg"
3.typeof Operator:
It is a Special Operator used to verify the typeof Value stored in a reference and
return its datatype.](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-73-320.jpg)
![6) "in" Operator
It is a Special Operator used to verify whether the given property is avalible in an
object it returns boolean false if property "Not Found" .
Syntax:
"PropertyName" in Object;
"Tv" in product
Tv is Value Name is a property
Example:
let product:any={
Name="Tv",
Price:45000,
IsInStock:true
};
if("Price" in product){
for(var property in product){
console.log("property+":"+product[property]+"n");
}
}
else{](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-76-320.jpg)
![console.log("Price Missing");
}
output:
7)Of Operator:
It is a Special Operator used to verify the values of an given object
and return the values.
Example:
let cities:string[ ]=["Delhi","Hyderabad"]
for(var item of cities){](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-77-320.jpg)
![• In oop "Interface" is used to define contract
Example: without contract
let product:[
{ Name:"Tv",Price:40000},
{ Name :"Shoe",Price:"12000"},
];//Invalid
with contracts:
Interface IProduct{
Name:string;
Price:number;
}
let product:IProduct[ ]=[
{ Name:"Tv",Price:34000},](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-82-320.jpg)
![{Name:"Mobile",Price:"4000"}
]//Invalid
Names is not a member
Price is number type.
? Nullable
Optional Members:
• Every member that you defined in an Interface is Mandatory to Implement
• You can configure optional Members by using Null refernce
character "?"
Synatax:
Interface Iname{
property?:type;//optional
property:type; //required
}
Example:-
interface Iname{
Name:string;
Price:number;
Qty?:number;
}
let product:IProduct[ ]=[
{Name:"Tv",Price:34000,Qty:2},](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-83-320.jpg)
![{Name:"Shoe",Price:42000}
];
console.log("Shoe Price="+product[1].price);
console.log("Tv Quantity="+product[0].Qty);](https://image.slidesharecdn.com/typescript-200803101143/85/Type-script-84-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Type script (20)
Ad
Recently uploaded (20)
Ad
Type script
- 1. TypeScript TypeScript Definition: By definition, “Typescript is JavaScript for application-scale development.” TypeScript is a strongly typed, object oriented, compiled language. It was designed by Anders Hejlsberg designer of C# at Microsoft. TypeScript is both a language and a set of tools. TypeScript is a typed superset of JavaScript compiled to JavaScript. In other words, TypeScript is JavaScript plus some additional features. Features of Type Script: Type is just Java Script: TypeScript starts with JavaScript and ends with JavaScript. Typescript adopts the basic building blocks of your program from JavaScript. Hence, you only need to know JavaScript to use TypeScript. All TypeScript code is converted into its JavaScript equivalent for the purpose of execution. Java Script is TypeScript: This means that any valid .js file can be renamed to .ts and compiled with other TypeScript files.
- 2. TypeScript is Portable: TypeScript is portable across browsers, devices, and operating systems. It can run on any environment that JavaScript runs on. Unlike its counterparts, TypeScript doesn’t need a dedicated VM or a specific runtime environment to execute. TypeScript and ECMAScript: The ECMAScript specification is a standardized specification of a scripting language. There are six editions of ECMA-262 published. Version 6 of the standard is codenamed "Harmony". TypeScript is aligned with the ECMAScript6 specification. TypeScript adopts its basic language features from the ECMAScript5 specification, i.e., the official specification for JavaScript. TypeScript language features like Modules and class-based orientation are in line with the ECMA Script 6 specification. Additionally, TypeScript also embraces features like generics and type annotations that aren’t a part of the EcmaScript6 specification. Why we use Type Script? The benefits of TypeScript include: Compilation: JavaScript is an interpreted language. Hence, it needs to be run to test that it is valid. It means you write all the codes just to find no output, in case there is an error. Hence, you have to spend hours trying to find bugs in the code. The TypeScript transpiler provides the error-checking feature. TypeScript will compile the code and generate compilation errors, if it finds some sort of syntax errors. This helps to highlight errors before the script is
- 3. run. Strong Static Typing: JavaScript is not strongly typed. TypeScript comes with an optional static typing and type inference system through the TLS (TypeScript Language Service). The type of a variable, declared with no type, may be inferred by the TLS based on its value. TypeScript supports type definitions for existing JavaScript libraries. TypeScript Definition file (with .d.ts extension) provides definition for external JavaScript libraries. Hence, TypeScript code can contain these libraries. TypeScript supports Object Oriented Programming concepts like classes, interfaces, inheritance, etc. Components of Type Script: TypeScript has the following three components Language: It comprises of the syntax, keywords, and type annotations. The TypeScript Compiler: The TypeScript compiler (tsc) converts the instructions written in TypeScript to its JavaScript equivalent. The TypeScript Language Service: The "Language Service" exposes an additional layer around the core compiler pipeline that are editor-like applications. The language service supports the common set of typical editor operations like statement completions, signature help, code formatting and outlining, colorization, etc. Declaration Files: When a TypeScript script gets compiled, there is an option to generate a declaration file (with the extension .d.ts) that functions as an interface to the components in the compiled JavaScript. The concept of declaration files is analogous to the concept of header files found in C/C++. The declaration files (files with .d.ts extension) provide intelligence for types,
- 4. function calls, and variable support for JavaScript libraries like jQuery, MooTools, etc. Every language specification defines its own syntax. A TypeScript program is composed of • Modules • Functions • Variables • Statements and Expressions • Comments Your First Type Script Code Let us start with the traditional “Hello World” example var message: string=”Hello World” console.log (message) Compile and Execute a Type Script Programme: Let us see how to compile and execute a TypeScript program using Visual Studio Code. Follow the steps given below
- 5. Step1. Save the file with .ts extension. We shall save the file as Test.ts. The code editor marks errors in the code, if any, while you save it. Step 2 − Right-click the TypeScript file under the Working Files option in VS Code’s Explore Pane. Select Open in Command Prompt option. Step 3.To compile the file use the following command on the terminal window. tsc Test.ts Step 4.The file is compiled to Test.js. To run the program written, type the following in the terminal. node Test.js Compiler Flag: Compiler flags enable you to change the behavior of the compiler during compilation. Each compiler flag exposes a setting that allows you to change how the compiler behaves.
- 6. S.No. Compiler flag &Description 1. --help Displays the help manual 2. --module Load external modules 3. --target Set the target ECMA version 4. --declaration Generates an additional .d.ts file 5. --remove Comments Removes all comments from the output file 6. --out Compile multiple files into a single output file 7. --sourcemap Generate a source map (.map) files 8. --module noImplicitAny Disallows the compiler from inferring the any type 9. --watch Watch for file changes and recompile them on the fly Identifiers in Type Script: Identifiers are names given to elements in a program like variables, functions. Identifiers Are: • Identifiers can include both, characters and digits. However, the
- 7. identifier cannot begin with a digit. • Identifiers cannot include special symbols except for underscore (_) or a dollar sign ($). • Identifiers cannot be keywords. • They must be unique. • Identifiers are case-sensitive. • Identifiers cannot contain spaces. The Following Tables Lists a few of valid and Invalid Identifiers:- Valid identifiers Invalid identifiers first Name Var first_name first name num1 first-name $result 1number TypeScript Key: Keywords have a special meaning in the context of a language. break as any switch case if throw else var number string get module type instanceof typeof public private enum export
- 8. finally for while void null super this new in return true false any extends static let package implements interface function new try yield const continue do catch Whitespace and Line Breaks: TypeScript ignores spaces, tabs, and newlines that appear in programs. You can use spaces, tabs, and newlines freely in your program and you are free to format and indent your programs in a neat and consistent way that makes the code easy to read and understand. TypeScript is Case-sensitive: TypeScript is case-sensitive. This means that TypeScript differentiates between uppercase and lowercase characters. Semicolons are Optional Each line of instruction is called a statement. Semicolons are optional in TypeScript. Example console.log (“hello World”) console.log(“we are learning TypeScript”) Comments in TypeScript: Comments are a way to improve the readability of a program. Comments can be used to include additional information about a program like author of the code, hints about a function/ construct etc. Comments are ignored by the compiler.
- 9. TypeScript supports the following types of comments • Single-line comments ( // ) − Any text between a // and the end of a line is treated as a comment • Multi-line comments (/* */) − These comments may span multiple lines. Example //this is single line comment /* This is a Multi-line comment*/ TypeScript and Object Orientation: class Greeting { greet ():void { console.log ("Hello World!!!") } } var obj = new Greeting(); obj.greet(); The above example defines a class Greeting. The class has a method greet (). The method prints the string “Hello World” on the terminal. The new keyword creates an object of the class (obj). The object invokes the method greet (). On compiling, it will generate following JavaScript code. //Generated by typescript 1.8.10 var Greeting = (function () { function Greeting () { }
- 10. Greeting.prototype.greet = function () { console.log ("Hello World!!!"); }; return Greeting; }()); var obj = new Greeting (); obj.greet() The output of the above program is given below Hello World!!! Q1.What are the Challenges in Modern Web Development? Ans: 1.Unified UX 2. Fluid UX 3. User and SEO Friendly URL’s (Routing) 4. Loosely Coupled and Extensible Architecture. 5. Simplified Deployment and Install Q2.What is Solution? Ans: 1.Better I will Build a SPA (AngularJs) For you world popular SPA Twitter. YouTube is a Podcasting. 2. Better I will now build a progressive Web Appication on Angular7. Q3.How to Build SPA? Ans: You can use JavaScript and HTML . jQuery HTML
- 11. Then why Angular AngularJs. Q4.What is Problem in JavaScript and jQuery? Ans: JavaScript is a Language, jQuery is a Library and AngularJs is Framework.Angular7 is a Platform. Q5.What is problem jQuery? Ans: jQuery is a Library. Q6.
- 12. Basic Requirement to build End to End Web Application: Language/Tool Description HTML This is a markup Language used for Presentation. CSS It makes the presentation more responsive. Client Side Script: It reduces the burden on server by handling Interactions and Validations Client Side. Example: JavaScript, ECMAScript Server Side Script: It is a script employed on Server to generate response customized for ever Client request. Example: PHP, JSP, ASP Database: It defines the data, queries, reports and analysis required for application. Example: RDBMS, Oracle, Non-RDBMS Middleware: It is a software framework used in Multitier Application to handle communication Example: JBOSS, Express
- 13. IDE'S: It provides an Integrated Development Environment to Build, Debug, Test and Deploy Applications. DTP: Publishing Tools Required for Publishing Images and Animation for web Note: A Software Stack can be used for building End to End Application, Which includes MEAN, MERN etc. M-MongoDB [Database] E-Express [Middleware] A-Angular [Client Side] N-Nodejs [Server Side] R-Reactjs[ClientSide] Challenges in Modern Web Development: 1. Unified UX A web application must reach broad range of devices ie.from Browser to mobile • It must Work on low Bandwidth devices. • It should not optimize its content. • Mobile users must get access to everything. • Application must have the same feel and look across devices. 2. Fluid User Experience It is nothing but User must get access to everything from one Page.
- 14. • There must not be any navigation between Pages. • User will stay on one Page from beginning to the End. • New details are updated into Page without reloading the Page. • Loosely coupled and extensible • Application can get new updates without re-install. • It must support extensibility without re-construction. • We can extend application functionality without stopping it. • User friendly and SEO friendly URL’s. • User can query any content easily • User browsing will be kept in tracking so that it can suggest relative content. • User can reach to any content easily. 5. Simplified Deployment and Upgrade • Without restarting the device application can be installed and used. • Single Step Installation. Q7.What is the Solution? Ans: Better Build • SPA (Single Page Application) • Progressive Web Application. Q8. How to build SPA or Progressive Web Apps? Ans: JavaScript & HTML jQuery & HTML
- 15. KnockoutJs & HTML BackboneJs & HTML AngularJs & HTML Q9.What are the issues with JavaScript and jQuery? Ans: Use lot of DOM manipulations: DOM-> Document Object Model HTML is a collection of Elements and Attributes. HTML has normal elements, void elements, RC Data elements, Foreign key elements. Challenges in JavaScript and jQuery: • JavaScript and jQuery use DOM Manipulations. • It requires lot of reference and code. • Js and jQuery will give access to BOM (Browser object Model), which leads to Navigation issues. • Explicitly we have to control navigation. Ex: What happens when back button is used? • Data Binding issues. How the changes in view are updated in Model (data)? • Routing Issues. Ex: How new updates are added to the Page without reloading? • Not secured URL’s
- 16. • Js and jQuery are object Based not object oriented Ex: what about Extensibility. • Js and jQuery are not strictly typed Ex: How you will handle remote data? 10. What is solution? Better use a Framework ClientSide. Q10. What is a Framework? Ans: It is an Software Architecture Pattern. • Architecture Pattern have the ability to build and control the application flow. • The various Architecture Pattern in real world are: • Blackboard System • Broken Pattern • Event –driven architecture • Implicit Invocation • Layer • Micro Services • Model-view-controller(MVC) • Presentation-abstraction-control
- 17. • Model-view-presenter(MVP) • Model-view-view Model(MVVM) • Multitier Architecture(often 3-tier or n-tier) Library Vs Framework Library: Framework: • Library is controlled by Browser Events.Hence Application have to control its own flow. • Framework can control the application flow. • The process of converting Static DOM into Dynamic DOM is known as
- 18. "BootStrapping". Q11.What is AngularJs? Ans: AngularJs is an open source cross platform.JavaScript based Framework to build Single Page Application.It uses "Apache Cordova" a cross platform framework for bulding Mobile Apps. It is developed by Google and maintained a community of Developers and organisation.The Latest version is "1.7.8" [2019]. Q12.What are issues with AngularJs? Ans: It is not Designed for what we use are using.It have lot of Gap's. [As-Is,To-be,GAP] As-Is :What your technology supports To-be:What Client needs? GAP:What you can't satisfy with your technology? It uses a legacy of library that makes rendering slow. It have version compatability issues. It is maintained by different technolgy developers.Hence to do the same thing there are so many alternatives.It leads to priority issues. Q13.What is Angular? Ans:1.Angular is TypeScript based open source front end Web Application Platform. 2.It is lead by Angular Google team at Google and by a community of indiviuals and corporations. 3.Angular is a complete rewrite from the same team that buld AngularJs. 4.Angular uses TypeScript ,which is class based OOP and Strictly Typed. Angular leverage the benfits of OOP to achieve code reusability,code
- 19. seperation,code extensibility etc.. 5.Angular is component based and Modularis Approach these makes Angular more faster and light weight. Angular is a Developer platform with Language and tools like Materials,Animation etc... 6.The various versions of Angular are Angular2-> September14,2016 Angular4 ->March 23rd,2017 Angular5->November 1st,2017 Angular7->October 18th,2018 TypeScript: 1.TypeScript is an open source programming language developed and maintained by Microsoft. 2.It is a strict syntatical superset of JavaScript and adds optional static typing to language. 3.Typescript is a superset of JavaScript. Hence existing JavaScript programme are also valid TypeScript programs. TypeScrippt is Influenced by JavaScript ,Java,C#. TypeScript Influenced language called "AtScript" designed by Google The first release of TypeScript is 3.4.3 released on 10th April 2019. TypeScript is completely built with same TypeScript Language.It comprises of following components. TypeScript Architecture Diagram:
- 20. 1.The core TypeScript compiler is used to compile the TypeScript code and identify the compiletime error. 2.The standalone compiler is responsible for translating the TypeScript code into Target JavaScript. 3.Language service uses a Reflection Mechanism that allow to indentify the members of any specific component used in language. 4.Vs Shim is responsible for defining the rules for Language that can be CrossCompiled into JavaScript 5.TS Server defines a platform to load,compile and genereate the output. 6.The Editor tools defines the language rules foe specific Environment.The various Editors are Vscode,Sublime,WebStorm,Brackets,etc... 7.The Vs Managed language service is responsible for making the TypeScript code cross platform Features of TypeScript Language: Type Annotation: The Type Annotation in Compiler programming refers to the type signature that defines input and output type for a function. Type Inference: It determines the datatypes of value implicitly and handles specific type dynamically. TypeScript: it is a techinique that resolve the issues dynamically during runtime.Itsave the compiler time.
- 21. TypeScript supports a concept called Genereics. function f1(a:number,b:number) { } function f1<T>(a:T,b:T) { } f1<number>(10,10) f1<string>("A",10) Generics:- Generics refersto type safe and strongly typed for specific type of value dynamically.It identifies the type and infer the type.ie.Generics Interface: Interface defines a contract that is rules for designing a comment. TypeScript support "Async" and "Await". Async/Await Await for first request wait until response come and wait until response come. Async will not wait for response all are light weight.Async will not wait it will movecan to next one. Asynchronous: It refers to an Asynchronous process where a request is made and will not wait for response.it proceeds to the next whenever response is ready it will start the
- 22. process. 1.Download and Install NodeJs Package Manager->NPM,Composer,Grunt,Growl,yarn,Nuget First we need to install NPM "www.NodeJs.org" =>10.15.3 LTS Recomended for Most Users Window ->windows installer C:UsersAdministrator>node _v v10.15.0 c:UsersAdministrator> 2)Learn Download Visual Studio Code[IDE] WebStrom,Sublime,Vs,Ecllipse [IDE]-Build ,Test,Application Visual Studio Code-official site,windows,MAC OS Windows window 7,8 etc Download and install TypeScript Languagecommand prompt: >npm install -g TypeScript npmJs is the officialwebsite.Package is a Collection of Library.you will get Information about that Package there are several other option also. 2.Dowload Visual Studio Code[IDE] 3.Download and Install TypeScript SetUp Environment for TypeScript:
- 23. Download and Install NodeJs onyour Computer https://nodejs.org/en/download/[.msi] file 2.Download and Install TypeScript. >open windows command prompt >Type the following Command >npm install _g TYPESCRIPT Test: >node _v ->nodejs version >npm -v ->npm version Note: you can get the Package names their various and bugs information and goto site Test:>node -v->nodejs version >npm -v->"https://www.npmjs.com" Angular App _TypeScript ctrl+backTick[`]~ PS D: TypeScript>tsc demo.ts D: TypeScript>tsc demo.js Search Open in Browser=>Install this Extension. Creating a new Project for TypeScript:
- 24. 1.Open your pc location in Explorer 2.Create a new Folder D:TypeScript 3.Open Visual Studio Code IDE 4.Go to "File->Open Folder" 5.Select "D:TypeScript" and open Add a new TypeScript File:- 1.Open Project Explorer 2.Click on "[+]" new file button 3.Name it as "demo.ts" 4.Write the following code console.log("welcome to TypeScript"); Transcompile into JavaScript 1.Open Terminal ctrl+`[backtick] 2.Use TypeScript compiler command D:/ TypeScript>tsc demo.ts 3.This will generate a new file "demo.js" Run JavaScript File: 1.open Terminal ctrl + 2.Type the following command
- 25. >node demo.js You canlink to HTML File: 1.Add a new HTML file into project "Home.html" 2.Link js file <head> <script src="demo.js"></script> </head> 3.Install a Plug -in "open inBrowser" ->Go to "Extentions"in Vs Code ->Search for "Open in Browser" ->Install for Vs Code ->Now you can right click on HTML files and Openin Browser. D:TypeScript>tscdemo.ts D:TypeScript>node demo.js Variables in TypeScript: Variables are named storage locations in memory,where you can store a value and use it as a part of any expressions HomePage: Example: <html> <head> <script>
- 26. "use strict": function f1( ){ x=10; document.write("x=" + x); } f1( ); </script> o/p: x=10 Declaring Variables is important when we use JavaScript in strict mode. In TypeScript you have to declare and use a variable. you can declare variable in TypeScript by using var,let,const. a)var b)let c)const Example: var a=10; let b=20 const console.log("a="+a+"n"+"b="+b+"n"+"c="+c); >tsc demo.ts >node demo.js var is function scoped Variable. let and const are blockscoped Variables.
- 27. Example: function f1() { var x=10; if(x==10){ let y=20; { log(x=+x,y=+y) } } let y is not assessible as it work within the block. var use can use anywhere let is only block scope function f1() { var x=10; if(x==10){ console.log("x=" + x + "n" + "y=" + y + "n"); } } y is not accessable outside block. const cannot be used without Initializing a value var,let allows shadowing.Shadowing same name identified by same value. const y=20; //not avalible //error message
- 28. cannot be declared for block scoped variables. var will allow shadowing. const z; value initialized but not valid value must be Initalized while declaring itself we need to declare value for it.Same name Identifier must be there with different values. Var and let can render value const must be initialized. function Outer( ){ var x=10; function inner( ){ var y=20; console.log("x ="+ x ); } console.log(" y= "+ y); } let also works in the function it will not allow to Shadow. TypeScript Language: Varables in TypeScript: Variables are storage locations in memory. Where you can store a value and use it as a part of any expression. TypeScript is in strict mode of JavaScript.Hence it is mandatory to declare Variables before rendering. Var x; //Code Declaration
- 29. X=10; //Code Rendering Initialize mean Declaring.Code Rendering means Rendering after Declaring. x=10; //Invalid -x not Declared. console.log(x); The Variables can be declared in TypeScript by using Keyword • var • let • const Keyword Description var Scoped Variable so that it is accessable from any location in the function.It allows Shadowing ie.Same name Identifier with different value. let It defines a block scope Variable that cannot be Shadowed.However you can define and later Render a Value. const It is also a block Scoped Variable that will not support Shadowing a const must be initialized with a value. Syntax: function f1(){ var x=10; if(x==10){ let y=20;
- 30. } console.log(" x= " + x + "n" + "y=" + y); } Error: y is not accessible outside block Syntax: Shadowing function f1() { var x=10; if(x==10){ var x=20; //valid let y=30; let y=50; //InValid } } Syntax: const reference function f1(){ const x; //Invalid x=10; //x-must be Initialized } "use strict" function f1( ){ const x;
- 31. x=10; console.log(" x= "+ x); let x; } Syntax: const reference function f1(){ const x; x=10; } protoType follow some sequence. Interpreter will go whenever it required. hoisting however it precides the order of hoisting. TypeScript Variables: TypeScript Variables will not support hoisting.It is a process supported in JavaScript where the translator Executes the code declaration followed by rendering. TypeScript compiler will sequentially executes the statements with a specific presiding order.Hence it will not support hoisting. Syntax: function f1(){ x=10; console.log("x="+ x); let x; }
- 32. Window related to Browser • The Global Scoped for variable in TypeScript is defined by declaring it outside the function. • JavaScript allows a Global scope for variable by declaring inside the function using window keyword. Syntax: let x=10; //global Ts Variable function f1( ){ window.y=20;// global Js Variable. console.log("x in f1=" + x); console.log("y in f1="+y); } function f2( ){ console.log("x is f2="+ x); console.log("y in f1="+y); } f1( ); f2( ); var length=255 chars variables are CaseSensitive function f1( ){
- 33. var name="John"; var name="Dhoni"; console.log(name); } f1( ); D:TypeScript>ts demo.ts Variable name cannot start with number or alphabet. Variable name can be alpha numeric Can't periods "." we can use special characters but not recomonded ECMA 255 chars long. TypeScript variable must follow the given naming conventions They are CaseSensitive let Name="John"; let Name="Jonson"; //both are different b)Variable name must start with an alphabet or _and can contain alpha numeric with_. var _Sales=12000; //valid var 2019 sales=34000; //Invalid var sales 2019=45000; // valid
- 34. var sales.2019=40000 // Invalid var sales _2019=45000;// valid c)ECMA Standards define Variable name length to max 255 chars. However it can vary according to Browser. d) Variable name must speak what it is. var id=10; Variables in TypeScript: Data Type: It determines the type of value that can be stored in a given memory reference. 1.Primitive Types/Value Types 2.Non Primitive Types/Reference Types. Primitive Type =>Stored in a memory Stack. • LIFO • Have a Fixed Value. • There will be minimum and maximum value. • number/integer -32767 32767 • accessed directly by their values. • value types. a. number b. boolean c. string
- 35. d. undefined e. null TypeScript DataTypes: I. The Data Type determines Type of value that can be stored in a reference. II. The TypeScript Data Types are categorized into two Types: a. Primitive Types b. Non-Primitive Types (or) Reference Types. Primitive Types: 1.The Primitive Types are Stored in a Memory Stack. 2.They use the Mechanism LIFO. 3.They have a fixed value. 4.They are stored and accessed by value. 5.Hence They are Known as Value Types. The TypeScript value Types are: a. number b. boolean c. string d. undefined e. null Number Type: Signed Integer= -10 Unsigned Integer=10
- 36. Floating Point=3.5 Double=340.560 Decimal=4.556979794 -29 let Signed:number=-10; let Unsigned:number=10; let float:number=4.5; let double:number=450.560; let decimal:number=4.55697979795932; let exponent:number=2e3; console.log="Signed="+Signed+"n"+"Unsigned="+Unsigned+"n"+"Float="+Float +"n"+"decimal="+decimal+"n" The number Type in TypeScript is used to handle numerical values which includes the following number Type:- Signed Integer -10 UnSigned Integer 10 Floating Point 3.5 Double 340.560 Decimal 4.556979794 -29 Exponent 2e^3 2*10''3=2000 Hex oxfood Binary 0b1010 Octal 0o174
- 37. Example:- "DataType.ts" let Signed:number= -10 let UnSigned:number=10; let float:number=4.5; let double:number=450.560; let decimal:number=4.556979795932; let exponent:number=2e3 console.log("Signed="+Signed+"n"+"UnSigned"+UnSigned+"n"+"Float="+float+" n"+"Double="+double+"n"+"Decimal="+decimal+"n"+"Exponent"+exponent) output: Signed=-10 UnSigned=10 Float=4.5 Double=450.560 Decimal=4.556979795932 Exponent=2000 Boolean Type:- The Boolean type is True/False 1/0 1. The Boolean type allocate a binary type of memory that holds the address for a number but stores the values True (or) False. 2. The Boolean Type over Mathematical operation will define 1 for "True" and 0 for "False". 3. However Boolean Type Reference can store only two keywords True or False.
- 38. 4. The Boolean Condition are also satisfied by using the keywords "True" or "False" or "0" or "1". Example:- let iSValid:boolean=true; let iSinvalid:boolean=false; console.log(isValid+isInValid);//1 console.log(isValid) //true if(isValid==1)//inValid Expression string type " " ' ' ` ` outer code must be " " inner code must be ' ' for string. back tick use along with expressions. let year:number=2019 let msg:string="Next year"+(year+1) you have to bind a string with expressions that how we need to bind >tsc String type.ts >node Stringtype.js escape sequence to print those in sequence. Non printing chars has to print these D:ImagesCarspic.js ps D:TypeScript
- 39. 3.String Type: A string represents group of characters enclosed in codes.a string can enclose alphabet,number or special characters. To enclose a string you can use following. Closure Description ""(double quote) It is used to define the outer string ' '(single quote) It is used to define the inner string ``(back tick) It is used to define a string with expressions. The TypeScript expressions are defined by using ${ } Syntax1: string let msg:string="welcome"; Syntax2: with Inner String let msg:string="alert('hello')"; Syntax3: string with expression let year:number=2019; let msg:string='Next year ${year+1}welcomes you'; Syntax4:WITHOUT bACKTICK EXPRESSION let msg:string="Next Year"+(year+1)+"Welcome you"; Note:Special Characters in a string representable can escape printing.To print the non-Printable characters use "" Example: let path:string="D:Imagescar.jpg"; o/p: D:Imagescar.jpg
- 40. let path:string="D:Imagescar.jpg"; o/p: D:Imagescar.jpg let msg:string="" welcome ""; o/p: "welcome" Undefined: The undefined type in TypeScript specifies that a value is not defined for a given reference.It can be verified by using keyword Undefined. Syntax: let x:number; console.log(x) Example: let price:number; if(price==undefined) { console.log("price is Not defined with value"); } else { console.log("price="+price); } Null Type: Null and Empty function f1( ){ console.log(" x= "+ x ); } function GetName( ){
- 41. let uname:string; uname=prompt("Your Name:"); if(name==" "){ document.write("Name can't be Empty") } else if(name==null){ document.write("you cancelled") } else{ } >tsc nulltype.ts >node nulltype.js "nulltype.html" <DOCTYPE html> <html> <head> <script src="nulltype.js"></script> <script> function bodyload( ){ GetName( ); } </script>
- 42. prompt box: • prompt reference is in the "uname". • The Page if he use cancel prompt not created at all. • During runtime reference unable to create if null is coming it is not empty value not there. • The null type is TypeScript is used to represent a reference that doesnt contain any value (or) not supplied with a value at runtime. • A refernce is created but value is not defined then TypeScript designates it as a "nul type". • The keyword null in lowercase is used to verify the null type. Example: Add a new TypeScript file by name "nulltype.ts" function GetName( ){ let uname : string; uname=prompt("Your Name"); if(uname==" "){ document.write("Name can't be Empty"); } else if(uname==null){ document.write("you cancelled"); } else{ document.write("you cancelled"); }
- 43. else{ document.write("Hello!"+ uname); } } 2.compile Ts File >tsc nulltype.ts >node nulltype.js 3.Create a new HTML file by name "nulldemo.html" <!DOCTYPE html> <html> <head> <script src="nulltype.js"> <script> function bodyload( ){ GetName( ); } </script> </head> <body OnLoad="bodyload( )"> </body> </html> output: This Page says
- 44. your name Hello!Jonson Non-primitive Types: 1. The Non-primitve Types are stored in memory heap. 2. The heap memory refers to Browser Cache memory 3. The heap memory doesn't have any fixed size.Hence,the value range varies according to the browser. 4. The Non-primitive types are accessed by a memory reference.Hence they are also known as Reference Types. 5. The TypeScript reference types are 1.Array Type 2.Object Type 3.Regular Expression Type. Array Type: Q.What is the use of an array in programming? Ans:Array are used in programming a. Reduce OverHead. b. Reduce Complexity.
- 45. I. It reduce OverHead by storing values in Sequential Order. II. It reduce the Complexity by storing multiple values under one Reference. III. Array naturally can store various types of values. IV. But TypeScript can restrict the values to similar Types. Q.Your technology restricts according to your nature [ ]? Ans: MetaCharacters * ? + [ ] * Astrik=Many +=One or More ?=one [ ]=Range dir p*.* dir t p*.* Array Type in TypeScript: 1.Array in Programming are used to reduce overhead and complexity 2.Array reduce overhead by storing values in sequential order 3.Array reduce complexity by storing multiple values under one reference name. 4.TypeScript Array can handle various types of values. 5.TypeScript Array Size can be changed dynamically. 6.TypeScript Array can also restrict an Array to handle specific type of Values. 7.The Array Types are defined by using the meta character the open close brase "[ ]" Syntax: Array Constructor
- 46. let values :string[ ]=new Array("A","B"); let values:any[ ]=["A",20,true]; Syntax: Rendering Values into Array let Values:string[ ]; Values[0]="A"; Values[1]="B"; In Client Side Scripting array is an object Example: let cities:string[ ]=new Array( ); let products:string[ ]=[ ]; Values are dynamically assigned values into array.If you are not resolving error Q.What is the difference between the Values for Square and Array Constructor? Ans: Initialize with [ ] is resolved during compile time Initialize with Array[ ] is resolved during runtime. Array Manipulations: i. Reading Values from an Array. • toString( ) • join( ) • Slice( ) toString( )->Reads the values from Array and return Values from Array CSV->Comma Seperated Values. Join( )->It allows you to use your own delimeter Slice( )->Allow you to read values from specific location.
- 47. Example: let products : string[ ]=["Tv","Mobile"]; console.log(products.join()); or Slice(1,3) Starting will include with 1 ending with -1 . If you want to extract we need to extract. Note: Reading values from Array:- Function Description toString( ) It reads all Values of an Array and returns them as string Seperated with "," as delimeter. join( ) It reads all values of an Array and return them as string seperated with any specified delimeter. "|","-->" Slice( ) It reads the Values from an Array based on Specified index and return a new Array. Example: let products :string[ ]=["Tv","Mobile","Sunglasses","Watch"]; console.log(products.toString()); //output:Tv,Mobile... console.log(products.join("|")) //output: Tv/Mobile/...
- 48. console.log(products.slice(1,3)); //output[ 'Mobile','Sunglasses'] 2.Adding Element /Values into Array • push( ) • unshift( ) • splice() Example: let products :string [ ]=["Tv","Mobile"]; console.log(products.toString( )); products.push("watch","Mouse"); console.log(products.toString( )); command prompt >tsc arraytype.ts >node arraytype.js push.ts Output:
- 49. Rest operator : It is used to pass many values. Function Description push( ) Append it is used to append a new element as last element. unshift( ) It is used to append a new element into Array as first element. splice( ) It is used to add new element into Array at any specified index. Array.ts output:
- 50. 5)Removing Elements from Array: Function Description 1.pop( ) It remove & returns the last element in an Array. 2.Shift( ) It removes and returns the first Element in an Array. 3.Spilce It remove a specified element from a Array based on the given index no.It return an array of remove elements. pop output pop
- 52. output: //Mobile Removed Validating an Email [email protected] dotposInDomain=Str.IndexOf("."); str.Slice(dotpos); Slice(4,1); Slice(4) Search for Element in an Array TypeScript provides the following Array functions that are used to Search for any Element in an Array. Function Description indexOf( ) It returns the index number of the Element specified in search.If not found then it returns "-1". lastIndexOf( ) It is similar to indexOf but finds the last occurance
- 53. of element and returns index. filter( ) It uses a function or an expression that can filter elements based on specified criteria Example: indexOf output Example: filter( )
- 55. Sorting Array Element: Function Description Sort( ) A Function is sort Arranges array elements in ascending order reverse( ) Arranges array element in the reverse order ie from bottom to top. 6.concat Array you can combine Array elements from Multiple Arrays and Store in a Single Array.The function "concat( )" is used for combining Array elements. output:
- 56. Q.How do we declare to handle any Type of elements? Ans:Object encapsulation a set of members logical Entity that hold the code.Object reference to class and reference.Object is a collection of members,It contain Members,Properties and Methods.These properties and Methods are related to object Events are related to Browser.Events are associated with browser not object Events are used by object.The behaviour of object is exihibited building an object is a set of properties and Methods. Object Type: 1. JavaScript is an object based Programming. 2. TypeScript is an object oriented programming 3. In both Programming approaches object is an logical Entity that encapsulates a set of Properties and Methods. 4. An object allows to reuse the components without redefing. 5. An object encapsulates the members in "{ }". 6. Object is by default static type hence its members are accessed directly by refering to Object name. let button:any={ width:100, height:20, value="Default" close:function( ){ return "closes the window"; }, open:function( ){ return "Opens the Window"; },
- 58. Json Type: Json type will be Array of object. Array of object[JSON-JavaScript object Notation] "json.ts" let products:any[ ]=[ { Name:"Tv",Price:34000 Name:"Shoe",Price:12000 } ]; console.log("Shoe Price="+products[1].Price); }, output:
- 59. Regular Expression: isNaN( )->is not a Number var x=10; even or odd var mobile ="+91 10 digits" It uses a pattern pattern referes to a format.patterns are built using Meta characters and Quantifiers.patterns are enclosed in '//'.pattern refers to a format.* represents zero or many.Regular Expression are always verifief with match( ) function. 3.Regular Expression Type 1.A Regular Expression is used to verify the format of input value.It uses a pattern that is enclosed in "/ /" 2.The pattern are built by using Meta Characters and Quantifiers. 3.The commonly used Meta characters ara shown below: Meta Characters Description ^ It matches the starting position within a string . It matches any single character or Exactly specified character.
- 60. It refer any Entity within the Expression. $ It matches the ending position within a string. * It matches the string preciding with zero or more Elements ? It matches the preciding element zero or one time + It matches the preciding element one or more times w It matches a word that is alpha numeric with(under score) _ W It represents a Non-word d It Specifies a Number with decimal places D It is to refer UnSigned Number. s allows leading spaces. S no space allowed. [ ] It defines range or Specific Value. [A-Z] only uppercase letters allowed.
- 61. [a-z] only lowercase allowed. [a-zA-Z] or [a-Z] Both Upper & Lower case . [0-9] Only numeric. [a-zA-Z0-9] or w alpha numeric [a,d,f] only specified characters [^a,d,f] exclude specified chars. [a-mA-M4-9] chars in specified range. +--$@ special chars group [!@#$%&] special char group (?=.*[A-Z]) Atlest one uppercase letter (?=.*[0-9]) Atleast one number (?=.*[!@#$%&] Atlest one special character. Qunatifiers Description {n} Exactly n-number of chars {n,m} minimum-n,maximum-m {n, } minimum-n,maximum any {4} {4,10} { 4 }
- 62. Syntax: let regExp:any=/[A-Z]{4,10}|; Note: A regular Expression is verified with the value using "match( )" function.It is a boolean function that returns true,when the expression matched. Example:- Regular Expression let pwd:string="Jonson123"; let regExp:any=/(?=.*[A-Z])w{4,15}; if(pwd.match(regExp)){ console.log("Verified"); } else{ console.log("Invalid Password") } output:
- 63. output: TypeScript DateTime: I. A DateTime can hold a date and Time value.TypeScript uses any Type to store date value.The Date value is stored in in memory as string allocated by date constructor "Date( )" II. Syntax: let mfd:any=new Date("2019/05/06") III. The date values are accessed and used by using Date( ).Date function which return a date and time number. Date Function Description getHour( ) Returns the hour number in 24hr format. getMinutes( ) Returns the Minutes number
- 64. fromTime. getSeconds( ) Returns the Second Number. getDate( ) Returns the Current date number ie "7" [05/07/2019] getDay( ) Return the weekday number 0=Sunday getMonth( ) Return Month number 0=Jan getFullYear( ) Return full year 2019. getYear( ) Return full year as per y2k/19. toLocale DateString( ) Return shortdate toLocale TimeString( ) Return shorttime let mfd:any=new Date("2019/05/06"); let month:string[ ]=["Jan","Feb","Mar","Apr","May"]; console.log("Manufacture Month="+months[mfd.getMonth()]); console.log("Mfd Year="+mfd.getFullYear( )); console.log("Mfd="+mfd.toLocaleDateString( )); output:
- 65. Summary of Data Types:
- 66. 1.Variables 2.DataTypes 3.Operators-In computer programming operator is an object that evaluates an value by using operands. 4.Statements Subtraction find difference value: string-string number-string boolean-boolean=number boolean-number=number boolean+string=string
- 67. TypeScript Operators: An operator in computer programming is an object that evaluates any value by using operands. The Operator is defined as unary,binary and ternary based on the number of operands it uses Single operand-Unary Two operands -Binary Three-Ternary The operators are categorised into several groups based on the type of value they return. 1.Arthematic Operator 2.Comparision (Relational) Operator. 3.Bitwise Operator 4.Logical operator 5.Assignment Operator. 6.Special Operator. Arthematic Operator: character Description Example + Addition 10+20=30 - Substraction 20-10=10 * Multiplication 10*20=200 / Division 20/10=2 % Modulus 21%10=1
- 68. (Remainder) ++ Increment var a=10; a++;Now a=11; -- Decrement var a=10; a--;Now a=9; ** Exponent 2**3=8 Post Increment:- It assigns the initialised value and increment thecurrent value let x:number=10; let y:number=x++; console.log("X="+x+"n"+"Y="+y); output: Pre-Increment:- It Increments the intialized value by 1 and then assigns
- 69. output Exponent ** Math.pow(2,3) Exponent:It is suppoerted in TypeScript not in JavaScript.Js will use "Math.pow( )".js will use "Math.pow( )" function for finding the base raised to power Syntax: let x:number=2**3; Ts-8 var x=Math.pow(2,3);Js-8 Comparision Operator: Operator Description Examples == Isequalto 10==20=false === Identical(equal and 10===20=false of Same Type) != NotEqualto 10!=20=true !== Not Identical 20!==20=false > Greater than 20>10=true >= GreaterThan or Equalto
- 70. 20>=10=true < Lessthan 20<10=false <= Lessthan or Equalto 20<=10=false Id===Id Field name must be id and Type Id==Id It will not compare type.it will only Compare Value. Identical Equal and not Equal Operator: The Identical Equal "===" is used to compare values of same type.If they are different type then the condition always return false. Example: let x:number=10; let y:number="10"; if(x==y)//Always false The Identical not equal "!==" is to verify that both values are same type and they are not equal. Example: let x:number=10; let y:number=10; let y:string="10"; Bitwise Operators: Operator Description Example & Bitwise AND (10==20) &(20==33)=False | Bitwise OR (10==20)|(20==33)=False ^ Bitwise XOR (10==20)^(20==33)=True
- 71. ~ Bitwise NOT (~10)=-11 << Bitwise Left Shift (10<<2)=40 >> Bitwise Right Shift (10>>2)=2 >>> Bitwise Right Shift (10>>>2)=2 with zero Logical Operators Operator Description Example = Assign 10+10=20 += Add and Assign var a=10;a+=20; Now a=30; -= Subtract and Assign var a=20;a=10; Now a=10 *= Mutiply and Assign Var a=10;a*=20; Now a=200 /= Divide and Assign Var a=10;a/=2; Now a=5; %= Modulus and Assign Var a=10;a%=2; Now a=0 Special Operators: ternary.ts let pin:number=3040;
- 72. console.log((pin=3040)?"Valid":"Invalid") output: It is dynamic memory allocating operator that allocates memory for specified object type and loads its members into memory. Syntax:
- 73. Ternary Operator: It is a Special Operator used to Evaluate a value based on Boolean Condition. Syntax: (condition)?Value If True:Value If False Example: let pin:number=3030; console.log((pin==3040)? "Valid" :"Invalid"); 2."new" Operator "new" Dynamic memory alocating operator It is a Dynamic Memory allocating operator that allocates Memory for Specified Object type and loads its members into Memory. Syntax: let values:string[ ]=new Array( ); let Mfd:any=new Date( ); let pic:any=new Image( ); values.length; values.push( ); Mfd.getMonth( ); pic.src="Image/Car.jpg" 3.typeof Operator: It is a Special Operator used to verify the typeof Value stored in a reference and return its datatype.
- 74. Syntax: let x:number=10; typeof x; Example: let product:any={ Name:"Tv", Price:45000, IsInStock:true, Total:function( ){ } }; console.log("typeof Name="+(typeof product.Name)+"n"+"typeof Price="+ (typeof product.Price)+"n"+"typeof Stock="+(typeof product.IsInStock)+"n"+"typeof Total="+(typeof product.Total)); output:
- 75. 4.Instanceof Operator: Instance of is Special Operator that Verifies Wheather the Specified Object is derived from given class.It returns Boolean true,If the Instance is Specified class type. Syntax: yourObject instance of yourclass; Example: let product:any={ Name:"Tv", Price:45000 }; console.log("product is an object="+product instanceof Object)); output
- 76. 6) "in" Operator It is a Special Operator used to verify whether the given property is avalible in an object it returns boolean false if property "Not Found" . Syntax: "PropertyName" in Object; "Tv" in product Tv is Value Name is a property Example: let product:any={ Name="Tv", Price:45000, IsInStock:true }; if("Price" in product){ for(var property in product){ console.log("property+":"+product[property]+"n"); } } else{
- 77. console.log("Price Missing"); } output: 7)Of Operator: It is a Special Operator used to verify the values of an given object and return the values. Example: let cities:string[ ]=["Delhi","Hyderabad"] for(var item of cities){
- 78. console.log(item); } output: Union Types: • TypeScript is Strictly Typed • You can define a reference to handle "any" type of value by using "any" datatype. • TypeScript supports union Type that allows to create a reference that can handle various types that restricted with only specified. • The union is defined by using pipe Symbol. Create a refernce that can handle various types that restricted with only specified. The Union is defined by using Pipe Symbol. Example:
- 79. let str:string |number; str="Welcome"; console.log(str); str=10; console.log(str); output: TypeScript Statements: A Statement in computer programming is used to control the Execution flow. The type of statements the TypeScript can Handle are categorized into following groups: StatementType Keyword Selection
- 80. if.else,switch,case Loop &Iteration Jump for,while,dowhile Jump break,continue,return Exception Handling try,catch,throw,finally TypeScript OOPS: • TypeScript is an class based Object Oriented Programming • JavaScript is an Object based Programming.while is psuedo OOP IE.OOP like Programming • The OOP Concepts were Introduced in the Early 1960's by Jhon Olay & Nyguard • OOP was formulated with a language called SIMULA-67 • The primary aim of OOP is to achieve code reusability • In the early 1970's Trygve Introduced code seperation into Object Oriented Programming it was formulated with "SmallTalk" • later th language c++ and Java made OOP Popular among developers Features of OOP: • Support Code Reusability • Supports Code Extensibility • Supports dynamic memory allocation • Supports loosely Coupled Architecture Drawback of OOP: • It is Complex in Configuration • It is Tidious and less Verbose. • It cannot directly interact with hardware Services
- 81. • It needs more memory to operate Characterstics of OOPS: 1. Inheritance 2. Polymorphism 3. Encapsulation 4. Abstraction code can be extended by a feature called Inheritance OOPS Terminology: Term Description class It is a Model or Blue print for creation of objects.It is a logical Entity that holds that encapsulates the logic object It is a physical representation of logical Entity Properties Defines the Physical Description of an object Methods Specifies the actions to be performed by an object Event Sends aMessage to the Subscriber inorder to notify change Contracts and Rules: • A contract in OOP Specifies the rules for designing a component • Every component that implements any contract must be designed according to specified rules • A contract can also define optional features,which are designated as optional for implementation • A contract with optional features is also known as "Template"
- 82. • In oop "Interface" is used to define contract Example: without contract let product:[ { Name:"Tv",Price:40000}, { Name :"Shoe",Price:"12000"}, ];//Invalid with contracts: Interface IProduct{ Name:string; Price:number; } let product:IProduct[ ]=[ { Name:"Tv",Price:34000},
- 83. {Name:"Mobile",Price:"4000"} ]//Invalid Names is not a member Price is number type. ? Nullable Optional Members: • Every member that you defined in an Interface is Mandatory to Implement • You can configure optional Members by using Null refernce character "?" Synatax: Interface Iname{ property?:type;//optional property:type; //required } Example:- interface Iname{ Name:string; Price:number; Qty?:number; } let product:IProduct[ ]=[ {Name:"Tv",Price:34000,Qty:2},
- 85. Every member in Interface is overridable by default you can restrict that by using Readonly once initialized with value we cannot redefine that we have to redefine and show an error as it is Readonly property.Readonly member cannot be overridden. Readonly Members: Interface members are by default overridable.ie you can redefine the value after Initialization. Syntax: interface IProduct{ Name:string; } let product:IProduct={ Name="Tv"; } product.Name="Samsung Tv";//valid console.log(product.Name);
- 86. output: you can prevent redefining of values after Initialization by configuring them as Readonly. Syntax: Interface Iproduct{ readonly Name:string; } let product:IProduct={ Name="Tv" } product.Name="Samsung Tv";//Invalid console.log(product.Name); Interface Methods: • A Method the behaviour of an Object • In TypeScript method is a function that is configured with any functionality • Interface Methods can be defined without return type by using the keyword void. • The return type specified datatype for return value of function Syntax: Method( ):Type{ return Type;
- 87. } Method( ):void{ }; Interface methods can have only Signature and not the definition. Method( ):void{ } Method:void ->Signature { }->Definition interface IProduct{ Name:string; Price:number; print( ):void; } Example: Interface Method Interface IProduct{ Name:string; Price:number, Print?( ):void } let product:IProduct={ Name:"Tv", Price:34000.50 print:function( ){ console.log("Name="+product.Name+"n"+"Price="+product.Price); }
- 88. }; console.log(product.Print( )); oracle,Sql Sever-Stored procedures parameters(how many we can pass) 1024->paramters we can pass while implementing formal parameters calling function-actual parameters formal parameter doesnot contain value only reference output: Interface Methods with return type and parameterized: • The return type specifies the data type of value returned by function • The Keyword "return" is used to return and to return the value and
- 89. terminate execution • break; will terminate block but continue the function • return; any statement we return is not reachable to compiler function f1( ){ console.log("Statm-1"); console.log("Statm-2"); console.log("Statm-3"); } f1( ); return;//it is used for returing stuf stuf are code blocks.which compiler cannot reach that return is not returning a value.we have to write condition and break; return; // Jump Statements break; //Jump Statements break; Continues even after we break Example: interface IProduct{ Name:string; Price:number; qty:number; Total?(qty:number,price:number,price:number):number; Print?( ):void } let product:IProduct ={