My learning notes on type scripting
Type scripting is open free and open source that provides static typing supporting to javascript and it support object oriented programming
Angular Development
For Angular development, we can develop using various languages
JavaScript: extremely popular programming language
ECMAScript: standardized version of JavaScript (ES6, ES9, ...)
TypeScript: adds optional types to JavaScript
Other languages such as Dart, etc...
TypeScript is the most popular language for Angular development
Type scripting is superset of Javascript and ecmascript.
Why do most Angular developers use TypeScript?
Strongly-typed language with compile time checking and IDE support.
Increased developer productivity and efficiency.
The Angular framework is internally developed using TypeScript.
Docs, online blogs and tutorials use TypeScript for coding examples.
Type scripting files have .ts extension
To print on console
> console.log("shortcut key");
Compile the Code
Web browsers do not understand TypeScript natively it will only understand javascript code.
Convertion TypeScript code to JavaScript code is known as "transpiling" using tsc command.
Cmd to convert typescript to javascript
By running below command will generate the javascript file if compilation fails also
>tsc type_scripting_filename.ts
To avoid this type of issue can use
>tsc --noEmitOnError type_scripting_filename.ts
Above cmd will not save javascript file till there is no issue in typescript file
To run all type scripting file at a time we can use
> tsc
Run the code
By using node command we run typescript code
>node filename.js
Variables
Define Variables
Syntax
let <Variable_Name>: <type> = <initial value>;
Example:
let found: boolean = true;
let grade: number = 88.6;
let firstName: string = "Sai";
let lastName: string = 'kiran';
We can re assigned this variables.
Type: any
// we can assign different values of any type
let myData: any = 50.0;
myData = false;
myData = 'Eric';
myData = 19;
Two way of printing on console
console.log("Hi" + firstName + " " + lastName);
console.log(Hi ${firstName} ${lastName}`);
Loops in type scripting
For Loops
for (let i=0; i < 5; i++) {
console.log(i);
}
Loop on Array of numbers
let reviews: number[] = [5, 5, 4.5, 1, 3];
for (let i=0; i < reviews.length; i++) { console.log(reviews[i]);
}
Simplified For Loop
let alph: string[] = [a,b,c,d];
alph.push(e);
for (let alpha of alph) {
console.log(alpha);
}
Classes in type scripting
Basic Structure
We can use any file name for file which will not depend on class name like other.
class Customer {
// properties
// constructors
// getter / setter methods
}
Creating instance of for customer class using new keyword
let cust = new Customer
Create a Constructor
class Customer {
firstName: string;
lastName: string;
constructor (theFirst: string, theLast: string) { this.firstName = the First; this.lastName = theLast
}
Getter/Setter Methods
Since our properties are private, we need a way to access them
We can create traditional methods as in other OO languages.
Define getter/setter methods
class Customer {
private firstName: string;
private lastName: string;
public getFirstName(): string {
return this.firstName;
}
public setFirstName (theFirst: string): void { this.firstName = theFirst;
}
let myCustomer = new Customer ("Martin", "Dixon");
myCustomer.setFirstName("Greg"); console.log(myCustomer.getFirstName());
}
Constructor - Parameter Properties
Traditional Approach
class Customer {
private _firstName: string;
private lastName: string;
constructor(theFirst: string, theLast: string) {
this._firstName =theFirst;
this._lastName = theLast;
}
// getter and setter
}
Shortcut method to pass parameters properties
class Customer {
constructor(
private _firstName: string,
private _lastName: string) {
}
// getter and setter
}
Import and Export
Use the export keyword to use that class in another typescript file
