typescript handbook 学习笔记4

时间:2021-03-28 14:54:25

概述

这是我学习typescript的笔记。写这个笔记的原因主要有2个,一个是熟悉相关的写法;另一个是理清其中一些晦涩的东西。供以后开发时参考,相信对其他人也有用。

学习typescript建议直接看中文文档英文文档。我是看的英文文档

typescript handbook 学习笔记3

基本使用

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

  1. public是默认的,如果不声明就是public。
  2. private指只能内部访问,不能被子类访问。
  3. protected指只能被内部或者子类的实例访问。

注意:

  1. 2个类相同,除了成员相同之外,private和protected的元素必须来自于同一处代码。
  2. 如果一个类的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 };
    }
}