Typescript 笔记

参考中文文档

Typescript 基础类型:

中文文档参考

// Any
let notSure: any = 4;

// Boolean
let isDone: boolean = false;

// Number
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

// String
let color: string = "blue";

// Array
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
let x: [string, number] = ["hello", 10];
let list: any[] = [1, true, "free"];

// Enum
enum Color {Red, Green, Blue};
let c: Color = Color.Green;

// Void
function warnUser(): void {
}

// Null and Undefined
let u: undefined = undefined;
let n: null = null;

---

Typescript 函数

参考

// function foo(x: 参数): 函数返回类型 {}
function add(x: number, y: number): number {
    return x + y;
}

书写完整函数类型

这种函数类型看着有点怪,

let myAdd: (baseValue: number, increment: number) => number =
    function(x: number, y: number): number { return x + y; };

默认参数

function name (firstName: string, lastName: string ="someName"){

}

可选参数

在参数后面加上 “?” 被确定为可选参数.

function buildName(firstName: string, lastName?: string) {

}

剩余参数

function buildNa么(firstN: string, ...restOfName: string[]){
  return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

---

Typescript interface 接口

(参考)[https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Interfaces.html];

interface 和 abstract 区别

interface 是接口，所有的方法都是抽象方法，成员变量是默认的public static final 类型。接口不能实例化自己.
abstract class 是抽象类，至少包含一个抽象方法的累叫抽象类，抽象类不能被自身实例化，并用abstract关键字来修饰.

interface

interface SquareConfig {
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
  let newSquare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

let mySquare = createSquare({color: "black"});

---

Typescript 类

参考

一个简单的类

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

getter & setter

typescript 允许自定义getter 和 setter

let passcode = "secret passcode";
class Employee {
    private _fullName: string;

    get fullName(): string {
        return this._fullName;
    }

    set fullName(newName: string) {
        if (passcode && passcode == "secret passcode") {
            this._fullName = newName;
        }
        else {
            console.log("Error: Unauthorized update of employee!");
        }
    }
}

let employee = new Employee();
employee.fullName = "Bob Smith";

继承

class Animal {
    name:string;
    constructor(theName: string) {
      this.name = theName;
    }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

class Snake extends Animal {
    constructor(name: string) {
      super(name); // call parent constructor
    }
    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }
}

修饰符: public, protected, private 和 readonly

public

所有人都可以访问.

protected

只有类里面或者子类可以访问.

private

只有在类里面可以进行访问.

readonly

只能读取不能再赋值

静态属性

用 static 关键字来声明

class Grid {
    //声明
    static origin = {x: 0, y: 0};
    calculateDistanceFromOrigin(point: {x: number; y: number;}) {
        //调用
        let xDist = (point.x - Grid.origin.x);
        let yDist = (point.y - Grid.origin.y);
        return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
    }
    constructor (public scale: number) { }
}

抽象类

抽象类
abstract class Department {

    constructor(public name: string) {
    }

    printName(): void {
        console.log('Department name: ' + this.name);
    }

    //抽象方法
    abstract printMeeting(): void; // 必须在派生类中实现
}

继承抽象类
class AccountingDepartment extends Department {

    constructor() {
        super('Accounting and Auditing'); // constructors in derived classes must call super()
    }

    printMeeting(): void {
        console.log('The Accounting Department meets each Monday at 10am.');
    }

    generateReports(): void {
        console.log('Generating accounting reports...');
    }
}