什么是TypeScript
TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集(js是ts的子集)，扩展了 JavaScript 的语法。
为什么要用TypeScript
1. 编译时的强类型
在申明阶段定义变量的类型，那么任何其他类型的赋值将会引起编译错误；另外，能够智能提示当前变量具有哪些属性和方法。
2.模块化
用TypeScript的关键词module，可以达到类似于命名空间的效果，而export可以控制是否被外部访问。
3.容易上手和语法糖
TypeScript的一个设计亮点就是它并没有抛弃JavaScript的语法另起炉灶，而是做成了JavaScript的超集，任何合法的JavaScript的语句在TypeScript下都是合法。另外，TypeScript实现了类，接口，枚举，泛型，方法重载等，用简洁的语法丰富了JavaScript的使用。个人认为，因为ts的加入，使得js能够成为一个面向对象的编程语言。
接下来下文会通过TypeScript的属性和方法来体现这些优点
如何开始使用TypeScript
1：安装
npm install -g typescript
2：构建ts文件
3：编译代码
tsc filename.ts
正式上路
类型批注
TypeScript 通过类型批注提供静态类型以在编译时启动类型检查。这是可选的，而且可以被忽略而使用 JavaScript 常规的动态类型。对于基本类型的批注是number, bool和string。而弱或动态类型的结构则是any类型。
function Add(left: number, right: number): number {
return left + right;
}
接口
接口可以作为一个类型批注，而在定义参数的时候直接用interface申明即可，接口一般首字母大写。其中带？的参量可以在被忽略添加，而any表示任何类型；另外还有联合类型，联合类型使用|分隔每个类型，对于联合类型的注意事项可以参考这里。
interface Shape {
name: string | number;
width: number;
height: number;
color?: any;
}
function area(shape : Shape) {
var area = shape.width * shape.height;
return "I'm " + shape.name + " with area " + area + " cm squared";
}
console.log( area( {name: "rectangle", width: 30, height: 15} ) ); ok
console.log( area( {name: "square", width: 30, height: 30, color: "blue"} ) ); ok
console.log( area( {width: 30, height: 15} ) ); error
箭头函数表达式（lambda表达式）
lambda表达式()=>{something}或()=>something相当于js中的函数,它的好处是可以自动将函数中的this附加到上下文中。
var shape = {
name: "rectangle",
popup: function() {
console.log('This inside popup(): ' + this.name);
setTimeout( () => {
console.log('This inside setTimeout(): ' + this.name);
console.log("I'm a " + this.name + "!");
}, 3000);
}
};
shape.popup();
类
TypeScript支持集成了可选的类型批注支持的ECMAScript 6的类。在类中可以添加对象，构造器和其他基本类型，但是需要使用 public 和 private 访问修饰符的以规定变量调用的上下文（其中Public 成员可以在任何地方访问， private 成员只允许在类中访问）。
class Shape {
area: number;
color: string;
constructor ( public name: string, public width: number, height: number ) {
this.area = width * height;
this.color = "pink";
};
shoutout() {
return "I'm " + this.color + " " + this.name + " with an area of " + this.area + " cm squared.";
}
}
var square = new Shape("square", 30, 30);
var thisname = square.name;
console.log( square.shoutout() );
console.log( 'Area of Shape: ' + square.area );
console.log( 'Name of Shape: ' + square.name );
console.log( 'Color of Shape: ' + square.color );
console.log( 'Width of Shape: ' + square.width );
console.log( 'Height of Shape: ' + thisname );
// 以上代码验证不会报错，但是不加public则会报错，但是ts的编译错误不会导致代码崩溃。
继承
继承一个已存在的类并创建一个派生类，继承使用关键字 extends。
class Shape {
area: number;
color: string;
constructor ( public name: string, public width: number, height: number ) {
this.area = width * height;
this.color = "pink";
};
shoutout() {
return "I'm " + this.color + " " + this.name + " with an area of " + this.area + " cm squared.";
}
}
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() ); // I'm cube with a volume of 27000 cm cube.
console.log( cube.superShout(); // I'm pink cube with an area of 900 cm squared.
说明：
- Shape3D 继承了 Shape 类, 也继承了 Shape 类的 color 属性。
- 构造函数中，super 方法调用了基类 Shape 的构造函数 Shape，传递了参数 name, width, 和 height 值。 继承允许我们复用 Shape 类的代码，所以我们可以通过继承 area 属性来计算 this.volume。
- Shape3D 的 shoutout() 方法重写基类的实现。superShout() 方法通过使用 super 关键字直接返回了基类的 shoutout() 方法。
在继承中的construct中，必须需要使用super方法才能将父类的属性继承到子类的this中，而且super可以传递参数，但是父类的的方法只能通过super调用
网友评论