/**
* TypeScript进阶篇读书笔记
*/
// 1. 类型别名
// TS 中用 type 定义类型别名，其实就是为了书写更方便
type Name = string;
type nameFunc = () => string;
type unionNameType = Name | nameFunc;
function getName(n: unionNameType): Name{
    if(typeof n === 'string'){
        return n;
    }else{
        return n();
    }
}
// 2. 字符串字面量类型
// 也是用 type 定义，就是限定你取值的范围只能是给定的字面量之一
type _str = 'A' | 'B' | 'C'
function getStr(n: _str): string{
    return n;
}
getStr('a'); // 报错，'a' 不在给定的字面量范围内
getStr('A'); // 通过编译
// 3. 元组( tuple )
// 元组的概念和python中的元组异曲同工，可以容纳不同类型的数据。
let tmp: [string, number] = ['123', 123];
// 可以通过索引访问, TS会帮你把类型分的清清楚楚
tmp[0].slice();
tmp[0]='234'; // 不像python，它是可以改变的
tmp[1].toFixed(2);
// 但是在初始化阶段，必须每个类型都要赋值的
let tmp2: [string, number] = ['123']; // 报错，每个类型的都要初始化
// 如果往元组中新增了一个数据(越界的时候)，其类型是已有类型的联合类型
let tmp3: [string, number];
tmp3.push('1');
tmp3.push(1);
tmp3.push('123');
tmp3.push(true); // 报错，boolean类型并不是已有类型的联合类型包括的
tmp3[2].slice(1); //报错，当访问这个越界的元素的时候，他的类型是联合类型的，这里就是string|number
                  //所以，只能访问公共属性啊。
(<string>(tmp3[2])).slice(1); // 可以这样访问，断言属性，忘了吗?
// 4. 枚举( Enum )
// 枚举的概念取于 c# ,直白的说就是自定义的一个集合，转载任何你想的类型，比如星期、颜色、方向...
// TS 中使用 enum 定义枚举
enum colors {black, white, red};
// 枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射
console.log(colors['black'] === 0) // true
console.log(colors['white'] === 1) // true
console.log(colors[1] === 'white') // true
// 手动赋值
// 未被赋值的会接着上一级以 1 为步长递增，上一级如果赋值为 2.5, 下一个就为 3.5。
// 如果与手动赋值的数产生了冲突， TS 会忽视手动赋值的数，如下， Web 与 Sun
// 其实是先给 Sun 赋值了 3，然后进行到 Web 的时候也刚好是 3，就把前面的覆盖了。
// 手动赋值不一定非要是数字的，你只要断言一下，让 ts 不要检查类型就可以使用字符串赋值。 
enum days { Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat };
enum days2 { Sun = 3, Mon = 1.3, Tue, Wed, Thu, Fri, Sat };
console.log(colors['Tue'] === 2) // true
console.log(colors['Tue'] === 2.3) // true
console.log(colors['Wed'] === 3) // true
console.log(colors[3] === 'Wed') // true
console.log(colors[3] === 'Sun') // false
// 计算项目
// 就是成员赋值也是可以用计算式的
enum colors2 {black, red, yellow='orange'.length};
// 常数枚举
// 常数枚举与普通枚举的区别是，它会在编译阶段被删除，并且不能包含计算成员
const enum colors3 { black, red }
// 外部枚举
// declare 定义的类型只会用于编译时的检查，编译结果中会被删除
// 外部枚举与声明语句一样，常出现在声明文件中。
// 同时使用 declare 和 const 也是可以的
declare enum colors4 { black, red }
// 5. 类
// TS 在 ES6 类的基础上丰富了更多关于类的实现。
// 首先我们要对 类 ( class ) 有个认识，要有 oop 的思想
// 类是把一个事物或者说对象的属性和行为抽象出来进行封装，具有封装、继承、多态的特性。
// 抽象类中只包含抽象方法，不能实例化( new )
// 类是单继承，多实现
// 实现一个ES6的类
class Animal{
    name: string;
    //构造函数，用于初始化
    constructor(name) {
        this.name = name;
    }
    sayHi() {
        return `My name is ${this.name}`;
    }
}
let a = new Animal('Jack');// new 的时候会调用constructor 实例化一个对象，this指向new出来的对象;
// new 建立了原型链的关联， a.proptoty = Object.creat(Animial.prototype)
console.log(a.sayHi()); // My name is Jack
// 实现继承( extends )
class Cat extends Animal{
    constructor(name){
        super(name); // 原生实现类似 Animal.call(this)
        console.log(name);
    }
    // override
    sayHi(){
        return `Ohhhh~,` + super.sayHi();  // 原生实现类似 Animal.prototype.sayHi.call(this)
    }
}
let cat = new Cat('tom'); // tom
console.log(cat.sayHi()) // Ohhhh~,My name is tom
// [[GET]] and [[SET]]
// 提供get/set方法，可以设置和返回自定义的值
// 实现方式 1：利用原生js的Object提供的方法
Object.defineProperty(this,'Animal',{
    set: function(value){
        this.value = value;
    },
    get: function(){
        return this.value
    }
})
// 实现方式2
class Animal2 {
    constructor(name){
        this.name = name;
    }
    get name(){
        return 'Tom';
    }
    set name(value){
        console.log('setter: ', value);
    }
}
let cat2 = new Animal2('jj') // setter jj
cat2.name = 'gg' // setter gg
console.log(cat2.name) // Tom
// 静态方法
// 用static 修饰，不用实例化的对象来调用，直接由类调用，存储在栈中。
// 静态属性已经在 ES7 提案中
class Person{
    static sayHello(){
        console.log('hello')
    }
}
let p = new Person();
p.sayHello() //报错
Person.sayHello();
// TS 中的拓展
// 1. 访问限制修饰符
// 和 java 中的修饰符一样， public private protected
// public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的
// private 修饰的属性或方法是私有的，不能在声明它的类的外部访问
// protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的
class Cars{
    public name: string;
    private price: number;
    protected bands: string;
    constructor(name, price, bands){
        this.name = name;
        this.price = price;
        this.bands = bands;
    }
}
class Toyota extends Cars{
    constructor(name, price, bands){
        super(name, price, bands)
        console.log(this.name, this.price, this.bands); // 只有price访问不到。
    }
}
let car = new Cars('BMW', 500000, 'BMW520Li');
car.name;
car.price; // 报错 只能在类里边访问
car.bands;// 报错 只能在类里边和之类里面访问
// 抽象类
// abstract 用于定义抽象类和其中的抽象方法。
// 只含有抽象方法和抽象属性的类，抽象方法就是没有方法体的方法。
// 抽象类的特点:
// 1. 不能被实例话
// 2. 实现的时候必须实现其抽象方法
abstract class Computers{
    protected name: string;
    constructor(name: string){
        this.name = name;
    }
    protected abstract printName(): string;
}
class Lenovo extends Computers{
    constructor(name: string){
        super(name);
    }
    // 必须实现这个抽象方法
    protected printName(): string{
        return `this name is:${ this.name }`
    }
}
let thinkpad: Lenovo = new Lenovo('thinkpadE550C');
// 接口
// 这里的接口和前边提到的接口不是一个东西。
// 接口是面向对象中很重要的一个环节，需要实现类去实现( implements )
// 接口使得我们的oop编程更加灵活，我们可以把公共的属性和行为提取出来，这样只需要实现它就可以使用了。
// 类 继承一个类 可以实现多个接口,必须实现接口的所有方法，其实接口就是一个抽象类
// 比如 灯  是一个类， 台灯是其中一个类型， 灯都可以开和关，这段关系可以这样实现
// 接口
interface LampOper{
    lightOn(a: string): void;
    lightOff(): void;
}
// 灯
class Lamp {
    protected name: string;
    constructor(name: string){
        this.name = name;
    }
    lightOn(b: string): void{
        console.log('lightOn with Lamp', b)
    }
    lightOff(): void{
        console.log('lightOff with Lamp')
    }
}
// 台灯
class DeskLamp extends Lamp implements LampOper{
    protected name: string;
    constructor(name: string){
        super(name)
    }
    lightOn(a: string): void{
        console.log('lightOn with DeskLamp', a)
    }
    lightOff(): void{
        console.log('lightOff with DeskLamp')
    }
} 
// 接口定义函数
interface Counter{
    (start: number): any; // 类似于定义函数的构造参数和返回值
    interval: number; //函数自己的属性
    reset(): void; //函数自己的方法
}
function getCounter(): Counter{
    let counter = <Counter>function(start: number){};
    counter.interval = 5;
    counter.reset = function(){
    }
    return counter;
}
let c = getCounter();
c(10);
c.interval = 5.0;
c.reset();
// 泛型
// 泛型其实就是先给它一个万能类型，直到使用的时候我再具体的给它一个类型
function creatArray<T>(length: number, x: T): Array<T>{
    let result = [];
    for(let i = 0, len = length; i<len; i++){
        result[i] = x;
    }
    return result
}
creatArray(3, 'x'); // ['x', 'x', 'x']
// 多个类型
function changeType<T,U>(a: [T,U]): [U,T]{
    return  [a[1],a[0]];
}
// 泛型约束
// 采用泛型的时候，由于不知道类型，所以不能盲目的去调用什么属性
// 比如你泛型为 T ,你去用 .length ，它万一是数字呢
// 这个时候就可以采用泛型约束
function justTest<T>(a: T): T{
    //console.log(a.length); // T 不一定有length属性啊
    return a;
    
}
// So
interface justInterface{
    length: number;  //约束必须有length属性
}
function justTest2<T extends justInterface>(a: T): T{
    console.log(a.length); 
    return a;
}
// 当然接口也可以加泛型，类也可以加泛型。

// 1. 原始数据类型的ts表示
// 布尔型
// 使用 boolean 定义数值类型
let isBoolean: boolean = false;
let creatByNewBoolean: boolean = new Boolean(1);
let createdByBoolean: boolean = Boolean(5);
// 这里可以看到第二个构造函数创建boolean对象编译不会通过。
// 说明了: 1. ts是一种将javaScript转换为强类型(静态)语言的方案
//         2. new Boolean() 与 Boolean() 的区别
// 补充:
// new 可以理解为构造函数，会建立原型链的继承、链接关系，返回的是一个对象。
// 在 TypeScript 中，boolean 是 JavaScript 中的基本类型，而 Boolean 是 JavaScript 中的构造函数。
// const Boolean : BooleanConstructor(value?: any) => boolean,
// 所以 Boolean(5) 是构造函数调用，返回的是一个 boolean
// 其他的基本类型，除了(null,undefined)也一样。
// 数值型
// 使用 number 定义数值类型
let num1: number = 6;
let num2: number = NaN;
let num3: number = Infinity;
let num4: number = 5.6;
let num5: number = +0;
let num6: number = 0xfff;
let num7: number = new Number(5);
let num8: number = Number(5);
// 二进制和八进制会在编译的时候转成十进制。
// 字符型
// 使用 string 定义字符串类型
let str: string = 'huangteng';
let age: number = 25;
let teml: string = `this is temp str by ${str} who's age is ${age}`
// 空值
// 用void表示没有任何返回值, 用其声明的变量只能是null\undefined
function saySomething(): void {
    alert('test');
}
let unuse: void = 5;
let unuse2: void = null;
let unuse3: void = undefined;
// null or undefined
// TypeScript 中，可以使用 null 和 undefined 来定义这两个原始数据类型
let un: undefined = undefined;
let nu: null = null;
let nu2: null = 5;  // null 只能定义null, undefined同样
let un1: undefined;
let num9: number = un1;
// 任意类型
// TypeScript中可以用any表示任意类型。使其使用起来的效果就像js变量一样
let any1: any = '123';
any1 = 7;
let any2: number = 123;
any2 = '123';  // 如果不是使用any, 合理会报错。
// 在任意值上访问任何属性都是允许的，对其任何操作返回的结果都是any的
// 变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型
let any3;  // 这里注意不能初始化，如果let any3 = '5'; 就不再是any；而是string了；
           // TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。
any3 = 5;
any3 = '5';
// 最好的方式是杜绝这种声明但是不赋值和不确定type的写法。
// 联合类型
// 联合类型使用 | 分隔每个类型，表示类型只能是a |(或者) b
let union: number | string = '5';
union = 15;
// 当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，
// 我们只能访问此联合类型的所有类型里共有的属性或方法.
function getLength(something: string|number): number{
    return something.length;
}
// 上述方法报错是因为不确定参数是string | number,而number是没有length属性的；
function getString(something: string|number): string{
    return something.toString();
}
// 上述方法访问 string 和 number 的共有属性是没问题的
// 联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型
console.log(union.length); // union 被推论为 number;
// 接口
// 那么对象的类型用什么定义呢？
// TypeScript用interface来表示接口，接口的作用是定义对象的 type;
// 以面向对象思想思考，接口封装的是抽象的公共的行为、动作。由具体的个体(class)去实现(implements);
// TypeScript的接口还可以定义对象的属性、特征，对象的属性、特征必须保持和接口的一致,不能多也不能少
interface Person{
    name: string,
    age: number
}
let guy: Person = {
    name: 'jack',
    age: 25
}
// 但是这样有时候会很麻烦，我们很多时候不需要都实现接口的属性，可以使用可选属性，就是加一个?
// 这时可以少，但是还是不可以多
interface Person2{
    name: string,
    age?: number
}
let guy2: Person2 = {
    name: 'jack'
}
// 如果我们非要给它新增一个未定义的属性呢，我们可以使用任意属性
interface Person3{
    name: string,
    age?: number,
    [propName: string]: any  // 任意属性,要求该接口内的基本属性、可选属性都必须是它的子属性
}
let guy3: Person3= {
    name: 'jack',
    job:'jser',
    address:'xxxxx'
}
interface Person4{
    name: string,
    age?: number, // type是number 并不是stirng的子属性，改成string 就可以了。
    [propName: string]: string  // 任意属性,要求该接口内的基本属性、可选属性都必须是它的子属性
}
let guy4: Person4= {
    name: 'jack',
    job:'jser',
    address:'xxxxx'
}
// 只读属性
// 如果我们需要定义接口中的属性在初始化赋值之后就不可以被改变，就可以使用readonly表示只读属性。
interface Animal{
    type: string,
    readonly id: number
}
let cat: Animal = {
    type: 'miao',
    id: 123 // 这里如果不给id初始化赋值，会报错
}
cat.id = 123;  // 报错， 因为 id 初始化后就变成只读属性了。
// 在typeScript中，对于数组的定义非常灵活
// 1. 使用 类型 + [] 的方式来表示，类似于java那样
let arr1: number[] = [1, 2, 3];
let arr2: number[] = [1, 2, 3, '4']; // error
// 联合类型数组
let arr3: (number | string)[] = [1, 2, '3'];
arr3.push(arr1);
arr3.push(5);
arr3.push('5');
// 2. 使用泛型表示  Array<ElementType>
let arry4: Array<number> = [1, 2, 3];
// 3. 用接口表示数组
interface numArray{
    [index: number]: number // 意思是index和值都必须是数字
}
let numArr: numArray = [1, 2, '3'] // 只能是数字
let numArr2: numArray = [1, 2, 3]
let numArr3: numArray = {1:1,2:2} // 但是这貌似也满足
// 4. 能装载各种数据类型的数组，就得使用我们之前学习的 any
let anyArr: any[] = [1, 2, '123', {}];
let anyArr2: Array<any> = [1, 2, '123', {}];
// 5. 在TS中类数组不是数组，用数组的表示会出错，比如函数的参数
function foo(){
    let args: number[] = arguments;
}
// 函数声明与表达式
// 函数的声明
// 限定了参数的格式只能是number,返回值的类型也是number
// 参数不能多，也不能少，bar(1,2,3)  bar(1) 都会报错
function bar(x: number, y: number): number{
    return x + y;
}
// 函数表达式
let myFun = (x: number, y:number) => {
    return x + y;
}
// 上面的表达式左边没有限定类型，会通过类型推导给一个类型；或者是直接给它写全了,但是忒麻烦
let myFun2:(x: number, y: number) => number = function(x: number, y: number):number{
    return x + y;
}
// 可选参数
// 语法上也是加一个 ? , 写法的要求是必须写在后边，也就是说可选参数后边不能再跟一个必须参数了；
function getMySum(x: number, y?: number){
    if(y){
        return x + y;
    }else{
        return x + 5;
    }
}
getMySum(5);
getMySum(5,12);
function getMySum2(x: number, y?: number, z: number){ // z 报错
    if(y){
        return x + y;
    }else{
        return x + 5;
    }
}
// 参数默认值
// 在 ES6 中，我们允许给函数的参数添加默认值，TypeScript 会将添加了默认值的参数识别为可选参数
// 此时就不再有可选参数后边不能再有必选参数的限制了
function getName(firstName: string = 'liu', lastName: string){
    if(lastName){
        return firstName
    }else{
        return firstName + ' ' + lastName
    }
}
getName(,'test'); // 第一个不传或者传一个undefined
// 拓展剩余参数
// 主要还是利用ES6的语法，记住 ...rest 只能反正最后一个参数的位置
function makeArr(arr: Array<any>, ...rest: Array<any>){
    if(rest.length){
        rest.map((val, index)=>{
            arr.push(val);
        })
    }
}
makeArr([], [1, 2, '3']);
// 重载
// 重载可以通俗的理解为传入不同的参数( 参数个数不同 | 类型不同 ),对应作出不同的处理，编译器会根据参数
// 的个数，类型去匹配到对应的执行函数执行。
// 前面写的两个reverse函数只有定义，没有实现，是为了重载的时候精确匹配返回值。
// TypeScript 会优先从最前面的函数定义开始匹配，
// 所以多个函数定义如果由包含关系，需要优先把精确的定义写在前面
function reverse(a: number | string): number;
function reverse(a: number | string): string;
function reverse(a: number | string): number | string{
    if(typeof a === 'string'){
        return a.split('').reverse().join('');
    }else if(typeof a === 'number'){
        return Number((a.toString()).split('').reverse().join(''));
    }
}
reverse(123);
reverse('123')
// 类型断言
// 类型断言（Type Assertion）可以用来绕过编译器的类型推断，手动指定一个值的类型（即程序员对编译器断言）。
// 语法 <类型>值
// note: 在react的TSX语法则必须是 值 as 类型
// 断言和测试中的断言使用理念差不多，其实就是假设一个类型，我断定他就是这个类型，不是就拉到。
// 目的是为了解决一种问题，就是前边提到的联合类型，我不确定我的参数是什么类型，可能是 number
// 还可能是 string ,直接调用 .length方法肯定会报错的，这个时候就可以用类型断言
// 类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的
function testAssert(x: number | string): number{
    if(x.length){
        return x.length; // 报错。x不确定类型，只能使用公共属性
    }else{
        x.toString().length;
    }
}
function testAssert2(x: number | string): number{
    if((<string>x).length){
        return (<string>x).length; // 编译通过，我断言它就是个string类型的
    }else{
        x.toString().length;
    }
}
// 声明文件
// 当使用第三方库时，我们需要引用它的声明文件，约定以 .d.ts结尾
// 其实就是我们使用第三方库，但是TS并不认识它，比如 $ Jquery之类的，
// 我们就需要 声明 他们，使用关键字 declare 
declare var Jquery: (string) => any;
// 这种声明我们一般单独放在一个 .d.ts文件中，这就是声明文件。
// 社区推荐的方式还是通过 @types 来管理声明模块； 
// 如： npm install @types/jquery --save-dev
// 参考: https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files/
// 内置对象
// TS把JS、DOM、BOM中的内置对象都放进了它的核心库中，除了nodejs 的;
// 要想使用TS写node,需要: npm install @types/node --save-dev
// 具体的js内置对象，比如Error、Date、RegExp..., DOM/BOM内置对象 如: HTMLElement,Document...
// 可参见MDN