概述
这是我学习typescript的笔记。写这个笔记的原因主要有2个，一个是熟悉相关的写法；另一个是理清其中一些晦涩的东西。供以后开发时参考，相信对其他人也有用。
学习typescript建议直接看中文文档或英文文档。我是看的英文文档。
类
基本使用
class Greeter {
//只读，必须在声明的时候或者constructor里面初始化
readonly greeting: string;
//constructor里面的只读
constructor(readonly message: string) {
this.greeting = message;
}
greet() {
return \'Hello, \' + this.greeting;
}
}
class Greeter01 extends Greeter {
constructor(message: string = \'everyone\') {super(message);}
greet() {
return \'hi, \' + this.greeting;
}
}
let sam = new Greeter01(\'world\');
sam.greet();
public, private和protected
- public是默认的，如果不声明就是public。
- private指只能内部访问，不能被子类访问。
- protected指只能被内部或者子类的实例访问。
注意：
- 2个类相同，除了成员相同之外，private和protected的元素必须来自于同一处代码。
- 如果一个类的constructor被标记为protected，那么表示这个类不能被实例化，只能通过它生成子类，然后实例化子类。
存取器
存取器能够拦截并重写读写属性的操作，如果只有get没有set就会被认为是只读的。
let language = {
log: [\'example\', \'test\'],
set current(name) {
this.log.push(name);
},
get current() {
if (this.log.length === 0) {
return undefined;
} else {
return this.log[this.log.length - 1];
}
}
}
language.current = \'EN\';
console.log(language.current);
静态属性和方法
在属性或方法前面加上static就是静态属性或方法了，实例属性或方法用this访问，静态属性或方法用类名来访问。
抽象类
抽象类和接口类似，只能被继承，不能被实例化，和接口不同的是，抽象类可以定义一些方法，这些方法可以被继承。
抽象类也有抽象属性，抽象属性和接口一样，一定要在子类中实现。
类当做接口使用
很好理解，看下面这段代码即可。
class Point {
x: number;
y: number;
}
interface Point3d extends Point {
z: number;
}
let point3d: Point3d = {x: 1, y: 2, z: 3};
函数
简写形式和完整形式
由于编译的时候可以从简写形式推断出完整形式，所以推荐用简写形式。
//简写形式
function add(x: number, y: number): number {
return x + y;
}
let myAdd = function(x: number, y: number): number { return x + y; };
//完整形式
let myAdd: (x: number, y: number) => number =
function(x: number, y: number): number { return x + y; };
可选参数和默认参数
//可选参数
function buildName(firstName: string, lastName?: string) {
return firstName + " " + lastName;
}
//默认参数
function buildName(firstName: string, lastName = "Smith") {
return firstName + " " + lastName;
}
可选参数和默认参数的函数类型是相同的：(firstName: string, lastName?: string) => string。为了书写方便，默认参数写在后面比较好。
参数多的话也可以解构和展开，示例如下：
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;
this
关于this的原理请看这里：理解js中的函数调用和this。
如果遇到this报错，可以通过添加this: void或者this: 类名 来解决。
注意下面这种直接用等号的写法是一种实验性的写法，es6并不支持，只在es7上做了提案。但是typescript和react都对这种写法做了支持.
//用浏览器的审查元素运行，会报错
class Handler {
onClickGood = () => { console.log(this); }
}
一般如果要用等号的话，我们需要写在constructor里面(注意要加this)。
//写在constructor里面
class Handler {
constructor() {
this.onClickGood = () => { console.log(this); }
}
}
let myHandler = new Handler();
myHandler.onClickGood();
函数重载
看下面的例子，注意前2个才是函数重载，最后一个是函数声明。在编译的时候，会逐一判断函数类型，如果这2个都不符合，就会报错。
let suits = ["hearts", "spades", "clubs", "diamonds"];
function pickCard(x: {suit: string; card: number; }[]): number;
function pickCard(x: number): {suit: string; card: number; };
function pickCard(x): any {
// Check to see if we\'re working with an object/array
// if so, they gave us the deck and we\'ll pick the card
if (typeof x == "object") {
let pickedCard = Math.floor(Math.random() * x.length);
return pickedCard;
}
// Otherwise just let them pick the card
else if (typeof x == "number") {
let pickedSuit = Math.floor(x / 13);
return { suit: suits[pickedSuit], card: x % 13 };
}
}