typescript handbook 学习笔记4

概述

这是我学习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 };
    }
}

秒客网