ts-notes

note: link

基础数据类型

• boolean

• number

• string

• [] | Array<元素类型>

• [string,number,…]

• enum

     enum Color { Red ，Green，Blue}
     let c：Color = Color.Green
  

• Any

• Void

• Null

• Undefiend

• Never

• Object

• 类型断言
  类型断言有两种形式。 其一是“尖括号”语法：

  let someValue: any = "this is a string";
  let strLength: number = (<string>someValue).length;
  

  另一个为as语法

  let someValue: any = "this is a string";
  
  let strLength: number = (someValue as string).length;
  

接口

• 可选属性

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

• 只读属性

  interface Point {
  	readonly x: number;
  	readonly y: number;
  }
  
  

• 函数类型
  接口能够描述JavaScript里丰富的类型。
  除了描述带有属性的普通对象外，接口也可以描述函数类型。
  给定义了一个调用签名，就像是一个只有参数列表和返回值类型的函数定义。

  interface SearchFunc {
  	(source: string, subString: string): boolean;
  }
  
  let mySearch: SearchFunc;
  mySearch = function(src: string, subString: string) {
     let result = src.search(subString);
     return result > -1;
  }
  
  

• 可索引的类型

• 类类型

  与C#或Java里接口的基本作用一样，TypeScript也能够用它来明确的强制一个类去符合某种契约

  	interface ClockInterface {
    	currentTime: Date;	
    	setTime(d: Date);
    }
    class  Clock implements ClockInterface {
    	currentTime: Date;
    	constructor(h: number; m:number) {}
    	setTime(d: Date) {
    		this.currenTime = d
    	}
    }
  

  接口描述了类的公共部分，而不是公共和私有两部分。 它不会帮你检查类是否具有某些私有成员

  • 静态类部分与实例部分的区别

  当一个类实现了一个接口时，只对其实例部分进行类型检查。constructor存在于类的静态部分，故不在检查范围内。应该直接操作类的静态部分。

    interface ClockConstructor {
    	new (hour: number, minute: number): ClockInterface;
    }
    interface ClockInterface {
    	tick();
    }
    function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
    	return new ctor(hour, minute)
    }
    class DigitalClock implements ClockInterface {
    	constructor(h: number, m: number) {}
    	tick() {
    		console.log('beep')
    	}
    }
    class AnalogClock implements ClockInterface {
    	constructor(h: number, m: number) {}
    	tick() {
    		console.log('tick')
    	}
    }
    let digital = createClock(DigitalClock, 12, 17)
    let analog = createClock(AnalogClock, 7, 32)
  

• 继承接口

• 接口继承类

类

传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件

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

let greeter = new Greeter('world')

/************************js************************/
var Greeter = /** @class */ (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return 'Hello, ' + this.greeting;
    };
    return Greeter;
}());
var greeter = new Greeter('world');

这个类有三个成员：

• 构造器
• 方法
• 属性
  使用this可以访问类的成员

继承

允许使用继承来扩展现有的类

/************************ts************************/
class Animal {
  move(distanceInMeters: number = 0) {
    console.log(`Animal move ${distanceInMeters}m.`)
  }
}

/************************js************************/
var Animal = /** @class */ (function () {
	/*构造器*/
    function Animal() {
    }
    Animal.prototype.move = function (distanceInMeters) {
        if (distanceInMeters === void 0) { distanceInMeters = 0; }
        console.log("Animal move ".concat(distanceInMeters, "m."));
    };
    return Animal;
}());

/************************ts************************/
class Dog extends Animal {
  bark() {
    console.log('Woof! Woof!')
  }
}
/************************js************************/
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();

var Dog = /** @class */ (function (_super) {
    __extends(Dog, _super);
    function Dog() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Dog.prototype.bark = function () {
        console.log('Woof! Woof!');
    };
    return Dog;
}(Animal));

公共，私有与受保护的修饰符

成员默认都是public
当成员被标记为private时，他就不能在声明他的类外部访问
protected成员在派生类中仍然可以访问
构造函数也可是被protected标记。这意味着这个类不能在包含它的类外别实例化，但是能被继承。
使用 readonly关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化

存取器

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';
if (employee.fullName) {
	alert(employee.fullName);
}

静态属性

每个实例想要访问这个属性(origin)的时候，都要在这个属性（origin）前面加上类名

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

let gird1 = new Gird(1.0)
let gird2 = new Gird(10.0)

console.log(gird1.calculateDistanceFromOrigin({x: 10, y: 10}))
console.log(gird2.calculateDistanceFromOrigin({x: 10, y: 10}))


/***********************************js********************************/

var Gird = /** @class */ (function () {
    function Gird(scale) {
        this.scale = scale;
    }
    Gird.prototype.calculateDistanceFromOrigin = function (point) {
        var xDist = (point.x - Gird.origin.x);
        var yDist = (point.y - Gird.origin.y);
        return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
    };
    Gird.origin = { x: 0, y: 0 };
    return Gird;
}());
var gird1 = new Gird(1.0);
var gird2 = new Gird(10.0);
console.log(gird1.calculateDistanceFromOrigin({ x: 10, y: 10 }));
console.log(gird2.calculateDistanceFromOrigin({ x: 10, y: 10 }));

抽象类

抽象类做为其它派生类的基类使用。 它们一般不会直接被实例化。 不同于接口，抽象类可以包含成员的实现细节。
abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法。

abstract class Animal {
  abstract makeSound(): void;
  move() :void {
    console.log('roaming the earch...')
  }
}

抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。 抽象方法的语法与接口方法相似。 两者都是定义方法签名但不包含方法体。 然而，抽象方法必须包含 abstract关键字并且可以包含访问修饰符。

---

调用 new并执行了这个函数后，便会得到一个类的实例。 这个构造函数也包含了类的所有静态属性。 换个角度说，我们可以认为类具有 实例部分与 静态部分这两个部分。

class Greeter {
    static standardGreeting = "Hello, there";
    greeting: string;
    greet() {
        if (this.greeting) {
            return "Hello, " + this.greeting;
        }
        else {
            return Greeter.standardGreeting;
        }
    }
}

let greeter1: Greeter;
greeter1 = new Greeter();
console.log(greeter1.greet());

let greeterMaker: typeof Greeter = Greeter;
greeterMaker.standardGreeting = "Hey there!";

let greeter2: Greeter = new greeterMaker();
console.log(greeter2.greet());

函數

函数类型包含两部分：参数类型和返回值类型。 当写出完整函数类型的时候，这两部分都是需要的。 我们以参数列表的形式写出参数类型，为每个参数指定一个名字和类型。 这个名字只是为了增加可读性

JavaScript里，每个参数都是可选的，可传可不传。 没传参的时候，它的值就是undefined。 在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能

可选参数必须跟在必须参数后面