TypeScript Beginner Tutorial
Category Programming Technology
What is TypeScript?
TypeScript is a free and open-source programming language developed by Microsoft. It is a superset of JavaScript, extending its syntax.
Syntax Features
Classes
Interfaces
Modules
Type annotations
Compile-time type checking
Arrow functions (similar to C#'s Lambda expressions)
For more content, refer to: TypeScript Tutorial.
Differences Between JavaScript and TypeScript
TypeScript is a superset of JavaScript, extending its syntax. Existing JavaScript code can work with TypeScript without any modifications. TypeScript provides compile-time static type checking through type annotations.
TypeScript can process existing JavaScript code and compile only the TypeScript code within it.
Installing TypeScript
We can install TypeScript through the following methods:
Via Node.js package manager (npm)
Via the MSI integrated with Visual Studio 2012. (Download here).
Interface When Installing via MSI File:
class.ts(12,42): The property 'name' does not exist on value of type 'Shape' class.ts(20,40): The property 'name' does not exist on value of type 'Shape' class.ts(22,41): The property 'width' does not exist on value of type 'Shape' class.ts(23,42): The property 'height' does not exist on value of type 'Shape'
Next, we add public and private access modifiers. Public members can be accessed anywhere, while private members are only allowed within the class.
Next, we modify the above code, declaring color as private and the constructor parameter name as public:
...
private color: string;
...
constructor ( public name: string, width: number, height: number ) {
...
Since the color member variable is set to private, the following message will appear:
class.ts(24,41): The property 'color' does not exist on value of type 'Shape'
Inheritance
Finally, we can inherit from an existing class and create a derived class using the extends keyword.
Next, we add the following code at the end of the class.ts file, as shown below:
class Shape3D extends Shape {
volume: number;
constructor ( public name: string, width: number, height: number, length: number ) {
super( name, width, height );
this.volume = length * this.area;
};
shoutout() {
return "I'm " + this.name + " with a volume of " + this.volume + " cm cube.";
}
superShout() {
return super.shoutout();
}
}
var cube = new Shape3D("cube", 30, 30, 30);
console.log( cube.shoutout() );
console.log( cube.superShout() );
Derived class Shape3D explanation:
Shape3D inherits from the Shape class, also inheriting the color property of Shape.
In the constructor, the super method calls the base class Shape's constructor, passing the parameters name, width, and height. Inheritance allows us to reuse the Shape class code, so we can calculate this.volume by inheriting the area property.
The shoutout() method of Shape3D overrides the base class implementation. The superShout() method directly returns the base class's shoutout() method using the super keyword.
Other code can be completed according to your own needs.
Reference Documents
TypeScript Chinese Manual: http://www.tutorialpro.org/manual/gitbook/TypeScript/_book/
http://code.tutsplus.com/tutorials/getting-started-with-typescript--net-28890
https://zh.wikipedia.org/wiki/TypeScript
** Click to Share Notes
-
-
-