TypeScript is not entirely new language, it's a superset of Javascript, so that means any valid javascript code is also valid typescript code but typescript has additional features that do not exist in the current version of javascript supported by most browsers out there.
In Typescript we have concept of strong or static typing like Java, C#. When we define a variable we need to specify the type of that variable now in typescript typing is optional so we don't have to use this feature but using this feature makes our applications more predictable and it also makes it easier to debug them when something goes wrong. Typescript also bring quite a few Object-oriented features that we have missed in javascript for a long time, we have the concept of classes, interfaces, constructors, access modifiers like public and private, generics and so on.
Another benefit with Typescript is that with typescript we can catch errors at compile time instead of at runtime and when we compile our typescript code we can catch these errors and fix them before deploying our application and also we can get the intelligence help in our code editors while writing the code.
Whenever we build our application typescript compiler kicks in and it tranpiles our typescript code into javascript code that browsers can understand.
Type annotations
Arrow functions
Interfaces
Classes
Constructors
Access modifiers
Properties
Modules
##types##
number
boolean
string
any
number[]
any[]
enum Color {Red, Green, Blue};
##type assertion##
is a way to tell typescript compiler about the type of a variable, so we can access the intellisense.
let message;
message = 'abc';
let endsWithC = message.endsWith('c'); // here after message. you won't get intellisence help as compiler not sure about the type of the message.
let endsWithC = (<string>message).endsWith('c'); // here we are telling the compiler about the type of message, and now we can get the help of the intellisence.
(or )
let endsWithC = (message as string).endsWith('c');
##inline annotations##
let drawPoint = (point: {x: number, y: number}) => {
}
here we are using inline annotations for point parameter
##optional parameters##
constructor(x?: number, y?: number){
this.x = x;
this.y = y;
}
here in the constructor we are making the parameters as optional with appending a quesion mark to the parameter.
all the parameters to the right side should be made optional, this is a rule by typescript.
let point = new Point(1, 2);
let point = new Point();
##Access modifiers##
Public # by default all properties are public
Private
Protected
we can add the access modifiers on fields, properties and methods
private x: number;
private draw() { //... }
##fields##
fields are similar to properties in other languages but they are not actual properties in typescript
##Property##
A property looks like your field from the outside but internally it's a really a method in the class, it's either one method which is a getter or a setter or a combination of a getter and a setter.
Example;
//like.component.ts
export class LikeComponent {
constructor(private _likesCount: number, private _isSelected: boolean){
} // note: internally Typescript creates these properties and assigns the values when you are creating this object.
get likesCount(){ // note here we don't have '_'
return this._likesCount;
}
set likesCount(value){ // note here we don't have '_'
if(value > 0){
this._likesCount = value;
}
}
}
//main.ts
import { LikeComponent } from './like.component';
let component = new LikeComponent(10, true);
component.likesCount = 2;// here we are setting some value internally it will call the setter, note there is no '_'
console.log(`likesCount: ${component.likeCount}`);
##modules##
In typescript we divide our program into multiple files in each file we export one or more types these types can be classes, functions, simple variables or objects and whenever we need to use these types we need to import them first. When we have an import or export statement on top of a file that file is a module from typescript's point of view.
In Typescript we have concept of strong or static typing like Java, C#. When we define a variable we need to specify the type of that variable now in typescript typing is optional so we don't have to use this feature but using this feature makes our applications more predictable and it also makes it easier to debug them when something goes wrong. Typescript also bring quite a few Object-oriented features that we have missed in javascript for a long time, we have the concept of classes, interfaces, constructors, access modifiers like public and private, generics and so on.
Another benefit with Typescript is that with typescript we can catch errors at compile time instead of at runtime and when we compile our typescript code we can catch these errors and fix them before deploying our application and also we can get the intelligence help in our code editors while writing the code.
Whenever we build our application typescript compiler kicks in and it tranpiles our typescript code into javascript code that browsers can understand.
Type annotations
Arrow functions
Interfaces
Classes
Constructors
Access modifiers
Properties
Modules
##types##
number
boolean
string
any
number[]
any[]
enum Color {Red, Green, Blue};
##type assertion##
is a way to tell typescript compiler about the type of a variable, so we can access the intellisense.
let message;
message = 'abc';
let endsWithC = message.endsWith('c'); // here after message. you won't get intellisence help as compiler not sure about the type of the message.
let endsWithC = (<string>message).endsWith('c'); // here we are telling the compiler about the type of message, and now we can get the help of the intellisence.
(or )
let endsWithC = (message as string).endsWith('c');
##inline annotations##
let drawPoint = (point: {x: number, y: number}) => {
}
here we are using inline annotations for point parameter
##optional parameters##
constructor(x?: number, y?: number){
this.x = x;
this.y = y;
}
here in the constructor we are making the parameters as optional with appending a quesion mark to the parameter.
all the parameters to the right side should be made optional, this is a rule by typescript.
let point = new Point(1, 2);
let point = new Point();
##Access modifiers##
Public # by default all properties are public
Private
Protected
we can add the access modifiers on fields, properties and methods
private x: number;
private draw() { //... }
##fields##
fields are similar to properties in other languages but they are not actual properties in typescript
##Property##
A property looks like your field from the outside but internally it's a really a method in the class, it's either one method which is a getter or a setter or a combination of a getter and a setter.
Example;
//like.component.ts
export class LikeComponent {
constructor(private _likesCount: number, private _isSelected: boolean){
} // note: internally Typescript creates these properties and assigns the values when you are creating this object.
get likesCount(){ // note here we don't have '_'
return this._likesCount;
}
set likesCount(value){ // note here we don't have '_'
if(value > 0){
this._likesCount = value;
}
}
}
//main.ts
import { LikeComponent } from './like.component';
let component = new LikeComponent(10, true);
component.likesCount = 2;// here we are setting some value internally it will call the setter, note there is no '_'
console.log(`likesCount: ${component.likeCount}`);
##modules##
In typescript we divide our program into multiple files in each file we export one or more types these types can be classes, functions, simple variables or objects and whenever we need to use these types we need to import them first. When we have an import or export statement on top of a file that file is a module from typescript's point of view.