typeScript核心篇——通过TS写es6类型编程：枚举，类型推论，类型兼容性，高级类型

通过TS写es6类型编程

注意tsconifg修改配置：

"target": "ES6", 
"module": "ES6", 

导出：export default class Main{}
引入：import Main from './js/Main.js';  

tsc -W
=======================================
+++最最注意的是es6引入模块需要加后缀名.js+++
=======================================
1
2
3
4
5
6
7
8
9
10

枚举

使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。 TypeScript支持数字的和基于字符串的枚举

enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}
1
2
3
4
5
6

如上，我们定义了一个数字枚举， Up使用初始化为 1。
其余的成员会从 1开始自动增长。 换句话说， Direction.Up的值为 1， Down为 2， Left为 3， Right为 4。

使用方法有两种：
全局引入和局部引入：

全局引入
export enum COLOR{RED="red",BLUE="blue"};
export default class Main{
    constructor(){
        console.log(COLOR.BLUE);
    }
}
1
2
3
4
5
6
7

局部引入
export default class Main{
    constructor(){
        enum COLOR{RED="red",BLUE="blue"};
        console.log(COLOR.BLUE);
    }
}

1
2
3
4
5
6
7
8

计算的和常量成员

enum FileAccess {
    // constant members
    None,
    Read    = 1 << 1,
    Write   = 1 << 2,
    ReadWrite  = Read | Write,
    // computed member
    G = "123".length
}
1
2
3
4
5
6
7
8
9

运行时的枚举
冻结的对象概念

enum E {
    X, Y, Z
}
function f(obj: { X: number }) {
    return obj.X;
}
f(E);
1
2
3
4
5
6
7

反向映射
除了创建一个以属性名做为对象成员的对象之外，数字枚举成员还具有了 反向映射，从枚举值到枚举名字。 例如，在下面的例子中：

enum Enum {
    A
}
let a = Enum.A;
console.log(a);//0

let nameOfA = Enum[a]; 
console.log(nameOfA);// "A"
1
2
3
4
5
6
7
8

const枚举
常量枚举，不允许修改这个常量枚举数据，不能计算

const enum Enum {
    A = 1,
    B = A * 2//不行
}
1
2
3
4

declare：描述

declare enum Enum {
    A = 1,
    B,
    C = 2
}
1
2
3
4
5

类型推论
当对一个对象进行赋值对象操作，使用泛型接口。

interface IObj{
    a:number;
    b:number;
}

//也就是提前说明这个对象是包括的
var o:IObj=<IObj>{};
o.a=1;
o.b=2;
1
2
3
4
5
6
7
8
9

交叉类型
将T类型和U类型都能放在c对象中。这个类型就叫交叉类型。相当于前面的不同类放在同一类数组的元素当中一样。

<T & U>{}
1

联合类型
函数返回一个什么类型或者什么类型

interface Bird {
    fly();
    layEggs();
}

interface Fish {
    swim();
    layEggs();
}

function getSmallPet(): Fish | Bird {
    // ...
}

let pet = getSmallPet();
pet.layEggs(); // okay
pet.swim();    // errors
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

typeof类型保护

function isNumber(x: any): x is number {
    return typeof x === "number";
}
1
2
3

type定义类型：类型别名

本身就是类型
给赋值的时候，会自动 提示你的赋值范围为是那些。

类型别名
type MouseEmitter="click"|"mousedown"|"mouseover"|"mouseenter"|"mouseleave";
var a:MouseEmitter;
a="mousedown";

type Name=string|number;
var a:Name="a";
a="b";
a=10;

类型别名也可以是泛型 - 我们可以添加类型参数并且在别名声明的右侧传入：
type GetName<T>={value:T};
var a:GetName<number>={value:1};
var b:GetName<string>={value:"a"};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

映射类型

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
}
type Partial<T> = {
    [P in keyof T]?: T[P];
}
关键字 keyof
1
2
3
4
5
6
7

命名空间

可以切换命名空间，开发阶段，线上阶段。

namespace A{
    export class Box{
        constructor(){

        }
        public  play(){
            console.log("play1");
        }
    }
}

namespace B{
    export class Box{
        constructor(){

        }
        public play(){
            console.log("play2");
        }
    }
}

var a:A.Box=new A.Box();
var b:B.Box=new B.Box();
a.play();
b.play();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

装饰器 @ab()

若要启用实验性的装饰器特性，你必须在命令行或tsconfig.json里启用experimentalDecorators编译器选项：
而且装饰器必须是一个闭包写法：作用类似于proxy

• target就是装饰器在哪里被调用，target就是这个对象
• key就是装饰器被调用下面的方法名
• disc 就是装饰器被调用下面的方法的描述对象

function ab(){
    return function(target:Main,key:string,disc:PropertyDescriptor){
        // target就是装饰器在哪里被调用，target就是这个对象
        // key就是装饰器被调用下面的方法名
        // disc 就是装饰器被调用下面的方法的描述对象
        // console.log(target,key,disc);
        // disc.value();
        target.play();
    }
}
export default class Main{
    @ab()
    public method(){
        console.log("aaa")
    }
    public play(){
        console.log("play");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19