开始学习TypeScript
Posted 前端手艺人
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了开始学习TypeScript相关的知识，希望对你有一定的参考价值。
什么是TypeScript?
它是微软开发的自由和开源的编程语言，是javascript的超集，扩展了JavaScript的语法。主要的用处就是代码类型检查。
安装
npm install -g typescript
编译
tsc filename.js
在线编译：https://www.typescriptlang.org/play/
语言特性
1 类型批注：编译时进行类型检查
function area(shape: string, width: number, height: number) {
var area = width * height;
return "I'm a " + shape + " with an area of " + area + " cm squared.";
}
document.body.innerhtml = area("rectangle", 30, 15);
2 接口：通过接口扩展。
interface Shape {
name: string,
width: number,
height: number,
color?: string
}
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 }));
console.log(area({ name: "square", width: 30, height: 30, color: "blue" }));
3 箭头函数 ：自动将函数的this附加到上下文中
var shape = {
name: "rectangle",
popup: function() {
console.log("This inside popup(): " + this.name);
setTimeout(function() {
console.log("This inside setTimeout(): " + this.name);
console.log("I'm a " + this.name + "!");
}, 3000);
}
};
shape.popup();
输出：
This inside popup(): rectangle
This inside setTimeout():
I'm a !
采用箭头函数后：
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();
输出：
This inside popup(): rectangle
This inside setTimeout(): rectangle
I'm a rectangle!
3 类
class Shape {
public area: number;
private color: string;
constructor(name: string, 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);
console.log(square.shoutout());
private和public是修饰符
4 继承
class Shape3D extends Shape {
volume: number; //color属性因为是私有不会被继承 area会被继承
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(); //调用父类也就是Shape的方法
}
}
var cube = new Shape3D("cube", 30, 30, 30);
console.log(cube.shoutout());
console.log(cube.superShout());
接口和类的对比
接口是在编译时类型检查时候用到，不会有JS代码，而类的话会自动编译成js代码：
class Test {
a: number;
b: string;
}
class Test2 extends Test {
c: number;
}
编译后：(在线编译试一试：https://www.typescriptlang.org/play/)
var __extends = (this && this.__extends) || (function() {
var extendStatics = Object.setPrototypeOf || ({
__proto__: []
}
instanceof Array &&
function(d, b) {
d.__proto__ = b;
}) ||
function(d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
};
return function(d, b) {
extendStatics(d, b);
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var Test =
/** @class */
(function() {
function Test() {}
return Test;
} ());
var Test2 =
/** @class */
(function(_super) {
__extends(Test2, _super);
function Test2() {
return _super !== null && _super.apply(this, arguments) || this;
}
return Test2;
} (Test));
所以如果做接口声明，最好采用接口。
TypeScript和Flow的区别
Flow是Facebook推出的一款类型检查工具。TypeScript 实现了类型检查，同时实现了转译工具用来生成纯粹的 JavaScript Flow 只进行类型检查，并依赖 Babel、flow-remove-types或者其它工具来移除类型说明。
比如下面是Flow类型检查代码：
// @flow
function bar(x): string {
return x.length;
}
bar('Hello, world!');
在浏览器控制台，它不会工作！你会得到一个错误消息，比如 Unexpected token :，因为解析器遇到了返回类型申明。如果想让这段代码正确运行，就必须移除类型说明。
以上就是今天的内容，谢谢阅读。
参考文章：
http://www.runoob.com/w3cnote/getting-started-with-typescript.html
https://medium.com/front-end-hacking/typescript-class-vs-interface-99c0ae1c2136
http://www.zcfy.cc/article/typescript-vs-flow-marius-schulz-2359.html
以上是关于开始学习TypeScript的主要内容，如果未能解决你的问题，请参考以下文章
typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming
typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming
typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming