Typescript is a superset of javascript with two main goals:
Provide an optional type system for Javascript and provide planned features from future JavaScript editions
The type system is optional and you are going to use It if you want agility when doing refactoring and if you want a well documented code.
But the most important is that your Javacript is Typescript.
What typescript gives you is time type safety for your javascript code. The great thing is that the types are completely optional.
So your javascript file name can be renamed as a .ts file and will still give you back valid javascript code.
Also one of the main points for Typescript is that is allows you to use a bunch of features from ES6 and beyond.
So let's see some cool new features:
Classes:
FInally a Javascript Developer can have a class:
class Point {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
add(point: Point) {
return new Point(this.x + point.x, this.y + point.y);
}
}
var p1 = new Point(0, 10);
That generates the following Javascript on ES5:
var Point = (function () {
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.add = function (point) {
return new Point(this.x + point.x, this.y + point.y);
};
return Point;
})();
Inheritance:
Classes in Typescript(like other languages) support single inheritance using the extends keyword as shown below:
class Point3D extends Point {
z: number;
constructor(x: number, y: number, z: number) {
super(x, y);
this.z = z;
}
add(point: Point3D) {
var point2D = super.add(point);
return new Point3D(point2D.x, point2D.y, this.z + point.z);
}
}
If you have constructor in your class then you must call the parent constructor from your constructor. This ensures that the stuff that it needs to set on this gets set.
With super you can add any additional stuff you want to do in your constructor.
I find inheritance one of the not so efficient , because is "emulated" using JavaScript prototypes and produces more code than one would write normally in JavaScript. So use inheritance with caution. You can look at generated JavaScript to see whether your constructs are compiled efficiently enough for your case.
Access Modifiers:
TypeScript supports access modifiers public , private and protected which determine
the accessibility of a class member as shown below:
accessible on public protected private
class yes yes yes
class children yes yes no
class instances yes no no
Remember:
If an access modifier is not specified it is implicitly public as that matches the convinient nature of javascript.
class FooBase {
public x: number;
private y: number;
protected z: number;
}
// EFFECT ON INSTANCES
var foo = new FooBase();
foo.x; // okay
foo.y; // ERROR : private
foo.z; // ERROR : protected
//
Arrow functions
The reasons that you have arrow functions are mainly three:
1)You don't need to type <<function>>
2) It lexically captures the meaning of this
3)It lexically captures the meaning of arguments
Let's what we mean by the second argument:
If we write the following function in plain javascript:
function Person(age) {
this.age = age
this.growOld = function() {
this.age++;
}
}
var person = new Person(1);
setTimeout(person.growOld,1000);
setTimeout(function() { console.log(person.age); },2000); // 1, should have been 2
It will return one instead of two.That happens because this is inside the body function
We can fix this with arrow function:
function Person(age) {
this.age = age
this.growOld = () => {
this.age++;
}
}
var person = new Person(1);
setTimeout(person.growOld,1000);
setTimeout(function() { console.log(person.age); },2000); // 2
And this equivalent to the following Javascript code:
function Person(age) {
this.age = age
var _this = this; // capture this
this.growOld = function() {
_this.age++; // use the captured this
}
}
var person = new Person(1);
setTimeout(person.growOld,1000);
setTimeout(function() { console.log(person.age); },2000); // 2
Note that we can use even sweeter typescript syntax:
class Person {
constructor(public age:number) {}
growOld = () => {
this.age++;
}
}
var person = new Person(1);
setTimeout(person.growOld,1000);
setTimeout(function() { console.log(person.age); },2000); // 2
Conclusion
Classes, Inheritance and Arrow Functions are the most important parts about typescript but we didn't cover things like promises, interfaces etc.
Σχόλια
Δημοσίευση σχολίου