type script in a Nutshell
Today’s topic is about typescript.
before i start , you may want to take a look on this article to have an understanding of Oriented Objected Programming
It’s a programming language, actually it’s a super-set for JavaScript.
It extends the language but with much
more features (generics,tuples,interfaces,etc).
All the typescript code will be compiled to JavaScript
since the browser can’t understand it.
As you may see, any code in JavaScript could be compiled
in typescript.
Let’s take a brief look on some cool features.
1-types:
As the name says, typescript comes with static typing.
We can use the predefined or we can create ours!
let char ="me"
char =1
For example, when we write this code our editor will
throw an error: Type 'number' is not assignable to type 'string'.
This would help in discovering bugs! Same with other
basic types try to play with it a little.
const add=(a:number,b:number):number=>{
return a+b;
}
Same when using a function! Note that return type is option.
type address={
city :string;
postalCard:number;
street:string;
}
let myAdress:address
And here we create the type address.
This is very Beneficial when scaling a big project.
Our variable may take also more than one type:
let code : string |number;
code =1203
code = "mycode"
And this is possible also.
2-Classes and Interface:
OOP in typescript offers advanced features, for attributes
we can have “readonly” propriety in order to tell that the propriety is
constant!
class Person{
readonly name:string;
job?:string;
[propName: string]: any;
}
There’s not a big difference in classes from the known
JavaScript.
The “?:” it means that the attributes is optional to
have.
But what if we needed to have others?😕
Simply this is what I have done in the last line.
The any type is any type simply as that.😂
In Constructor we can also define the attributs.
class Person{
constructor(readonly name:string,job?:string,){
this.name=name;
this.job = job;
}
greet():void{
console.log("hy my name is:"+this.name)
}
}
Well as you see we could just replace definition of
some attributes using the constructor!
This code contain error. The job isn’t a part of
Person class.
And the editor shows this! Nice no?😉
The void means that the function returns nothing.
Now with interfaces:
An interface is a syntax that an entity must follow.
This concept is similar to declaring your own type.
The
only difference is that you can add other methods or attributes for a class or
a type but you can’t with interfaces
interface Person{
name:string;
age:number;
greet: ()=>void
}
var customer:Person = {
name:"me",
age:25,
greet:():void=>{
console.log("hyyy")
}
}
Interfaces support inheritance as multiple inheritance
too! But we won’t get in know!
3-tuples:
If you come from a python background you may know it.
Tuples
are like lists one their value is fixed you can’t change it.
var user: [number, string, boolean, number, string];// declare tuple variable
user = [12, "me", true, 20, "developer"];// initialize tuple variable
Here’s how we use it.
Well I tried to be brief as possible.
Typescript is
full of hidden features, I really recommend it.
See you soon.😀
No comments